@usefragments/ui 1.6.0 → 2.0.0

package/src/components/Stack/Stack.contract.json

@@ -1,15 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Stack",
-  "description": "Flexible layout component for arranging children in rows or columns with consistent spacing. Supports responsive direction and gap.",
+  "description": "Stacks children in a row or column with one consistent gap.",
   "category": "layout",
-  "tags": [
-    "stack",
-    "layout",
-    "flex",
-    "spacing",
-    "responsive"
-  ],
+  "tags": ["stack", "layout", "flex", "spacing", "responsive"],
   "status": "stable",
   "sourcePath": "src/components/Stack/index.tsx",
   "exportName": "Stack",
@@ -47,24 +41,13 @@
       "type": "enum",
       "description": "Cross-axis alignment",
       "required": false,
-      "values": [
-        "start",
-        "center",
-        "end",
-        "stretch",
-        "baseline"
-      ]
+      "values": ["start", "center", "end", "stretch", "baseline"]
     },
     "justify": {
       "type": "enum",
       "description": "Main-axis alignment",
       "required": false,
-      "values": [
-        "start",
-        "center",
-        "end",
-        "between"
-      ]
+      "values": ["start", "center", "end", "between"]
     },
     "wrap": {
       "type": "boolean",
@@ -108,22 +91,21 @@
   },
   "usage": {
     "when": [
-      "Arranging elements in a row or column",
-      "Creating consistent spacing between items",
-      "Building responsive layouts",
-      "Simple flexbox-based arrangements"
+      "Spacing a short row or column of elements",
+      "Any one-directional flexbox arrangement",
+      "Layouts that flip direction at a breakpoint"
     ],
     "whenNot": [
-      "Complex grid layouts (use Grid)",
-      "Button-specific grouping (use ButtonGroup)",
-      "Page-level layout (use AppShell)"
+      "Two-dimensional layouts (use Grid)",
+      "Grouping buttons into one control (use ButtonGroup)",
+      "Page shell regions (use AppShell)"
     ],
     "guidelines": [
-      "Use semantic elements via the \"as\" prop when appropriate",
-      "Leverage responsive props for mobile-first layouts",
-      "Keep spacing consistent within related sections",
-      "Consider alignment for visual balance",
-      "Pass DOM attributes (id, role, aria-*, data-*, event handlers) directly to Stack root when needed"
+      "Set gap once on the parent instead of margins on children",
+      "Numeric gaps (1-8) map to the same spacing scale as the tokens",
+      "direction, gap, and align all accept per-breakpoint objects",
+      "Use as=\"nav\" or as=\"ul\" so the markup stays semantic",
+      "separator draws dividers without extra elements"
     ],
     "accessibility": [
       "Use semantic elements (nav, section, etc.) via \"as\" prop",
@@ -134,42 +116,37 @@
   "examples": [
     {
       "name": "Vertical Stack",
-      "description": "Default column layout",
-      "code": "<Stack gap=\"sm\">\n  <Badge>Item 1</Badge>\n  <Badge>Item 2</Badge>\n  <Badge>Item 3</Badge>\n</Stack>"
+      "description": "Children flow top to bottom — the default.",
+      "code": "import { Box } from '@/components/Box';\nimport { Stack } from '@/components/Stack';\n\n<Stack gap=\"sm\">\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">One</Box>\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">Two</Box>\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">Three</Box>\n</Stack>"
     },
     {
       "name": "Horizontal Stack",
-      "description": "Row layout",
-      "code": "<Stack direction=\"row\" gap=\"sm\">\n  <Badge>Item 1</Badge>\n  <Badge>Item 2</Badge>\n  <Badge>Item 3</Badge>\n</Stack>"
+      "description": "Children flow left to right.",
+      "code": "import { Box } from '@/components/Box';\nimport { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\">\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">One</Box>\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">Two</Box>\n  <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">Three</Box>\n</Stack>"
     },
     {
       "name": "Gap Sizes",
-      "description": "Different spacing options",
-      "code": "<Stack gap=\"lg\">\n  <Stack direction=\"row\" gap=\"xs\">\n    <Badge variant=\"info\">XS</Badge>\n    <Badge variant=\"info\">Gap</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap=\"sm\">\n    <Badge variant=\"info\">SM</Badge>\n    <Badge variant=\"info\">Gap</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap=\"md\">\n    <Badge variant=\"info\">MD</Badge>\n    <Badge variant=\"info\">Gap</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap=\"lg\">\n    <Badge variant=\"info\">LG</Badge>\n    <Badge variant=\"info\">Gap</Badge>\n  </Stack>\n</Stack>"
-    },
-    {
-      "name": "Numeric Gap",
-      "description": "Using number values (1-8) mapped to the spacing scale",
-      "code": "<Stack gap=\"lg\">\n  <Stack direction=\"row\" gap={2}>\n    <Badge variant=\"info\">Gap 2</Badge>\n    <Badge variant=\"info\">Gap 2</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap={4}>\n    <Badge variant=\"info\">Gap 4</Badge>\n    <Badge variant=\"info\">Gap 4</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap={6}>\n    <Badge variant=\"info\">Gap 6</Badge>\n    <Badge variant=\"info\">Gap 6</Badge>\n  </Stack>\n</Stack>"
+      "description": "One spacing token sets every gap in the stack.",
+      "code": "import { Box } from '@/components/Box';\nimport { Stack } from '@/components/Stack';\n\n<Stack gap=\"lg\">\n  <Stack direction=\"row\" gap=\"xs\">\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">xs</Box>\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">xs</Box>\n  </Stack>\n  <Stack direction=\"row\" gap=\"sm\">\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">sm</Box>\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">sm</Box>\n  </Stack>\n  <Stack direction=\"row\" gap=\"md\">\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">md</Box>\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">md</Box>\n  </Stack>\n  <Stack direction=\"row\" gap=\"lg\">\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">lg</Box>\n    <Box background=\"secondary\" rounded=\"sm\" paddingX=\"md\" paddingY=\"sm\">lg</Box>\n  </Stack>\n</Stack>"
     },
     {
       "name": "Alignment",
-      "description": "Cross-axis and main-axis alignment",
-      "code": "<Stack gap=\"md\">\n  <Stack direction=\"row\" gap=\"sm\" justify=\"between\" style={{ width: '200px', padding: '8px', background: 'var(--fui-bg-secondary)', borderRadius: '4px' }}>\n    <Badge>Start</Badge>\n    <Badge>End</Badge>\n  </Stack>\n  <Stack direction=\"row\" gap=\"sm\" justify=\"center\" style={{ width: '200px', padding: '8px', background: 'var(--fui-bg-secondary)', borderRadius: '4px' }}>\n    <Badge>Centered</Badge>\n  </Stack>\n</Stack>"
+      "description": "justify positions children along the main axis.",
+      "code": "import { Box } from '@/components/Box';\nimport { Stack } from '@/components/Stack';\n\n<Stack gap=\"md\">\n  <Box width=\"240px\" border rounded=\"sm\" padding=\"sm\">\n    <Stack direction=\"row\" gap=\"sm\" justify=\"between\">\n      <Box background=\"secondary\" rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">Start</Box>\n      <Box background=\"secondary\" rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">End</Box>\n    </Stack>\n  </Box>\n  <Box width=\"240px\" border rounded=\"sm\" padding=\"sm\">\n    <Stack direction=\"row\" gap=\"sm\" justify=\"center\">\n      <Box background=\"secondary\" rounded=\"sm\" paddingX=\"sm\" paddingY=\"xs\">Centered</Box>\n    </Stack>\n  </Box>\n</Stack>"
     },
     {
       "name": "Responsive",
-      "description": "Direction changes at breakpoints",
-      "code": "<Stack\n  direction={{ base: 'column', md: 'row' }}\n  gap={{ base: 'sm', md: 'lg' }}\n>\n  <Button variant=\"secondary\">First</Button>\n  <Button variant=\"secondary\">Second</Button>\n  <Button variant=\"secondary\">Third</Button>\n</Stack>"
+      "description": "Swap direction and gap per breakpoint with an object value.",
+      "code": "<Stack\n  direction={{ base: 'column', md: 'row' }}\n  gap={{ base: 'sm', md: 'lg' }}\n>\n  <Button variant=\"soft\">First</Button>\n  <Button variant=\"soft\">Second</Button>\n  <Button variant=\"soft\">Third</Button>\n</Stack>"
     },
     {
       "name": "With Separator",
-      "description": "Default line separator between items",
-      "code": "<Stack gap=\"md\" separator>\n  <div>Section One</div>\n  <div>Section Two</div>\n  <div>Section Three</div>\n</Stack>"
+      "description": "Draws a divider between each child.",
+      "code": "import { Stack } from '@/components/Stack';\nimport { Text } from '@/components/Text';\n\n<Stack gap=\"md\" separator>\n  <Text>Section one</Text>\n  <Text>Section two</Text>\n  <Text>Section three</Text>\n</Stack>"
     },
     {
       "name": "Semantic Element",
-      "description": "Using nav element for navigation",
+      "description": "The as prop renders a real nav, section, or list element.",
       "code": "<Stack as=\"nav\" direction=\"row\" gap=\"md\">\n  <Button variant=\"ghost\" size=\"sm\">Home</Button>\n  <Button variant=\"ghost\" size=\"sm\">About</Button>\n  <Button variant=\"ghost\" size=\"sm\">Contact</Button>\n</Stack>"
     }
   ],
@@ -201,15 +178,11 @@
       "as: string - HTML element",
       "Pass-through DOM props supported on the root (id, role, aria-*, data-*, handlers)"
     ],
-    "a11yRules": [
-      "A11Y_SEMANTIC_ELEMENTS"
-    ]
+    "a11yRules": ["A11Y_SEMANTIC_ELEMENTS"]
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Root"
-    ]
+    "subComponents": ["Root"]
   },
   "provenance": {
     "source": "migrated",

package/src/components/Stack/Stack.module.scss

@@ -1,5 +1,7 @@
 @use "../../recipes/layout";
+@use "../../tokens/mixins" as *;
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 
 .stack {
   display: flex;
@@ -19,18 +21,18 @@
 .directionResponsive {
   flex-direction: var(--fui-stack-direction, column);
 
-  @media (min-width: 640px) {
+  @include breakpoint-sm {
     flex-direction: var(--fui-stack-direction-sm, var(--fui-stack-direction, column));
   }
 
-  @media (min-width: 768px) {
+  @include breakpoint-md {
     flex-direction: var(
       --fui-stack-direction-md,
       var(--fui-stack-direction-sm, var(--fui-stack-direction, column))
     );
   }
 
-  @media (min-width: 1024px) {
+  @include breakpoint-lg {
     flex-direction: var(
       --fui-stack-direction-lg,
       var(
@@ -40,7 +42,7 @@
     );
   }
 
-  @media (min-width: 1280px) {
+  @include breakpoint-xl {
     flex-direction: var(
       --fui-stack-direction-xl,
       var(
@@ -58,22 +60,22 @@
 .gapResponsive {
   gap: var(--fui-stack-gap, #{layout.gap("none")});
 
-  @media (min-width: 640px) {
+  @include breakpoint-sm {
     gap: var(--fui-stack-gap-sm, var(--fui-stack-gap, 0));
   }
 
-  @media (min-width: 768px) {
+  @include breakpoint-md {
     gap: var(--fui-stack-gap-md, var(--fui-stack-gap-sm, var(--fui-stack-gap, 0)));
   }
 
-  @media (min-width: 1024px) {
+  @include breakpoint-lg {
     gap: var(
       --fui-stack-gap-lg,
       var(--fui-stack-gap-md, var(--fui-stack-gap-sm, var(--fui-stack-gap, 0)))
     );
   }
 
-  @media (min-width: 1280px) {
+  @include breakpoint-xl {
     gap: var(
       --fui-stack-gap-xl,
       var(
@@ -133,75 +135,75 @@
   background-color: var(--fui-border, $fui-border);
 
   &[data-orientation="horizontal"] {
-    height: var(--fui-stroke-hairline, 1px);
+    height: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
     width: 100%;
   }
 
   &[data-orientation="vertical"] {
-    width: var(--fui-stroke-hairline, 1px);
+    width: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
     align-self: stretch;
   }
 }
 
 .directionResponsive[data-direction-base="row"] > .separator {
-  width: var(--fui-stroke-hairline, 1px);
+  width: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
   height: auto;
   align-self: stretch;
 }
 
 .directionResponsive[data-direction-base="column"] > .separator {
   width: 100%;
-  height: var(--fui-stroke-hairline, 1px);
+  height: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
 }
 
-@media (min-width: 640px) {
+@include breakpoint-sm {
   .directionResponsive[data-direction-sm="row"] > .separator {
-    width: var(--fui-stroke-hairline, 1px);
+    width: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
     height: auto;
     align-self: stretch;
   }
 
   .directionResponsive[data-direction-sm="column"] > .separator {
     width: 100%;
-    height: var(--fui-stroke-hairline, 1px);
+    height: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
   }
 }
 
-@media (min-width: 768px) {
+@include breakpoint-md {
   .directionResponsive[data-direction-md="row"] > .separator {
-    width: var(--fui-stroke-hairline, 1px);
+    width: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
     height: auto;
     align-self: stretch;
   }
 
   .directionResponsive[data-direction-md="column"] > .separator {
     width: 100%;
-    height: var(--fui-stroke-hairline, 1px);
+    height: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
   }
 }
 
-@media (min-width: 1024px) {
+@include breakpoint-lg {
   .directionResponsive[data-direction-lg="row"] > .separator {
-    width: var(--fui-stroke-hairline, 1px);
+    width: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
     height: auto;
     align-self: stretch;
   }
 
   .directionResponsive[data-direction-lg="column"] > .separator {
     width: 100%;
-    height: var(--fui-stroke-hairline, 1px);
+    height: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
   }
 }
 
-@media (min-width: 1280px) {
+@include breakpoint-xl {
   .directionResponsive[data-direction-xl="row"] > .separator {
-    width: var(--fui-stroke-hairline, 1px);
+    width: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
     height: auto;
     align-self: stretch;
   }
 
   .directionResponsive[data-direction-xl="column"] > .separator {
     width: 100%;
-    height: var(--fui-stroke-hairline, 1px);
+    height: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
   }
 }

package/src/components/Stack/index.tsx

@@ -107,7 +107,7 @@ const StackRoot = React.forwardRef<HTMLElement, StackProps>(function Stack(
 
   // Handle responsive direction
   if (isResponsiveDirection(direction)) {
-    directionClass = styles.directionResponsive;
+    directionClass = styles.directionResponsive ?? "";
     const vars: Record<string, string> = {};
     const baseDirection = direction.base ?? "column";
     const smDirection = direction.sm ?? baseDirection;
@@ -121,12 +121,12 @@ const StackRoot = React.forwardRef<HTMLElement, StackProps>(function Stack(
     vars["--fui-stack-direction-xl"] = xlDirection;
     inlineStyle = vars as unknown as React.CSSProperties;
   } else {
-    directionClass = styles[direction];
+    directionClass = styles[direction] ?? "";
   }
 
   // Handle responsive gap
   if (isResponsiveGap(gap)) {
-    gapClass = styles.gapResponsive;
+    gapClass = styles.gapResponsive ?? false;
     const gapVars: Record<string, string> = {};
     if (gap.base) gapVars["--fui-stack-gap"] = resolveLayoutGap(gap.base);
     if (gap.sm) gapVars["--fui-stack-gap-sm"] = resolveLayoutGap(gap.sm);

package/src/components/Switch/Switch.contract.json

@@ -1,15 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Switch",
-  "description": "Binary on/off switch for settings and preferences. Provides immediate visual feedback and is ideal for options that take effect instantly.",
-  "category": "forms",
-  "tags": [
-    "switch",
-    "toggle",
-    "boolean",
-    "settings",
-    "preference"
-  ],
+  "description": "Toggles a setting that takes effect immediately.",
+  "category": "inputs",
+  "tags": ["switch", "toggle", "boolean", "settings", "preference"],
   "status": "stable",
   "sourcePath": "src/components/Switch/index.tsx",
   "exportName": "Switch",
@@ -78,11 +72,7 @@
       "description": "Switch track size",
       "default": "md",
       "required": false,
-      "values": [
-        "sm",
-        "md",
-        "lg"
-      ]
+      "values": ["sm", "md", "lg"]
     },
     "className": {
       "type": "string",
@@ -117,35 +107,34 @@
   },
   "usage": {
     "when": [
-      "Binary settings that take effect immediately (e.g., dark mode, notifications)",
-      "Enabling/disabling features in a settings panel",
-      "Options where the result is immediately visible",
-      "Mobile-friendly boolean inputs"
+      "Settings that apply the moment they change",
+      "Turning a feature on or off in a settings panel",
+      "The result is visible straight away"
     ],
     "whenNot": [
-      "Multiple options in a group (use checkbox group)",
-      "Selection requires form submission to take effect (use checkbox)",
-      "Yes/No questions in forms (use radio buttons)",
-      "Complex multi-state options (use select or radio)"
+      "Choices that only apply on submit (use Checkbox)",
+      "Several options at once (use a Checkbox group)",
+      "Yes/no questions in a form (use RadioGroup)",
+      "More than two states (use Select or RadioGroup)"
     ],
     "guidelines": [
-      "Switch should always have a visible label explaining what it controls",
-      "The \"on\" state should be the positive/enabling action",
-      "Changes should take effect immediately - no save button needed",
-      "Include helperText for switches whose effect isn't obvious from the label",
-      "Group related switches visually in settings panels"
+      "The label names what is being turned on",
+      "On always means enabled, never the reverse",
+      "Apply the change immediately — no save button",
+      "Add helperText when the label alone is ambiguous",
+      "Stack related switches together"
     ],
     "accessibility": [
-      "Uses role=\"switch\" with aria-checked for proper semantics",
-      "Must have an accessible label (visible or aria-label)",
-      "Focus indicator must be clearly visible",
-      "State change must be announced by screen readers"
+      "role=\"switch\" with aria-checked",
+      "Every switch has a label, visible or aria-label",
+      "Focus ring stays visible",
+      "Flipping it is announced"
     ]
   },
   "examples": [
     {
       "name": "Default Off",
-      "description": "Switch in the off state",
+      "description": "Nothing happens until the user flips it.",
       "code": "<StatefulSwitch label=\"Email notifications\" />",
       "args": {
         "label": "Email notifications"
@@ -153,37 +142,37 @@
     },
     {
       "name": "Checked",
-      "description": "Switch in the on state",
-      "code": "<StatefulSwitch checked label=\"Dark mode\" />",
+      "description": "Starts on; the track fills with the accent colour.",
+      "code": "<StatefulSwitch defaultChecked label=\"Dark mode\" />",
       "args": {
-        "checked": true,
+        "defaultChecked": true,
         "label": "Dark mode"
       }
     },
     {
       "name": "With Helper Text",
-      "description": "Switch with explanatory helper text",
-      "code": "<StatefulSwitch\n  checked\n  label=\"Auto-save\"\n  helperText=\"Automatically save changes as you type\"\n/>",
+      "description": "Second line says what the setting actually does.",
+      "code": "<StatefulSwitch\n  defaultChecked\n  label=\"Auto-save\"\n  helperText=\"Automatically save changes as you type\"\n/>",
       "args": {
-        "checked": true,
+        "defaultChecked": true,
         "label": "Auto-save",
         "helperText": "Automatically save changes as you type"
       }
     },
     {
       "name": "Sizes",
-      "description": "Available size variants",
-      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <StatefulSwitch size=\"sm\" checked label=\"Small switch\" />\n  <StatefulSwitch size=\"md\" checked label=\"Medium switch (default)\" />\n  <StatefulSwitch size=\"lg\" checked label=\"Large switch\" />\n</div>"
+      "description": "Three track sizes: sm, md, lg.",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <StatefulSwitch size=\"sm\" defaultChecked label=\"Small switch\" />\n  <StatefulSwitch size=\"md\" defaultChecked label=\"Medium switch (default)\" />\n  <StatefulSwitch size=\"lg\" defaultChecked label=\"Large switch\" />\n</div>"
     },
     {
       "name": "Disabled States",
-      "description": "Non-interactive switches showing both states",
+      "description": "Locked off and locked on, both dimmed.",
       "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>\n  <Switch disabled label=\"Premium feature (upgrade required)\" />\n  <Switch disabled checked label=\"System managed (read-only)\" />\n</div>"
     },
     {
       "name": "Settings Panel",
-      "description": "Multiple switches in a realistic settings layout",
-      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '320px' }}>\n  <StatefulSwitch\n    checked\n    label=\"Push notifications\"\n    helperText=\"Receive push notifications on your device\"\n  />\n  <StatefulSwitch\n    checked\n    label=\"Email digest\"\n    helperText=\"Weekly summary of your activity\"\n  />\n  <StatefulSwitch\n    label=\"Marketing emails\"\n    helperText=\"Product updates and promotional offers\"\n  />\n</div>"
+      "description": "Stacked switches sharing one rhythm and helper column.",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '320px' }}>\n  <StatefulSwitch\n    defaultChecked\n    label=\"Push notifications\"\n    helperText=\"Receive push notifications on your device\"\n  />\n  <StatefulSwitch\n    defaultChecked\n    label=\"Email digest\"\n    helperText=\"Weekly summary of your activity\"\n  />\n  <StatefulSwitch\n    label=\"Marketing emails\"\n    helperText=\"Product updates and promotional offers\"\n  />\n</div>"
     }
   ],
   "relations": [
@@ -218,9 +207,7 @@
   },
   "ai": {
     "compositionPattern": "compound",
-    "subComponents": [
-      "Root"
-    ]
+    "subComponents": ["Root"]
   },
   "provenance": {
     "source": "migrated",