@cueplusplus/ui 0.2.0 → 0.5.0

package/manifest/components/swap-label.json

@@ -0,0 +1,71 @@
+{
+  "name": "SwapLabel",
+  "slug": "swap-label",
+  "group": "elements",
+  "importPath": "@cueplusplus/ui/elements",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "Two labels stacked in one cell, with the box's width animating between them.\n\nA `ResizeObserver` measures the layer that is showing, because the crossfade\nis only half the effect — a \"Searching…\" that becomes \"Searched\" has to make\nthe row shrink, and neither layer can size the box while both are in it.\n\nThe layer that is leaving is `aria-hidden`, so the outgoing text is neither\nannounced nor copied into a selection.",
+  "props": [
+    {
+      "name": "active",
+      "type": "0 | 1",
+      "required": true,
+      "defaultValue": null,
+      "description": "Which of the two children is showing."
+    },
+    {
+      "name": "children",
+      "type": "[ReactNode, ReactNode]",
+      "required": true,
+      "defaultValue": null,
+      "description": "Exactly two labels: the resting one and the active one."
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes for the measured box."
+    }
+  ],
+  "typeReferences": [],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-fg",
+    "--cue-accent-hover",
+    "--cue-border",
+    "--cue-border-overlay",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-stream",
+    "--cue-sunken",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-text-label"
+  ],
+  "summary": "Two labels stacked in one cell, with the box's width animating between them.",
+  "examples": [],
+  "status": "todo-docs",
+  "url": "/docs/components/swap-label",
+  "mdUrl": "/docs/components/swap-label.md",
+  "jsonUrl": "/r/components/swap-label.json",
+  "specimens": [
+    {
+      "title": "SwapLabel",
+      "group": "elements",
+      "components": [
+        "SwapLabel"
+      ],
+      "code": "<Specimens>\n  <Specimen label={swapped === 0 ? \"active 0\" : \"active 1\"}>\n    <span className=\"flex items-center gap-(--cue-space-3)\">\n      <SwapLabel active={swapped}>\n        <ShimmerLabel className=\"relative inline-block leading-none\">\n          Patching universe 3\n        </ShimmerLabel>\n        <>Patched</>\n      </SwapLabel>\n      <Button size=\"sm\" onClick={() => setSwapped((current) => (current === 0 ? 1 : 0))}>\n        Swap\n      </Button>\n    </span>\n  </Specimen>\n</Specimens>",
+      "note": "Two labels in one cell, crossfading, with the box measuring itself to whichever is showing. The width is half the effect: 'Patching universe 3' becoming 'Patched' has to make the row shrink, and the outgoing layer is aria-hidden so it is neither announced nor copied.",
+      "interaction": "swap it and watch the box, not the text. Everything after the label on that row moves with it."
+    }
+  ],
+  "todo": true
+}

package/manifest/components/switch.json

