@usefragments/ui 1.6.0 → 2.0.0

package/src/components/Drawer/Drawer.module.scss

@@ -1,13 +1,12 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action" as action;
 @use "../../recipes/overlay" as overlay;
 
 .backdrop {
-  position: fixed;
-  z-index: var(--fui-overlay-layer-backdrop, 50);
-  inset: 0;
-  background-color: var(--fui-backdrop, $fui-backdrop);
+  @include overlay.backdrop;
+
   opacity: 0;
   transition: opacity var(--fui-transition-normal, $fui-transition-normal);
 
@@ -25,7 +24,7 @@
   @include overlay.safe-viewport;
 
   position: fixed;
-  z-index: var(--fui-overlay-layer-modal, 51);
+  z-index: var(--fui-overlay-layer-modal, #{$fui-overlay-layer-modal});
   inset: 0;
   pointer-events: none;
 
@@ -38,7 +37,7 @@
   @include overlay.modal-shell;
 
   position: fixed;
-  z-index: var(--fui-overlay-layer-modal, 51);
+  z-index: var(--fui-overlay-layer-modal, #{$fui-overlay-layer-modal});
   display: flex;
   flex-direction: column;
   pointer-events: auto;
@@ -61,9 +60,11 @@
 }
 
 .side-right {
-  inset-block: var(--_fui-overlay-safe-top) var(--_fui-overlay-safe-bottom);
-  inset-inline-end: var(--_fui-overlay-safe-right);
-  transform: translateX(calc(100% + var(--drawer-swipe-movement-x, 0px)));
+  @include overlay.side-panel-geometry("end");
+
+  transform: translateX(
+    calc(#{overlay.side-panel-offscreen("end")} + var(--drawer-swipe-movement-x, 0px))
+  );
 
   &[data-open] {
     transform: translateX(var(--drawer-swipe-movement-x, 0px));
@@ -71,14 +72,16 @@
 
   &[data-starting-style],
   &[data-ending-style] {
-    transform: translateX(100%);
+    transform: translateX(overlay.side-panel-offscreen("end"));
   }
 }
 
 .side-left {
-  inset-block: var(--_fui-overlay-safe-top) var(--_fui-overlay-safe-bottom);
-  inset-inline-start: var(--_fui-overlay-safe-left);
-  transform: translateX(calc(-100% + var(--drawer-swipe-movement-x, 0px)));
+  @include overlay.side-panel-geometry("start");
+
+  transform: translateX(
+    calc(#{overlay.side-panel-offscreen("start")} + var(--drawer-swipe-movement-x, 0px))
+  );
 
   &[data-open] {
     transform: translateX(var(--drawer-swipe-movement-x, 0px));
@@ -86,14 +89,23 @@
 
   &[data-starting-style],
   &[data-ending-style] {
-    transform: translateX(-100%);
+    transform: translateX(overlay.side-panel-offscreen("start"));
   }
 }
 
 .side-top {
-  inset-block-start: var(--_fui-overlay-safe-top);
-  inset-inline: var(--_fui-overlay-safe-left) var(--_fui-overlay-safe-right);
-  transform: translateY(calc(-100% + var(--drawer-swipe-movement-y, 0px)));
+  inset-block-start: var(
+    --_fui-overlay-safe-top,
+    var(--fui-raw-space-16, #{measurements.raw-space(16)})
+  );
+  inset-inline: var(
+      --_fui-overlay-safe-left,
+      var(--fui-raw-space-16, #{measurements.raw-space(16)})
+    )
+    var(--_fui-overlay-safe-right, var(--fui-raw-space-16, #{measurements.raw-space(16)}));
+  transform: translateY(
+    calc(#{overlay.side-panel-offscreen("top")} + var(--drawer-swipe-movement-y, 0px))
+  );
 
   &[data-open] {
     transform: translateY(var(--drawer-swipe-movement-y, 0px));
@@ -101,14 +113,23 @@
 
   &[data-starting-style],
   &[data-ending-style] {
-    transform: translateY(-100%);
+    transform: translateY(overlay.side-panel-offscreen("top"));
   }
 }
 
 .side-bottom {
-  inset-block-end: var(--_fui-overlay-safe-bottom);
-  inset-inline: var(--_fui-overlay-safe-left) var(--_fui-overlay-safe-right);
-  transform: translateY(calc(100% + var(--drawer-swipe-movement-y, 0px)));
+  inset-block-end: var(
+    --_fui-overlay-safe-bottom,
+    var(--fui-raw-space-16, #{measurements.raw-space(16)})
+  );
+  inset-inline: var(
+      --_fui-overlay-safe-left,
+      var(--fui-raw-space-16, #{measurements.raw-space(16)})
+    )
+    var(--_fui-overlay-safe-right, var(--fui-raw-space-16, #{measurements.raw-space(16)}));
+  transform: translateY(
+    calc(#{overlay.side-panel-offscreen("bottom")} + var(--drawer-swipe-movement-y, 0px))
+  );
 
   &[data-open] {
     transform: translateY(var(--drawer-swipe-movement-y, 0px));
@@ -116,7 +137,7 @@
 
   &[data-starting-style],
   &[data-ending-style] {
-    transform: translateY(100%);
+    transform: translateY(overlay.side-panel-offscreen("bottom"));
   }
 }
 
@@ -126,47 +147,101 @@
 
 .side-left,
 .side-right {
-  &.size-sm {
-    inline-size: min(#{overlay.drawer-inline("sm")}, var(--_fui-overlay-safe-inline));
+  &.width-sm {
+    inline-size: min(
+      #{overlay.drawer-inline("sm")},
+      var(
+        --_fui-overlay-safe-inline,
+        calc(100dvw - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+      )
+    );
   }
 
-  &.size-md {
-    inline-size: min(#{overlay.drawer-inline("md")}, var(--_fui-overlay-safe-inline));
+  &.width-md {
+    inline-size: min(
+      #{overlay.drawer-inline("md")},
+      var(
+        --_fui-overlay-safe-inline,
+        calc(100dvw - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+      )
+    );
   }
 
-  &.size-lg {
-    inline-size: min(#{overlay.drawer-inline("lg")}, var(--_fui-overlay-safe-inline));
+  &.width-lg {
+    inline-size: min(
+      #{overlay.drawer-inline("lg")},
+      var(
+        --_fui-overlay-safe-inline,
+        calc(100dvw - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+      )
+    );
   }
 
-  &.size-xl {
-    inline-size: min(#{overlay.drawer-inline("xl")}, var(--_fui-overlay-safe-inline));
+  &.width-xl {
+    inline-size: min(
+      #{overlay.drawer-inline("xl")},
+      var(
+        --_fui-overlay-safe-inline,
+        calc(100dvw - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+      )
+    );
   }
 
-  &.size-full {
-    inline-size: var(--_fui-overlay-safe-inline);
+  &.width-full {
+    inline-size: var(
+      --_fui-overlay-safe-inline,
+      calc(100dvw - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+    );
   }
 }
 
 .side-top,
 .side-bottom {
-  &.size-sm {
-    block-size: min(#{overlay.drawer-block("sm")}, var(--_fui-overlay-safe-block));
+  &.width-sm {
+    block-size: min(
+      #{overlay.drawer-block("sm")},
+      var(
+        --_fui-overlay-safe-block,
+        calc(100dvh - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+      )
+    );
   }
 
-  &.size-md {
-    block-size: min(#{overlay.drawer-block("md")}, var(--_fui-overlay-safe-block));
+  &.width-md {
+    block-size: min(
+      #{overlay.drawer-block("md")},
+      var(
+        --_fui-overlay-safe-block,
+        calc(100dvh - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+      )
+    );
   }
 
-  &.size-lg {
-    block-size: min(#{overlay.drawer-block("lg")}, var(--_fui-overlay-safe-block));
+  &.width-lg {
+    block-size: min(
+      #{overlay.drawer-block("lg")},
+      var(
+        --_fui-overlay-safe-block,
+        calc(100dvh - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+      )
+    );
   }
 
-  &.size-xl {
-    block-size: min(#{overlay.drawer-block("xl")}, var(--_fui-overlay-safe-block));
+  &.width-xl {
+    block-size: min(
+      #{overlay.drawer-block("xl")},
+      var(
+        --_fui-overlay-safe-block,
+        calc(100dvh - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+      )
+    );
   }
 
-  &.size-full {
-    block-size: var(--_fui-overlay-safe-block);
+  &.width-full {
+    block-size: var(
+      --_fui-overlay-safe-block,
+      calc(100dvh - var(--fui-raw-space-32, #{measurements.raw-space(32)}))
+    );
   }
 }
 
@@ -177,14 +252,14 @@
 .title {
   @include overlay.modal-title;
 
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-primary, $fui-text-primary);
 }
 
 .description {
   @include overlay.description;
 
-  margin: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   color: var(--fui-text-secondary, $fui-text-secondary);
 }
 
@@ -198,41 +273,25 @@
 
 .footer {
   @include overlay.footer;
-
-  border-top: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
-  background-color: var(--fui-bg-secondary, $fui-bg-secondary);
 }
 
 .close {
   @include button-reset;
   @include interactive-base;
   @include overlay.close;
-
-  z-index: 1;
-  border-radius: var(--fui-radius-md, $fui-radius-md);
-  color: var(--fui-text-secondary, $fui-text-secondary);
-
-  &:hover {
-    background-color: var(--fui-bg-hover, $fui-bg-hover);
-    color: var(--fui-text-primary, $fui-text-primary);
-  }
-
-  svg {
-    inline-size: action.icon-size("sm");
-    block-size: action.icon-size("sm");
-  }
 }
 
 .popup:has(.close) .header {
   padding-inline-end: calc(
-    var(--fui-overlay-close-inset, var(--fui-raw-space-12, 12px)) + #{action.track("sm")} +
-      var(--fui-overlay-section-gap, var(--fui-raw-space-8, 8px))
+    var(--fui-overlay-close-inset, var(--fui-raw-space-12, #{measurements.raw-space(12)})) +
+      #{action.track("sm")} +
+      var(--fui-overlay-section-gap, var(--fui-raw-space-8, #{measurements.raw-space(8)}))
   );
 }
 
 .swipeArea {
   position: fixed;
-  z-index: var(--fui-overlay-layer-swipe, 49);
+  z-index: var(--fui-overlay-layer-swipe, #{$fui-overlay-layer-swipe});
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/components/Drawer/index.tsx

@@ -13,6 +13,8 @@ import styles from "./Drawer.module.scss";
  * Now backed by Base UI's stable Drawer (v1.3.0) with native swipe gestures.
  * @see https://usefragments.com/components/drawer
  */
+export type DrawerWidth = "sm" | "md" | "lg" | "xl" | "full";
+
 export interface DrawerProps {
   children: React.ReactNode;
   /** Controlled open state */
@@ -40,10 +42,10 @@ export interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement>
   /** Which edge the drawer slides from.
    * @default "right" */
   side?: "left" | "right" | "top" | "bottom";
-  /** Drawer width (for left/right) or height (for top/bottom).
+  /** Drawer width (for left/right) or height (for top/bottom). `full` spans the safe viewport.
    * @default "md"
-   * @see https://usefragments.com/components/drawer#sizes */
-  size?: "sm" | "md" | "lg" | "xl" | "full";
+   * @see https://usefragments.com/components/drawer#widths */
+  width?: DrawerWidth;
   /** Whether to show the backdrop overlay (default: true). Set to false for non-modal bottom panels. */
   backdrop?: boolean;
   /** Whether to autofocus an element on open (default: true) */
@@ -191,7 +193,7 @@ function DrawerTrigger({ children, asChild, className, ...htmlProps }: DrawerTri
 function DrawerContent({
   children,
   side = "right",
-  size = "md",
+  width = "md",
   backdrop = true,
   initialFocus = true,
   viewportProps,
@@ -200,7 +202,7 @@ function DrawerContent({
 }: DrawerContentProps) {
   const registerContentSide = React.useContext(DrawerContentSideContext);
   const { className: viewportClassName, ...viewportHtmlProps } = viewportProps ?? {};
-  const popupClasses = [styles.popup, styles[`side-${side}`], styles[`size-${size}`], className]
+  const popupClasses = [styles.popup, styles[`side-${side}`], styles[`width-${width}`], className]
     .filter(Boolean)
     .join(" ");
 

package/src/components/Editor/Editor.contract.json

@@ -1,17 +1,9 @@
 {
   "$schema": "https://usefragments.com/schemas/contract.v1.json",
   "name": "Editor",
-  "description": "Rich text editor with formatting toolbar, auto-save, and word count",
-  "category": "forms",
-  "tags": [
-    "editor",
-    "rich-text",
-    "markdown",
-    "toolbar",
-    "writing",
-    "blog",
-    "content"
-  ],
+  "description": "Edits rich text with formatting, autosave, and a word count.",
+  "category": "inputs",
+  "tags": ["editor", "rich-text", "markdown", "toolbar", "writing", "blog", "content"],
   "status": "stable",
   "dependencies": [
     {
@@ -123,11 +115,7 @@
       "description": "Editor size preset: \"sm\" (120px), \"md\" (200px), or \"lg\" (400px)",
       "default": "md",
       "required": false,
-      "values": [
-        "sm",
-        "md",
-        "lg"
-      ]
+      "values": ["sm", "md", "lg"]
     },
     "maxLength": {
       "type": "number",
@@ -142,27 +130,26 @@
   },
   "usage": {
     "when": [
-      "Building blog post or article editors",
-      "Need rich text editing with formatting controls",
-      "Content management with auto-save and word count",
-      "Markdown or WYSIWYG editing interfaces"
+      "Blog posts and long-form articles",
+      "Text that needs formatting controls beside it",
+      "Drafts that autosave and report a word count",
+      "Markdown or WYSIWYG authoring"
     ],
     "whenNot": [
-      "Simple single-line text input (use Input)",
-      "Plain multi-line without formatting (use Textarea)",
-      "Chat/AI prompt input (use Prompt)",
+      "Single-line text (use Input)",
+      "Multi-line with no formatting (use Textarea)",
+      "Chat or AI prompt input (use Prompt)",
       "Code editing (use CodeBlock)"
     ],
     "guidelines": [
-      "Use compound pattern for custom toolbar layouts",
-      "Install @tiptap/react, @tiptap/starter-kit, and @tiptap/extension-link for rich text mode",
-      "Falls back to a markdown-aware textarea when TipTap is not installed",
-      "Use onAutoSave for periodic content persistence",
-      "onAutoSave may return a Promise; save status updates after the async save resolves/rejects",
-      "Use size prop (sm/md/lg) to control editor height",
-      "Use maxLength to show character limit with visual warning states",
-      "New formats (headings, blockquote, orderedList, undo, redo) are opt-in via the formats prop",
-      "Use toolbarIcons to swap in icons from any icon package without changing toolbar button labels or accessibility behavior"
+      "Compose Editor.Toolbar and Editor.Content to control toolbar layout",
+      "Rich text needs @tiptap/react, @tiptap/starter-kit, and @tiptap/extension-link",
+      "Without TipTap it falls back to a markdown-aware textarea",
+      "onAutoSave may return a Promise; save status updates once it settles",
+      "size sets the minimum body height: sm 120px, md 200px, lg 400px",
+      "maxLength drives the counter's warning and over-limit states",
+      "Headings, blockquote, orderedList, undo, and redo are opt-in via formats",
+      "toolbarIcons swaps glyphs without changing labels or keyboard behavior"
     ],
     "accessibility": [
       "Toolbar has role=\"toolbar\" with aria-label",
@@ -177,47 +164,47 @@
   "examples": [
     {
       "name": "Default",
-      "description": "Editor with default toolbar and status bar",
+      "description": "Toolbar and status bar you get with no configuration.",
       "code": "<Editor placeholder=\"Start typing your masterpiece here...\" />"
     },
     {
       "name": "With Auto-Save and Publish",
-      "description": "Full compound usage with custom toolbar, auto-save indicator, and publish button",
-      "code": "<Editor\n  placeholder=\"Start typing your masterpiece here...\"\n  onValueChange={(v) => console.log(v)}\n>\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"Text formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n      <Editor.ToolbarButton format=\"strikethrough\" />\n      <Editor.ToolbarButton format=\"link\" />\n      <Editor.ToolbarButton format=\"code\" />\n      <Editor.ToolbarButton format=\"bulletList\" />\n    </Editor.ToolbarGroup>\n    <Editor.ToolbarGroup aria-label=\"Actions\">\n      <Editor.StatusIndicator status=\"saved\" />\n      <Button variant=\"accent\" size=\"sm\">\n        Publish\n      </Button>\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"
+      "description": "Save state sits next to the primary action in the toolbar.",
+      "code": "<Editor\n  placeholder=\"Start typing your masterpiece here...\"\n  onValueChange={(v) => console.log(v)}\n>\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"Text formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n      <Editor.ToolbarButton format=\"strikethrough\" />\n      <Editor.ToolbarButton format=\"link\" />\n      <Editor.ToolbarButton format=\"code\" />\n      <Editor.ToolbarButton format=\"bulletList\" />\n    </Editor.ToolbarGroup>\n    <Editor.ToolbarGroup aria-label=\"Actions\">\n      <Editor.StatusIndicator status=\"saved\" />\n      <Button variant=\"solid\" tone=\"accent\" size=\"sm\">\n        Publish\n      </Button>\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"
     },
     {
-      "name": "Minimal",
-      "description": "Editor with subset of formats",
-      "code": "<Editor\n  placeholder=\"Quick note...\"\n  formats={['bold', 'italic', 'code']}\n/>"
+      "name": "Save Failed",
+      "description": "A failed autosave turns the status text red.",
+      "code": "<Editor defaultValue=\"This draft could not be saved.\">\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"Text formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n    </Editor.ToolbarGroup>\n    <Editor.ToolbarGroup aria-label=\"Status\">\n      <Editor.StatusIndicator status=\"error\" />\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"
     },
     {
       "name": "Disabled",
-      "description": "Non-interactive editor with content",
+      "description": "Dimmed and inert, but the text stays readable.",
       "code": "<Editor\n  defaultValue=\"This content cannot be edited.\"\n  disabled\n/>"
     },
     {
       "name": "Read Only",
-      "description": "Visible content, non-editable",
+      "description": "Text can be selected and copied, but never changed.",
       "code": "<Editor\n  defaultValue=\"This content is read-only. You can select and copy text but cannot modify it.\"\n  readOnly\n/>"
     },
     {
       "name": "Custom Toolbar",
-      "description": "Compound usage with custom toolbar layout and separator",
+      "description": "Separators split the controls into labelled clusters.",
       "code": "<Editor\n  placeholder=\"Write your blog post...\"\n  onValueChange={(v) => console.log(v)}\n>\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"Basic formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n    </Editor.ToolbarGroup>\n    <Editor.Separator />\n    <Editor.ToolbarGroup aria-label=\"Advanced formatting\">\n      <Editor.ToolbarButton format=\"link\" />\n      <Editor.ToolbarButton format=\"code\" />\n      <Editor.ToolbarButton format=\"bulletList\" />\n    </Editor.ToolbarGroup>\n    <Editor.ToolbarGroup aria-label=\"Status\">\n      <Editor.StatusIndicator status=\"saving\" />\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"
     },
     {
       "name": "Full Formatting",
-      "description": "All format options including headings, blockquote, ordered list, undo/redo",
+      "description": "Every opt-in format switched on, at the tallest preset.",
       "code": "<Editor\n  placeholder=\"Write an article...\"\n  size=\"lg\"\n>\n  <Editor.Toolbar>\n    <Editor.ToolbarGroup aria-label=\"History\">\n      <Editor.ToolbarButton format=\"undo\" />\n      <Editor.ToolbarButton format=\"redo\" />\n    </Editor.ToolbarGroup>\n    <Editor.Separator />\n    <Editor.ToolbarGroup aria-label=\"Headings\">\n      <Editor.ToolbarButton format=\"heading1\" />\n      <Editor.ToolbarButton format=\"heading2\" />\n      <Editor.ToolbarButton format=\"heading3\" />\n    </Editor.ToolbarGroup>\n    <Editor.Separator />\n    <Editor.ToolbarGroup aria-label=\"Text formatting\">\n      <Editor.ToolbarButton format=\"bold\" />\n      <Editor.ToolbarButton format=\"italic\" />\n      <Editor.ToolbarButton format=\"strikethrough\" />\n      <Editor.ToolbarButton format=\"code\" />\n    </Editor.ToolbarGroup>\n    <Editor.Separator />\n    <Editor.ToolbarGroup aria-label=\"Block formatting\">\n      <Editor.ToolbarButton format=\"bulletList\" />\n      <Editor.ToolbarButton format=\"orderedList\" />\n      <Editor.ToolbarButton format=\"blockquote\" />\n      <Editor.ToolbarButton format=\"link\" />\n    </Editor.ToolbarGroup>\n  </Editor.Toolbar>\n  <Editor.Content />\n  <Editor.StatusBar showWordCount showCharCount />\n</Editor>"
     },
     {
       "name": "With Character Limit",
-      "description": "Editor with maxLength showing character count indicator with warning and error states",
+      "description": "The counter warns near 280 characters and turns red past it.",
       "code": "<Editor\n  placeholder=\"Write a tweet-sized message...\"\n  maxLength={280}\n  size=\"sm\"\n  formats={['bold', 'italic', 'link']}\n/>"
     },
     {
       "name": "Small Size",
-      "description": "Compact editor with sm size preset (120px min-height)",
+      "description": "A 120px body with a trimmed toolbar, for tight spaces.",
       "code": "<Editor\n  placeholder=\"Quick note...\"\n  size=\"sm\"\n  formats={['bold', 'italic', 'code']}\n/>"
     }
   ],
@@ -253,11 +240,7 @@
       "maxLength: number - character limit with visual indicator",
       "toolbarIcons: Partial<Record<EditorFormat, ReactNode | (state) => ReactNode>> - custom toolbar icons"
     ],
-    "a11yRules": [
-      "A11Y_TOOLBAR_ROLE",
-      "A11Y_BUTTON_LABEL",
-      "A11Y_LIVE_REGION"
-    ]
+    "a11yRules": ["A11Y_TOOLBAR_ROLE", "A11Y_BUTTON_LABEL", "A11Y_LIVE_REGION"]
   },
   "ai": {
     "compositionPattern": "compound",