build: release 09-06-2025

apps/builder/app/builder/features/command-panel/command-panel.tsx

@@ -102,6 +102,7 @@ type ComponentOption = {
   category: TemplateMeta["category"];
   icon: undefined | string;
   order: undefined | number;
+  firstInstance: { component: string };
 };
 
 const getComponentScore = (meta: ComponentOption) => {
@@ -158,6 +159,7 @@ const $componentOptions = computed(
         category,
         icon: meta.icon,
         order: meta.order,
+        firstInstance: { component: name },
       });
     }
     for (const [name, meta] of templates) {
@@ -188,6 +190,7 @@ const $componentOptions = computed(
         category: meta.category,
         icon: meta.icon ?? componentMeta?.icon,
         order: meta.order,
+        firstInstance: meta.template.instances[0],
       });
     }
     componentOptions.sort(
@@ -205,7 +208,7 @@ const ComponentOptionsGroup = ({ options }: { options: ComponentOption[] }) => {
       heading={<CommandGroupHeading>Components</CommandGroupHeading>}
       actions={["add"]}
     >
-      {options.map(({ component, label, category, icon }) => {
+      {options.map(({ component, label, category, icon, firstInstance }) => {
         return (
           <CommandItem
             key={component}
@@ -225,7 +228,7 @@ const ComponentOptionsGroup = ({ options }: { options: ComponentOption[] }) => {
           >
             <Flex gap={2}>
               <CommandIcon>
-                <InstanceIcon instance={{ component }} icon={icon} />
+                <InstanceIcon instance={firstInstance} icon={icon} />
               </CommandIcon>
               <Text variant="labelsTitleCase">
                 {label}{" "}
@@ -265,7 +268,9 @@ const $tagOptions = computed(
     newInstances.set(childInstance.id, childInstance);
     newInstances.set(instance.id, {
       ...instance,
-      children: [...instance.children, { type: "id", value: childInstance.id }],
+      // avoid preserving original children to not invalidate tag
+      // when some descendants do not satisfy content model
+      children: [{ type: "id", value: childInstance.id }],
     });
     for (const tag of tags) {
       childInstance.tag = tag;

apps/builder/app/builder/features/style-panel/shared/model.tsx

@@ -208,7 +208,7 @@ const getDefinedStyles = ({
   ];
 };
 
-const $model = computed(
+export const $styleObjectModel = computed(
   [
     $styles,
     $styleSourceSelections,
@@ -241,7 +241,7 @@ const $model = computed(
 
 export const $computedStyleDeclarations = computed(
   [
-    $model,
+    $styleObjectModel,
     $selectedInstancePathWithRoot,
     $selectedOrLastStyleSourceSelector,
     $registeredComponentMetas,
@@ -331,7 +331,11 @@ export const $availableColorVariables = computed(
 
 export const createComputedStyleDeclStore = (property: CssProperty) => {
   return computed(
-    [$model, $selectedInstancePathWithRoot, $selectedOrLastStyleSourceSelector],
+    [
+      $styleObjectModel,
+      $selectedInstancePathWithRoot,
+      $selectedOrLastStyleSourceSelector,
+    ],
     (model, instancePath, styleSourceSelector) => {
       return getComputedStyleDecl({
         model,
@@ -345,7 +349,7 @@ export const createComputedStyleDeclStore = (property: CssProperty) => {
 };
 
 export const useStyleObjectModel = () => {
-  return useStore($model);
+  return useStore($styleObjectModel);
 };
 
 export const useComputedStyleDecl = (property: CssProperty) => {
@@ -378,7 +382,7 @@ export const useParentComputedStyleDecl = (property: CssProperty) => {
   const $store = useMemo(
     () =>
       computed(
-        [$model, $closestStylableInstanceSelector],
+        [$styleObjectModel, $closestStylableInstanceSelector],
         (model, instanceSelector) => {
           return getComputedStyleDecl({
             model,
@@ -397,7 +401,7 @@ export const getInstanceStyleDecl = (
   instanceSelector: InstanceSelector
 ) => {
   return getComputedStyleDecl({
-    model: $model.get(),
+    model: $styleObjectModel.get(),
     instanceSelector,
     property,
   });