@@ -0,0 +1,87 @@
+{
+  "name": "Switch",
+  "slug": "switch",
+  "group": "forms",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "A binary on/off control — `role=\"switch\"`, not a checkbox.\n\nThe distinction matters to assistive tech: a switch takes effect immediately,\na checkbox is a value you submit later. Use this for \"live\" state (blackout,\nmute, follow) and {@link Checkbox } for form values.\n\nShips in three sizes down to a 22×12 track, because a dense console cannot\nspare the height a stock switch demands. The thumb slides on a transform and\nstills entirely under `prefers-reduced-motion`.",
+  "props": [
+    {
+      "name": "label",
+      "type": "ReactNode",
+      "required": false,
+      "defaultValue": null,
+      "description": "Inline label rendered beside the track and wrapped with it in a `<label>`,\nso the text is both the accessible name and part of the hit target."
+    },
+    {
+      "name": "className",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "description": "Extra classes, merged over the track defaults."
+    },
+    {
+      "name": "size",
+      "type": "\"sm\" | \"md\" | \"lg\"",
+      "required": false,
+      "defaultValue": "md",
+      "description": "Track size. Defaults to `\"md\"` (28×14). `sm` exists because a console packs\nswitches into 20px rows where a stock 44px switch simply does not fit."
+    }
+  ],
+  "typeReferences": [
+    "Omit<BaseSwitch.Root.Props, \"className\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-accent-fg",
+    "--cue-border",
+    "--cue-border-strong",
+    "--cue-danger",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-space-3",
+    "--cue-surface-3",
+    "--cue-text-ui"
+  ],
+  "summary": "A binary control that takes effect the moment it moves.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Switch label=\"Blackout\" checked={blackout} onCheckedChange={setBlackout} />\n<Switch aria-label=\"Mute channel\" size=\"sm\" />",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/switch",
+  "mdUrl": "/docs/components/switch.md",
+  "jsonUrl": "/r/components/switch.json",
+  "whenToUse": [
+    "Live state: blackout, mute, follow, a feature flag that applies at once.",
+    "Dense rows. The `sm` track is 22x12, which fits a status bar without crowding it."
+  ],
+  "whenNotToUse": [
+    "A value a form submits later. Use `Checkbox`, which is what assistive tech expects there.",
+    "One choice out of several. Use `RadioGroup` or `SegmentedControl`."
+  ],
+  "commonMistakes": [
+    "Putting a Save button next to it. A switch has already taken effect.",
+    "Shipping it with no label and no `aria-label`, which leaves an unnamed toggle."
+  ],
+  "specimens": [
+    {
+      "title": "Switch",
+      "group": "forms",
+      "components": [
+        "Switch"
+      ],
+      "code": "<Specimens>\n  {([\"sm\", \"md\", \"lg\"] as const).map((size) => (\n    <Specimen key={size} label={size}>\n      <Switch size={size} label=\"Blackout\" defaultChecked />\n    </Specimen>\n  ))}\n  <Specimen label=\"off\">\n    <Switch label=\"Follow\" />\n  </Specimen>\n  <Specimen label=\"disabled\">\n    <Switch label=\"Locked\" disabled defaultChecked />\n  </Specimen>\n  <Specimen label=\"no label\">\n    <Switch aria-label=\"Highlight\" />\n  </Specimen>\n</Specimens>",
+      "note": "Three sizes, because a console row cannot afford the marketing-page switch.",
+      "interaction": "the whole label is the hit target; Space toggles."
+    }
+  ]
+}

package/manifest/components/table-scroll-region.json

@@ -0,0 +1,69 @@
+{
+  "name": "TableScrollRegion",
+  "slug": "table-scroll-region",
+  "group": "instruments",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "A named horizontal viewport for a table wider than its container.\n\nThe region is independently keyboard-focusable so keyboard users can reach\nnative horizontal scrolling. It adds no table semantics of its own; place a\ncompound {@link Table} inside it and keep the table's caption.",
+  "props": [
+    {
+      "name": "aria-label",
+      "type": "string",
+      "required": true,
+      "defaultValue": null,
+      "description": "Accessible name announced for the keyboard-focusable scrolling region."
+    }
+  ],
+  "typeReferences": [
+    "Omit<React.ComponentPropsWithoutRef<\"div\">, \"aria-label\" | \"role\" | \"tabIndex\">"
+  ],
+  "subcomponents": [],
+  "parts": [],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-pad-row-x",
+    "--cue-pad-row-y",
+    "--cue-space-3",
+    "--cue-surface-1",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "A named keyboard-focusable horizontal viewport for wide semantic tables.",
+  "examples": [],
+  "status": "stable",
+  "url": "/docs/components/table-scroll-region",
+  "mdUrl": "/docs/components/table-scroll-region.md",
+  "jsonUrl": "/r/components/table-scroll-region.json",
+  "whenToUse": [
+    "A semantic table can be wider than its panel or mobile viewport.",
+    "Keyboard users need a reachable region for native horizontal scrolling."
+  ],
+  "whenNotToUse": [
+    "The table already fits its container. Render `Table.Root` directly.",
+    "Non-tabular content. Use `ScrollArea` for a general scrolling viewport."
+  ],
+  "commonMistakes": [
+    "Omitting `aria-label`; the scrolling region requires its own accessible name.",
+    "Using the region instead of `Table.Caption`; the region and table each keep their own name."
+  ],
+  "specimens": [
+    {
+      "title": "Table",
+      "group": "instruments",
+      "components": [
+        "Table",
+        "TableScrollRegion"
+      ],
+      "code": "<Panel className=\"w-full\">\n  <TableScrollRegion aria-label=\"Cue list table\">\n    <Table.Root>\n      <Table.Caption>Cue list</Table.Caption>\n      <Table.Header>\n        <Table.Row>\n          <Table.Head numeric>#</Table.Head>\n          <Table.Head>Label</Table.Head>\n          <Table.Head numeric>Fade</Table.Head>\n          <Table.Head>Follow</Table.Head>\n          <Table.Head numeric>Level</Table.Head>\n        </Table.Row>\n      </Table.Header>\n      <Table.Body>\n        {CUES.map((cue) => (\n          <Table.Row key={cue.id}>\n            <Table.Cell numeric>{cue.id}</Table.Cell>\n            <Table.Cell>{cue.label}</Table.Cell>\n            <Table.Cell numeric>{cue.time}</Table.Cell>\n            <Table.Cell>{cue.follow}</Table.Cell>\n            <Table.Cell numeric>{cue.level}%</Table.Cell>\n          </Table.Row>\n        ))}\n      </Table.Body>\n    </Table.Root>\n  </TableScrollRegion>\n</Panel>",
+      "note": "The canonical console table inside its named horizontal scroll region: hairline rows, mono headers, and `numeric` cells that are right-aligned and tabular.",
+      "interaction": "the scroll region is keyboard-focusable. Sorting, filtering and paging come from the DataTable recipe below."
+    }
+  ]
+}

package/manifest/components/table.json

@@ -0,0 +1,155 @@
+{
+  "name": "Table",
+  "slug": "table",
+  "group": "instruments",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": false,
+  "description": "The canonical console table: hairlines, mono figures, no zebra striping.\n\nSemantic `<table>` markup throughout — a grid of divs loses row/column\nannouncement, and a console table is exactly the place a screen reader user\nneeds it. Zebra rows are deliberately absent: at console density the stripes\nare thicker than the data.\n\nStatic markup — no `\"use client\"`. Compose it with `Panel` for the rim.\nUse {@link TableScrollRegion} only when the table can exceed its container.",
+  "props": [],
+  "typeReferences": [],
+  "subcomponents": [
+    "Root",
+    "Header",
+    "Body",
+    "Row",
+    "Head",
+    "Cell",
+    "Caption"
+  ],
+  "parts": [
+    {
+      "name": "Root",
+      "usage": "Table.Root",
+      "description": "The table frame. Owns the type, the collapse and the numeric alignment rule.\n\n`data-numeric` is the contract, not a prop: the alignment and\n`tabular-nums` live in one descendant selector here, so a hand-written\n`<td data-numeric>` inside a data-driven body lines up exactly like a\n`<Table.Cell numeric>`. Figures that do not share a column width are\nunreadable as a column, which is the whole point of a table.",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"table\">"
+      ]
+    },
+    {
+      "name": "Header",
+      "usage": "Table.Header",
+      "description": "The header band. Sticky-able by the caller; sized by the row padding tokens.",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"tbody\">"
+      ]
+    },
+    {
+      "name": "Body",
+      "usage": "Table.Body",
+      "description": "The data band.",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"tbody\">"
+      ]
+    },
+    {
+      "name": "Row",
+      "usage": "Table.Row",
+      "description": "One row, separated by a hairline underneath — dropped on the last row so the\ntable never draws a rule against the panel rim it sits in. In a `<thead>` the\n\"last row\" is the header row itself, so the header's own bottom border (on\nthe cells) is the only rule there and the two can never stack into 2px.",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"tr\">"
+      ]
+    },
+    {
+      "name": "Head",
+      "usage": "Table.Head",
+      "description": "A column heading: the same mono uppercase label as `SectionHeader` and\n`Eyebrow`, on the raised surface so the band reads as chrome rather than as\nthe first row of data.",
+      "props": [
+        {
+          "name": "numeric",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Right-align this column and set it in tabular figures."
+        }
+      ],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"th\">"
+      ]
+    },
+    {
+      "name": "Cell",
+      "usage": "Table.Cell",
+      "description": "One data cell, padded on the density row tokens like every other list row.",
+      "props": [
+        {
+          "name": "numeric",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Right-align this cell and set it in tabular figures."
+        }
+      ],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"td\">"
+      ]
+    },
+    {
+      "name": "Caption",
+      "usage": "Table.Caption",
+      "description": "The table's name. Sits under the data (`caption-bottom`) because in a console\nthe heading above a table is a `SectionHeader` or a `PanelHeader`; a caption\nhere is the footnote — the source, the window, the count.",
+      "props": [],
+      "typeReferences": [
+        "React.ComponentPropsWithoutRef<\"caption\">"
+      ]
+    }
+  ],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-fg",
+    "--cue-fg-subtle",
+    "--cue-font-mono",
+    "--cue-pad-row-x",
+    "--cue-pad-row-y",
+    "--cue-space-3",
+    "--cue-surface-1",
+    "--cue-text-label",
+    "--cue-text-ui"
+  ],
+  "summary": "The semantic table: mono uppercase headers, hairline rows, tabular numerals.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Table.Root>\n  <Table.Header>\n    <Table.Row>\n      <Table.Head>Fixture</Table.Head>\n      <Table.Head numeric>Address</Table.Head>\n    </Table.Row>\n  </Table.Header>\n  <Table.Body>\n    <Table.Row>\n      <Table.Cell>Par 64</Table.Cell>\n      <Table.Cell numeric>001</Table.Cell>\n    </Table.Row>\n  </Table.Body>\n</Table.Root>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/table",
+  "mdUrl": "/docs/components/table.md",
+  "jsonUrl": "/r/components/table.json",
+  "whenToUse": [
+    "Rows that share columns and are meant to be compared down a column.",
+    "Numeric cells. Mark them `data-numeric` so the figures line up.",
+    "Wrap a wide table in `TableScrollRegion`; render the table directly when it fits."
+  ],
+  "whenNotToUse": [
+    "One object's fields. Use `DescriptionList`.",
+    "Layout. A table is for data that has columns.",
+    "Sorting, filtering and paging over thousands of rows on its own. Compose it with `useCueTable` from `@cueplusplus/ui/instruments/data-table`."
+  ],
+  "commonMistakes": [
+    "Leaving out `Table.Caption`, which is what names the table for a screen reader.",
+    "Wrapping cells in a `Row`. The table has its own row part."
+  ],
+  "specimens": [
+    {
+      "title": "Table",
+      "group": "instruments",
+      "components": [
+        "Table",
+        "TableScrollRegion"
+      ],
+      "code": "<Panel className=\"w-full\">\n  <TableScrollRegion aria-label=\"Cue list table\">\n    <Table.Root>\n      <Table.Caption>Cue list</Table.Caption>\n      <Table.Header>\n        <Table.Row>\n          <Table.Head numeric>#</Table.Head>\n          <Table.Head>Label</Table.Head>\n          <Table.Head numeric>Fade</Table.Head>\n          <Table.Head>Follow</Table.Head>\n          <Table.Head numeric>Level</Table.Head>\n        </Table.Row>\n      </Table.Header>\n      <Table.Body>\n        {CUES.map((cue) => (\n          <Table.Row key={cue.id}>\n            <Table.Cell numeric>{cue.id}</Table.Cell>\n            <Table.Cell>{cue.label}</Table.Cell>\n            <Table.Cell numeric>{cue.time}</Table.Cell>\n            <Table.Cell>{cue.follow}</Table.Cell>\n            <Table.Cell numeric>{cue.level}%</Table.Cell>\n          </Table.Row>\n        ))}\n      </Table.Body>\n    </Table.Root>\n  </TableScrollRegion>\n</Panel>",
+      "note": "The canonical console table inside its named horizontal scroll region: hairline rows, mono headers, and `numeric` cells that are right-aligned and tabular.",
+      "interaction": "the scroll region is keyboard-focusable. Sorting, filtering and paging come from the DataTable recipe below."
+    }
+  ]
+}

package/manifest/components/tabs.json

@@ -0,0 +1,145 @@
+{
+  "name": "Tabs",
+  "slug": "tabs",
+  "group": "chrome",
+  "importPath": "@cueplusplus/ui",
+  "peerDependencies": [],
+  "clientOnly": true,
+  "description": "One surface, several views.\n\nWraps Base UI's `Tabs`, so roving focus, `aria-controls` wiring and\nactivation semantics are the primitive's. This layer adds the console skin:\na hairline strip, mono labels and an accent underline for the active tab.\n\nReach for {@link ScrollableTabsList} instead of `Tabs.List` when the number of\ntabs is data-driven and can outgrow its container.",
+  "props": [],
+  "typeReferences": [],
+  "subcomponents": [
+    "Root",
+    "List",
+    "Tab",
+    "Panel"
+  ],
+  "parts": [
+    {
+      "name": "Root",
+      "usage": "Tabs.Root",
+      "description": "Groups a tab list with its panels and owns the selected value.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the tabs frame."
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseTabs.Root.Props, \"className\">"
+      ]
+    },
+    {
+      "name": "List",
+      "usage": "Tabs.List",
+      "description": "The strip of tabs, hung off a hairline.\n\nThe rule belongs to the list rather than to the active tab so it spans the\nfull width even when the tabs do not — which is what makes the selected tab's\naccent underline read as a mark *on* a rule rather than as a floating dash.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the strip."
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseTabs.List.Props, \"className\">"
+      ]
+    },
+    {
+      "name": "Tab",
+      "usage": "Tabs.Tab",
+      "description": "One tab. Selected state is an accent underline sitting on the list's rule —\nnever a filled pill, which at console density turns a row of four tabs into a\nrow of four buttons and loses the \"one surface, several views\" reading.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the tab button."
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseTabs.Tab.Props, \"className\">"
+      ]
+    },
+    {
+      "name": "Panel",
+      "usage": "Tabs.Panel",
+      "description": "The body shown for the matching tab. Focusable, so keyboard users land in it.",
+      "props": [
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "defaultValue": null,
+          "description": "Extra classes for the panel."
+        }
+      ],
+      "typeReferences": [
+        "Omit<BaseTabs.Panel.Props, \"className\">"
+      ]
+    }
+  ],
+  "variants": {},
+  "defaultVariants": {},
+  "tokensUsed": [
+    "--cue-accent",
+    "--cue-border",
+    "--cue-chrome-toolbar",
+    "--cue-control-md",
+    "--cue-edge-fade",
+    "--cue-fg",
+    "--cue-fg-muted",
+    "--cue-font-mono",
+    "--cue-icon-sm",
+    "--cue-radius-control",
+    "--cue-space-1",
+    "--cue-space-2",
+    "--cue-space-4",
+    "--cue-space-5",
+    "--cue-surface-1",
+    "--cue-surface-2",
+    "--cue-text-ui"
+  ],
+  "summary": "One surface, several views, with the roving focus wired for you.",
+  "examples": [
+    {
+      "title": "Usage",
+      "code": "<Tabs.Root defaultValue=\"patch\">\n  <Tabs.List>\n    <Tabs.Tab value=\"patch\">Patch</Tabs.Tab>\n    <Tabs.Tab value=\"cues\">Cues</Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"patch\">…</Tabs.Panel>\n  <Tabs.Panel value=\"cues\">…</Tabs.Panel>\n</Tabs.Root>",
+      "language": "tsx"
+    }
+  ],
+  "status": "stable",
+  "url": "/docs/components/tabs",
+  "mdUrl": "/docs/components/tabs.md",
+  "jsonUrl": "/r/components/tabs.json",
+  "whenToUse": [
+    "Two to seven views of the same object, where only one is needed at a time.",
+    "A tab strip that may outgrow its container. Use `ScrollableTabsList`, which fades its edges and scrolls the active tab into view."
+  ],
+  "whenNotToUse": [
+    "Steps in a sequence the user works through. Use `Stepper`.",
+    "Sections a reader may want open at once. Use `Accordion`.",
+    "Navigation between pages. Use the app shell: `Sidebar` or `NavigationMenu`."
+  ],
+  "commonMistakes": [
+    "Hiding a panel with CSS instead of letting `Tabs.Panel` unmount it, which leaves the hidden content in the tab order.",
+    "Filling the selected tab with a solid block. The selected state here is the accent underline sitting on the list's rule."
+  ],
+  "specimens": [
+    {
+      "title": "Tabs",
+      "group": "chrome",
+      "components": [
+        "Tabs"
+      ],
+      "code": "<Tabs.Root value={tab} onValueChange={setTab} className=\"w-full max-w-[36rem]\">\n  <Tabs.List>\n    <Tabs.Tab value=\"patch\">Patch</Tabs.Tab>\n    <Tabs.Tab value=\"cues\">Cues</Tabs.Tab>\n    <Tabs.Tab value=\"setup\" disabled>\n      Setup\n    </Tabs.Tab>\n  </Tabs.List>\n  <Tabs.Panel value=\"patch\">48 fixtures across 4 universes.</Tabs.Panel>\n  <Tabs.Panel value=\"cues\">12 cues, last edited 4 minutes ago.</Tabs.Panel>\n  <Tabs.Panel value=\"setup\">Setup.</Tabs.Panel>\n</Tabs.Root>",
+      "note": "Selection is an underline, never a filled block.",
+      "interaction": "hover lifts the inactive label; arrow keys move the active tab, and the panel follows."
+    }
+  ]
+}