@kanzo-tech/ui 0.0.1-alpha

package/dist/composites/Questionnaire.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Questionnaire.js","sources":["../../src/composites/Questionnaire.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport { useFieldsetContext, type UseFieldsetContext } from \"@ark-ui/react/fieldset\";\nimport { useSteps, type UseStepsReturn } from \"@ark-ui/react/steps\";\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn.js\";\nimport { Button, type ButtonProps } from \"../simples/button.js\";\nimport { Checkbox, CheckboxGroup } from \"../simples/checkbox.js\";\nimport {\n  FieldLegend,\n  FieldSet,\n  FieldSetError,\n  FieldSetHelper,\n  FieldTitle,\n} from \"../simples/field.js\";\nimport { Input } from \"../simples/input.js\";\nimport { ItemContent, ItemDescription } from \"../simples/item.js\";\nimport { Kbd } from \"../simples/kbd.js\";\nimport {\n  RadioGroup,\n  RadioGroupCard,\n  RadioGroupIndicator,\n  RadioGroupText,\n} from \"../simples/radio-group.js\";\nimport { Textarea } from \"../simples/textarea.js\";\n\n/**\n * Questionnaire — one question at a time, with progress, validation and navigation.\n *\n *   <Questionnaire onSubmit={…}>\n *     <QuestionnaireProgress />\n *     <QuestionnaireItem name=\"…\" required>\n *       <QuestionnaireTitle /> <QuestionnaireDescription />\n *       <QuestionnaireChoices>\n *         <QuestionnaireChoice description=\"…\" value=\"…\">…</QuestionnaireChoice>…\n *       </QuestionnaireChoices>\n *       <QuestionnaireError />\n *     </QuestionnaireItem>\n *     <QuestionnaireActions>\n *       <QuestionnairePrevious /> <QuestionnaireSkip /> <QuestionnaireNext /> <QuestionnaireSubmit />\n *     </QuestionnaireActions>\n *   </Questionnaire>\n *\n * **The root owns the order, the active question, the answers and the navigation; the parent owns\n * dismissal, persistence and branching.** Which is why there is no `open`, no storage and no\n * `onDismiss` here: a questionnaire that decided when it appears could not be put in a dialog, a\n * sidebar and a page, and every product wants it in a different one.\n *\n * **No navigation state machine is written here.** Ark's `useSteps` already owns the step index,\n * `hasNextStep` / `hasPrevStep`, `percent`, and — the part that is easy to miss — the *guards*:\n * `isStepValid` blocks `STEP.NEXT` and fires `onStepInvalid`, and `isStepSkippable` overrides it.\n * A required question blocking Next and a skippable one not blocking are therefore two callbacks,\n * not two branches. None of Ark's Steps *parts* are used: `getContentProps` declares\n * `role=\"tabpanel\"` and points `aria-labelledby` at a trigger, and this renders no tablist for\n * either to belong to.\n *\n * **A question is a `FieldSet`.** That is what carries the ARIA rather than anything hand-rolled:\n * Ark's fieldset names the group from its own legend, describes it from the helper and error text,\n * and marks the error `aria-live=\"polite\"` — so `QuestionnaireError` announces itself on the group\n * that failed with no `role=\"alert\"` of ours anywhere.\n */\n\nexport type QuestionnaireAnswer = string | string[];\nexport type QuestionnaireAnswers = Record<string, QuestionnaireAnswer>;\n\n/** What the root reads off an item's own props to steer the machine. */\nexport interface QuestionnaireQuestion {\n  multiple: boolean;\n  name: string;\n  required: boolean;\n  skippable: boolean;\n}\n\ninterface QuestionnaireContextValue {\n  answers: QuestionnaireAnswers;\n  /** The index whose Next was refused, or `null`. One at a time: only one question is on screen. */\n  blocked: number | null;\n  indexOf: (name: string) => number;\n  questions: QuestionnaireQuestion[];\n  setAnswer: (name: string, answer: QuestionnaireAnswer) => void;\n  shortcuts: boolean;\n  steps: UseStepsReturn;\n}\n\ninterface QuestionnaireItemContextValue {\n  current: boolean;\n  index: number;\n  /** This item's own declaration — what a part of the caller's can read without the scan. */\n  question: QuestionnaireQuestion;\n  /** The key printed on a choice's `Kbd`, or `undefined` when shortcuts are off. */\n  shortcutOf: (value: string) => string | undefined;\n}\n\nconst QuestionnaireContext = React.createContext<QuestionnaireContextValue | null>(null);\nconst QuestionnaireItemContext = React.createContext<QuestionnaireItemContextValue | null>(null);\n\nexport function useQuestionnaire(): QuestionnaireContextValue {\n  const context = React.useContext(QuestionnaireContext);\n  if (!context) throw new Error(\"useQuestionnaire must be used inside <Questionnaire>\");\n  return context;\n}\n\nexport function useQuestionnaireItem(): QuestionnaireItemContextValue {\n  const context = React.useContext(QuestionnaireItemContext);\n  if (!context) throw new Error(\"This part must be used inside <QuestionnaireItem>\");\n  return context;\n}\n\n/**\n * Every descendant of `node` rendered as `type`, in source order.\n *\n * The root needs the ordered questions and an item needs its ordered choices *before* either\n * renders — the machine is constructed with a `count` and a validity callback keyed by index, and a\n * registration effect would hand it a count of zero on the first pass (`percent` is `step / count`,\n * so that is `NaN` on screen). Reading the elements is synchronous and cannot disagree with what is\n * rendered a moment later.\n *\n * It descends through arrays, fragments and any element's children, which covers a list built with\n * `.map()` and a question wrapped in a `<div>`. What it cannot see through is a *component* of the\n * caller's that returns items, because its children do not exist until it renders.\n */\nfunction collect(node: React.ReactNode, type: React.ElementType): React.ReactElement[] {\n  const found: React.ReactElement[] = [];\n  const walk = (current: React.ReactNode) => {\n    React.Children.forEach(current, (child) => {\n      if (!React.isValidElement(child)) return;\n      if (child.type === type) {\n        found.push(child);\n        return;\n      }\n      walk((child.props as { children?: React.ReactNode }).children);\n    });\n  };\n  walk(node);\n  return found;\n}\n\nfunction questionsOf(children: React.ReactNode): QuestionnaireQuestion[] {\n  return collect(children, QuestionnaireItem).map((item) => {\n    const props = item.props as QuestionnaireItemProps;\n    return {\n      multiple: props.multiple === true,\n      name: props.name,\n      required: props.required === true,\n      skippable: props.skippable === true,\n    };\n  });\n}\n\n/**\n * Whether a question lets navigation past it: unasked-for, or answered with a non-blank string or a\n * non-empty selection.\n */\nfunction answered(question: QuestionnaireQuestion | undefined, answers: QuestionnaireAnswers): boolean {\n  if (!question?.required) return true;\n  const answer = answers[question.name];\n  return Array.isArray(answer) ? answer.length > 0 : (answer ?? \"\").trim().length > 0;\n}\n\nexport interface QuestionnaireProps\n  extends Omit<React.ComponentProps<typeof ark.form>, \"onSubmit\"> {\n  /** Answers to start from — a resumed session, or a question already decided elsewhere. */\n  defaultAnswers?: QuestionnaireAnswers;\n  /** Which question to open on. Persistence is the parent's, so resuming is this plus the answers. */\n  defaultStep?: number;\n  onAnswersChange?: (answers: QuestionnaireAnswers) => void;\n  onStepChange?: (details: { step: number }) => void;\n  /** Called with the whole payload when the last question is submitted and passes validation. */\n  onSubmit?: (answers: QuestionnaireAnswers) => void;\n  /**\n   * Answer the visible question from the keyboard: `1`–`9`, by the choice's position, printed on a\n   * `Kbd` beside it so the key is visible rather than folklore.\n   *\n   * **Opt-in — there is no default.** This registers a `window` keydown listener on bare, unmodified\n   * keys, and a design system must not claim those in its host's keymap without being asked. Typing\n   * in a text control is ignored; a focused radio or checkbox is not, which is the case that makes\n   * the difference (both are `<input>` elements, and treating them as typing kills the shortcuts the\n   * moment somebody clicks an option).\n   */\n  shortcuts?: boolean;\n}\n\nexport function Questionnaire(props: QuestionnaireProps) {\n  const {\n    children,\n    className,\n    defaultAnswers,\n    defaultStep = 0,\n    onAnswersChange,\n    onStepChange,\n    onSubmit,\n    shortcuts = false,\n    slot,\n    ...rest\n  } = props;\n\n  const [answers, setAnswers] = React.useState<QuestionnaireAnswers>(defaultAnswers ?? {});\n  const [blocked, setBlocked] = React.useState<number | null>(null);\n  const questions = questionsOf(children);\n\n  const steps = useSteps({\n    // `|| 1`: zag divides by `count` for `percent`, so an empty questionnaire would paint `NaN%`.\n    count: questions.length || 1,\n    defaultStep,\n    isStepSkippable: (index) => questions[index]?.skippable === true,\n    isStepValid: (index) => answered(questions[index], answers),\n    onStepChange: (details) => {\n      setBlocked(null);\n      onStepChange?.(details);\n    },\n    onStepInvalid: (details) => setBlocked(details.step),\n  });\n\n  const setAnswer = (name: string, answer: QuestionnaireAnswer) => {\n    const next = { ...answers, [name]: answer };\n    setBlocked(null);\n    setAnswers(next);\n    onAnswersChange?.(next);\n  };\n\n  // The machine has no \"complete\" event to send, so the last question's guard is spelled out —\n  // from the machine's own two accessors, so the POLICY still lives in one place. Sending\n  // `STEP.NEXT` instead would leave the form on a step past its last question with every item\n  // hidden, which is a state a parent that keeps the form mounted has to undo.\n  const submit = () => {\n    const index = steps.value;\n    if (!steps.isStepSkippable(index) && !steps.isStepValid(index)) {\n      setBlocked(index);\n      return;\n    }\n    onSubmit?.(answers);\n  };\n\n  const context: QuestionnaireContextValue = {\n    answers,\n    blocked,\n    indexOf: (name) => questions.findIndex((question) => question.name === name),\n    questions,\n    setAnswer,\n    shortcuts,\n    steps,\n  };\n\n  return (\n    <QuestionnaireContext.Provider value={context}>\n      <ark.form\n        className={cn(\"flex w-full min-w-0 flex-col gap-4\", className)}\n        noValidate\n        onSubmit={(event) => {\n          event.preventDefault();\n          submit();\n        }}\n        {...rest}\n        data-slot={slot ?? \"questionnaire\"}\n      >\n        {children}\n      </ark.form>\n    </QuestionnaireContext.Provider>\n  );\n}\n\n/**\n * How far along we are, as a sentence rather than a bar: *Question 2 of 4*.\n *\n * **ARIA contract.** `role=\"progressbar\"` with `aria-valuemin` / `aria-valuenow` / `aria-valuemax`\n * counting questions, not percent, and `aria-valuetext` carrying the same sentence the eye reads;\n * `aria-live=\"polite\"` announces the move. `progressbar` is a leaf role with no keyboard contract,\n * so nothing is promised here that is not delivered.\n *\n * Ark's `Progress` is not used, and that is not an oversight: zag puts `role=\"progressbar\"` on the\n * *track*, so a progress with no painted track has no role at all. The machine can only be kept by\n * painting the bar the reference does not have.\n *\n * Children override the sentence, which is how it is translated — `useQuestionnaire()` carries the\n * numbers.\n */\nexport const QuestionnaireProgress = (props: React.ComponentProps<typeof ark.div>) => {\n  const { children, className, slot, ...rest } = props;\n  const { steps } = useQuestionnaire();\n\n  const position = steps.value + 1;\n  const reading = `Question ${position} of ${steps.count}`;\n\n  return (\n    <ark.div\n      aria-live=\"polite\"\n      aria-valuemax={steps.count}\n      aria-valuemin={1}\n      aria-valuenow={position}\n      aria-valuetext={reading}\n      // `min-w-[14ch]` and `min-h-[1lh]` reserve the line so the block below it does not shift as\n      // the reading widens or while a translation is absent.\n      className={cn(\n        \"min-h-[1lh] w-fit min-w-[14ch]\",\n        \"font-medium text-muted-foreground text-xs tabular-nums\",\n        className,\n      )}\n      role=\"progressbar\"\n      {...rest}\n      data-slot={slot ?? \"questionnaire-progress\"}\n    >\n      {children ?? reading}\n    </ark.div>\n  );\n};\n\nexport interface QuestionnaireItemProps extends React.ComponentProps<typeof FieldSet> {\n  /** Accumulate several answers instead of one — a `CheckboxGroup` rather than a `RadioGroup`. */\n  multiple?: boolean;\n  /** The key this question's answer is filed under. Unique within the questionnaire. */\n  name: string;\n  /** Refuse Next until it is answered. */\n  required?: boolean;\n  /** Offer a Skip, and let Next through unanswered. Overrides `required`, the way Ark's guard does. */\n  skippable?: boolean;\n}\n\nexport function QuestionnaireItem(props: QuestionnaireItemProps) {\n  const { children, className, multiple, name, required, skippable, slot, ...rest } = props;\n  const { answers, blocked, indexOf, setAnswer, shortcuts, steps } = useQuestionnaire();\n\n  const index = indexOf(name);\n  const current = index === steps.value;\n  const question: QuestionnaireQuestion = {\n    multiple: multiple === true,\n    name,\n    required: required === true,\n    skippable: skippable === true,\n  };\n  const values = choiceValues(children);\n\n  // No dependency array on purpose: the handler reads the answers and the choice list of THIS\n  // render, and a listener held across an answer would toggle against a stale array. One\n  // add/remove per render is cheaper than the ref dance that would avoid it.\n  React.useEffect(() => {\n    if (!current || !shortcuts || values.length === 0) return;\n\n    const onKey = (event: KeyboardEvent) => {\n      if (event.metaKey || event.ctrlKey || event.altKey) return;\n      const active = document.activeElement;\n      // A radio and a checkbox are `<input>` too, and Ark keeps focus on the hidden one — so\n      // \"focus is in an input\" would switch the shortcuts off as soon as a choice was clicked.\n      const typing =\n        active instanceof HTMLElement &&\n        (active.isContentEditable ||\n          active.tagName === \"TEXTAREA\" ||\n          (active instanceof HTMLInputElement &&\n            active.type !== \"checkbox\" &&\n            active.type !== \"radio\"));\n      if (typing) return;\n\n      const hit = values[Number(event.key) - 1];\n      if (hit === undefined) return;\n      event.preventDefault();\n\n      if (!question.multiple) {\n        setAnswer(name, hit);\n        return;\n      }\n      const chosen = answers[name];\n      const list = Array.isArray(chosen) ? chosen : [];\n      setAnswer(\n        name,\n        list.includes(hit) ? list.filter((value) => value !== hit) : [...list, hit],\n      );\n    };\n\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  });\n\n  const item: QuestionnaireItemContextValue = {\n    current,\n    index,\n    question,\n    shortcutOf: (value) => {\n      const position = values.indexOf(value);\n      // Only the first nine: `10` is two keystrokes and there is no chord worth inventing for a\n      // tenth option — a question with that many is a `Select`, not a questionnaire.\n      return shortcuts && position >= 0 && position < 9 ? String(position + 1) : undefined;\n    },\n  };\n\n  return (\n    <QuestionnaireItemContext.Provider value={item}>\n      <FieldSet\n        aria-current={current ? \"step\" : undefined}\n        className={cn(\"min-w-0 gap-4\", className)}\n        hidden={!current}\n        invalid={blocked === index}\n        {...rest}\n        slot={slot ?? \"questionnaire-item\"}\n      >\n        {children}\n      </FieldSet>\n    </QuestionnaireItemContext.Provider>\n  );\n}\n\n/** One item's choices in source order — which is also the order the shortcut keys are handed out. */\nfunction choiceValues(children: React.ReactNode): string[] {\n  return collect(children, QuestionnaireChoice).map(\n    (choice) => (choice.props as QuestionnaireChoiceProps).value,\n  );\n}\n\n/**\n * The question itself. A `<legend>`, which is what names the group Ark builds around it.\n *\n * The margin is not the fieldset's `gap`: a `<legend>` is rendered into the fieldset's border and\n * is not a flex item, so `gap` never reaches it. It sits flush against its own description and\n * opens up to `mb-4` when there is none — delete either half and the two spellings of this\n * question's heading stop agreeing.\n */\nexport const QuestionnaireTitle = (props: React.ComponentProps<typeof FieldLegend>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <FieldLegend\n      className={cn(\n        \"mb-0 font-heading text-pretty leading-snug\",\n        \"[&:not(:has(~[data-slot=questionnaire-description]))]:mb-4\",\n        className,\n      )}\n      {...rest}\n      slot={slot ?? \"questionnaire-title\"}\n    />\n  );\n};\n\nexport const QuestionnaireDescription = (props: React.ComponentProps<typeof FieldSetHelper>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <FieldSetHelper\n      className={cn(\"text-pretty\", className)}\n      {...rest}\n      slot={slot ?? \"questionnaire-description\"}\n    />\n  );\n};\n\n/**\n * Why Next was refused. Renders only while the fieldset is invalid, which is Ark's rule and not\n * ours — and Ark gives it `aria-live=\"polite\"` and hangs it off the group's `aria-describedby`.\n */\nexport const QuestionnaireError = (props: React.ComponentProps<typeof FieldSetError>) => {\n  const { children, slot, ...rest } = props;\n\n  return (\n    <FieldSetError {...rest} slot={slot ?? \"questionnaire-error\"}>\n      {children ?? \"Answer this to continue.\"}\n    </FieldSetError>\n  );\n};\n\n/**\n * The item's options — a radio group, or a checkbox group where the item is `multiple`.\n *\n * One component and not two, because the choice between them is the item's own `multiple` and a\n * caller who had to pick would be stating it twice.\n */\nexport type QuestionnaireChoicesProps = Omit<\n  React.ComponentProps<typeof ark.div>,\n  \"defaultValue\" | \"value\"\n>;\n\nexport const QuestionnaireChoices = (props: QuestionnaireChoicesProps) => {\n  const { children, className, slot, ...rest } = props;\n  const { answers, setAnswer } = useQuestionnaire();\n  const { question } = useQuestionnaireItem();\n  const { multiple, name } = question;\n  const answer = answers[name];\n\n  if (multiple) {\n    return (\n      <CheckboxGroup\n        className={cn(\"gap-2\", className)}\n        onValueChange={(value) => setAnswer(name, value)}\n        value={Array.isArray(answer) ? answer : []}\n        {...rest}\n        slot={slot ?? \"questionnaire-choices\"}\n      >\n        {children}\n      </CheckboxGroup>\n    );\n  }\n\n  return (\n    <RadioGroup\n      className={cn(\"gap-2\", className)}\n      onValueChange={(details) => setAnswer(name, details.value ?? \"\")}\n      value={typeof answer === \"string\" ? answer : null}\n      {...rest}\n      slot={slot ?? \"questionnaire-choices\"}\n    >\n      {children}\n    </RadioGroup>\n  );\n};\n\n/**\n * The card a choice is drawn as, in one recipe for both arms.\n *\n * `shell` is the border-and-state half. `RadioGroupCard` already *is* that shell, so the single\n * arm inherits it and only the multiple arm asks for it — a `Checkbox` has no card of its own. The\n * values are `simples/radio-group.tsx`'s, which is where the ΔE figures behind the hover and\n * selected fills are recorded and dated; they are restated here and decided there.\n *\n * **The control sits at the end**, which is where the reference puts it: a choice card is read as a\n * sentence and answered at the margin, and a control at the start makes a column of radios with\n * text hanging off them. `Checkbox` renders its control before its children and has to, so the\n * multiple arm reorders in CSS; the single arm simply writes the indicator last.\n *\n * `min-h-[44px]` is in pixels, not `rem`: WCAG 2.5.8 states its bar in CSS pixels, and every `rem`\n * here resolves against a root the density axis sets (14px at compact), so a `rem` floor is the\n * failure dressed as the fix.\n */\nconst questionnaireChoiceVariants = tv({\n  base: [\n    \"group/questionnaire-choice\",\n    \"relative flex w-full min-h-[44px] items-start gap-3\",\n    \"cursor-pointer select-none rounded-lg px-3.5 py-3\",\n    \"text-start text-sm\",\n    \"transition-colors\",\n    // The control is 16px against a 20px title line, so it drops 2px to sit on that line rather\n    // than on the top of a two-line stack.\n    \"*:data-[slot=checkbox-control]:mt-0.5 *:data-[slot=radio-group-indicator]:mt-0.5\",\n  ],\n  variants: {\n    shell: {\n      true: [\n        \"border border-input bg-transparent\",\n        \"hover:bg-foreground/14\",\n        \"data-[state=checked]:border-primary data-[state=checked]:bg-primary/17\",\n        \"data-focus-visible:border-primary data-focus-visible:ring-[3px] data-focus-visible:ring-ring\",\n        \"data-invalid:border-destructive\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        // See the docblock: the control is the last thing in the row, and `Checkbox` renders it\n        // first.\n        \"*:data-[slot=checkbox-control]:order-last\",\n      ],\n    },\n  },\n  defaultVariants: {\n    shell: false,\n  },\n});\n\n// `ark.label`, not `ark.div`: both arms render the control's own `<label>` as the card, so that is\n// the element a caller's props and `ref` land on.\nexport interface QuestionnaireChoiceProps\n  extends Omit<React.ComponentProps<typeof ark.label>, \"value\"> {\n  /**\n   * The muted second line — what the option means, rather than what it is called.\n   *\n   * A `string` and not a node, following `CardHeader`'s `title` / `description`: the label is\n   * already this part's children, and the control has to *name* itself off an element this\n   * component renders, so a second children slot would have to be found by splitting them.\n   */\n  description?: string;\n  /** What this choice contributes to the answer. */\n  value: string;\n}\n\n/**\n * One option, drawn as a card: the label and its description, then the shortcut key as a chip,\n * then the control at the margin.\n *\n * The card is the control's own `<label>` in both arms, so the whole of it is the target. What\n * differs is where the accessible name is read from: Ark points a radio's hidden input at its\n * `ItemText`, and a checkbox's at the label part we do not render — so the multiple arm names\n * itself explicitly off the title instead.\n *\n * `Item` is not the card here, deliberately. It declares `role=\"listitem\"`, which inside a\n * `radiogroup` is a list item with no list, and `asChild`-ing it onto the control would put that\n * role on the control itself — the failure `Item`'s own docblock describes.\n */\nexport const QuestionnaireChoice = (props: QuestionnaireChoiceProps) => {\n  const { children, className, description, slot, value, ...rest } = props;\n  const { question, shortcutOf } = useQuestionnaireItem();\n  const key = shortcutOf(value);\n  const labelId = React.useId();\n\n  const body = (\n    <>\n      <ItemContent slot=\"questionnaire-choice-label\">\n        {question.multiple ? (\n          <FieldTitle id={labelId} slot=\"questionnaire-choice-title\">\n            {children}\n          </FieldTitle>\n        ) : (\n          <RadioGroupText slot=\"questionnaire-choice-title\">{children}</RadioGroupText>\n        )}\n\n        {description ? (\n          <ItemDescription slot=\"questionnaire-choice-description\">{description}</ItemDescription>\n        ) : null}\n      </ItemContent>\n\n      {/* No fill of its own. It used to paint `bg-background`, which is a second opinion about\n          what is behind the card — on a selected one it punched a page-coloured hole through the\n          tint. Transparent, it takes whatever the card is showing. */}\n      {key ? (\n        <Kbd\n          aria-hidden\n          className=\"mt-0.5 size-5 shrink-0 rounded-md bg-transparent text-muted-foreground\"\n          variant=\"outline\"\n        >\n          {key}\n        </Kbd>\n      ) : null}\n    </>\n  );\n\n  if (question.multiple) {\n    return (\n      <Checkbox\n        aria-labelledby={labelId}\n        className={cn(questionnaireChoiceVariants({ shell: true }), className)}\n        value={value}\n        {...rest}\n        slot={slot ?? \"questionnaire-choice\"}\n      >\n        {body}\n      </Checkbox>\n    );\n  }\n\n  return (\n    <RadioGroupCard\n      className={cn(questionnaireChoiceVariants(), className)}\n      value={value}\n      {...rest}\n      slot={slot ?? \"questionnaire-choice\"}\n    >\n      {body}\n      <RadioGroupIndicator />\n    </RadioGroupCard>\n  );\n};\n\n/**\n * A freeform answer following a list of choices is the last row of that list, not a field below it\n * — so it closes the item's `gap-4` back down to the `gap-2` between the cards.\n */\nconst freeform = \"[[data-slot=questionnaire-choices]+&]:-mt-2\";\n\n/**\n * The freeform arm — a single-line answer filed under the item's name.\n *\n * A fieldset's legend names the GROUP, not a control inside it, so the input is pointed at the\n * legend explicitly. Without this the question is announced when focus enters the group and the\n * control itself is unnamed.\n */\nexport const QuestionnaireInput = (props: React.ComponentProps<typeof Input>) => {\n  const { className, slot, ...rest } = props;\n  const { answers, setAnswer } = useQuestionnaire();\n  const { question } = useQuestionnaireItem();\n  const fieldset: UseFieldsetContext | undefined = useFieldsetContext();\n  const answer = answers[question.name];\n\n  return (\n    <Input\n      aria-labelledby={fieldset?.ids.legend}\n      className={cn(freeform, className)}\n      onChange={(event) => setAnswer(question.name, event.target.value)}\n      value={typeof answer === \"string\" ? answer : \"\"}\n      {...rest}\n      slot={slot ?? \"questionnaire-input\"}\n    />\n  );\n};\n\n/** The same binding over a `Textarea`, for the answer that runs to a paragraph. */\nexport const QuestionnaireTextarea = (props: React.ComponentProps<typeof Textarea>) => {\n  const { className, slot, ...rest } = props;\n  const { answers, setAnswer } = useQuestionnaire();\n  const { question } = useQuestionnaireItem();\n  const fieldset: UseFieldsetContext | undefined = useFieldsetContext();\n  const answer = answers[question.name];\n\n  return (\n    <Textarea\n      aria-labelledby={fieldset?.ids.legend}\n      className={cn(freeform, className)}\n      onChange={(event) => setAnswer(question.name, event.target.value)}\n      value={typeof answer === \"string\" ? answer : \"\"}\n      {...rest}\n      slot={slot ?? \"questionnaire-textarea\"}\n    />\n  );\n};\n\nexport interface QuestionnaireActionsProps\n  extends Omit<React.ComponentProps<typeof ark.div>, \"aria-label\" | \"aria-labelledby\"> {\n  /** Names the group, the way a run of independent controls needs naming. */\n  \"aria-label\"?: string;\n}\n\n/**\n * The navigation row: Back at the start, Skip and Next/Submit at the end.\n *\n * Three fixed columns rather than a `ButtonGroup`, and that is the point of it — `ButtonGroup`\n * collapses the inner radii and overlaps its children by a pixel, which is right for a cluster\n * acting on one thing and wrong for two ends of a journey. The columns hold their places while\n * Back and Skip come and go, so nothing slides sideways between questions.\n */\nexport const QuestionnaireActions = (props: QuestionnaireActionsProps) => {\n  const { \"aria-label\": label = \"Questionnaire navigation\", className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      aria-label={label}\n      className={cn(\n        \"grid w-full grid-cols-[minmax(0,1fr)_auto_auto] items-center gap-2\",\n        className,\n      )}\n      role=\"group\"\n      {...rest}\n      data-slot={slot ?? \"questionnaire-actions\"}\n    />\n  );\n};\n\n/**\n * Drawn only where there is somewhere to go back to.\n *\n * Absent rather than disabled: the first question's row is one solid Next and nothing else, and a\n * greyed control that has never been available says nothing a reader can use.\n */\nexport const QuestionnairePrevious = (props: ButtonProps) => {\n  const { children, className, slot, ...rest } = props;\n  const { steps } = useQuestionnaire();\n\n  if (!steps.hasPrevStep) return null;\n\n  return (\n    <Button\n      className={cn(\"col-start-1 row-start-1 justify-self-start\", className)}\n      onClick={() => steps.goToPrevStep()}\n      variant=\"outline\"\n      {...rest}\n      slot={slot ?? \"questionnaire-previous\"}\n    >\n      {children ?? \"Back\"}\n    </Button>\n  );\n};\n\n/** Drawn only where the visible question declared itself skippable — elsewhere it would lie. */\nexport const QuestionnaireSkip = (props: ButtonProps) => {\n  const { children, className, slot, ...rest } = props;\n  const { questions, steps } = useQuestionnaire();\n\n  if (questions[steps.value]?.skippable !== true) return null;\n\n  return (\n    <Button\n      className={cn(\"col-start-2 row-start-1 justify-self-end\", className)}\n      onClick={() => steps.goToNextStep()}\n      variant=\"ghost\"\n      {...rest}\n      slot={slot ?? \"questionnaire-skip\"}\n    >\n      {children ?? \"Skip\"}\n    </Button>\n  );\n};\n\n/**\n * Advance, or reveal why not.\n *\n * Never disabled on an unanswered question: a disabled control says nothing about what is missing,\n * and the machine's `onStepInvalid` is what puts the message on screen. It stands down on the last\n * question so that `QuestionnaireSubmit` can take the same place in the cluster.\n */\nexport const QuestionnaireNext = (props: ButtonProps) => {\n  const { children, className, slot, ...rest } = props;\n  const { steps } = useQuestionnaire();\n\n  if (steps.value >= steps.count - 1) return null;\n\n  return (\n    <Button\n      className={cn(\"col-start-3 row-start-1 justify-self-end\", className)}\n      onClick={() => steps.goToNextStep()}\n      {...rest}\n      slot={slot ?? \"questionnaire-next\"}\n    >\n      {children ?? \"Next\"}\n    </Button>\n  );\n};\n\n/** The other half of that pair: drawn only on the last question, and it submits the form. */\nexport const QuestionnaireSubmit = (props: ButtonProps) => {\n  const { children, className, slot, ...rest } = props;\n  const { steps } = useQuestionnaire();\n\n  if (steps.value < steps.count - 1) return null;\n\n  return (\n    <Button\n      className={cn(\"col-start-3 row-start-1 justify-self-end\", className)}\n      type=\"submit\"\n      {...rest}\n      slot={slot ?? \"questionnaire-submit\"}\n    >\n      {children ?? \"Submit\"}\n    </Button>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;AA+FA;AAGO;AACL;AACA;AACA;AACF;AAEO;AACL;AACA;AACA;AACF;AAeA;AACE;AAEE;AACE;AACA;AACE;AACA;AAAA;AAEF;AAA6D;AAAA;AAC9D;AAEH;AAEF;AAEA;AACE;AACE;AACA;AAAO;AACwB;AACjB;AACiB;AACE;AAAA;AAGrC;AAMA;AACE;AACA;AACA;AACF;AAyBO;AACL;AAAM;AACJ;AACA;AACA;AACc;AACd;AACA;AACA;AACY;AACZ;AACG;AAOkB;AAAA;AAEM;AAC3B;;AAC4B;AAAgC;AAAA;AACF;AAExD;AACe;AACjB;AACmD;AAInD;AACA;AAEkB;AAQlB;AACA;AACE;AACA;AAAA;AAEF;AAAW;AAG8B;AACzC;AACA;AAC2E;AAC3E;AACA;AACA;AACA;AAGF;AAEI;AAAK;AAAJ;AAC8D;AACnD;AAER;AACA;AACF;AACI;AACe;AAElB;AAAA;AAIT;AAiBO;AACL;AAMA;AACE;AAAK;AAAJ;AACW;AACW;AACN;AACA;AACC;AAGL;AACT;AACA;AACA;AAAA;AAEG;AACD;AACe;AAEN;AAAA;AAGnB;AAaO;AACL;AAKwC;AACf;AACvB;AACuB;AACE;AAO3B;AACE;AAEA;AACE;AACA;AAUA;AAEA;AACA;AAGA;AACE;AACA;AAAA;AAEF;AAEA;AAAA;AACE;AAC0E;AAAA;AAI9E;AACwD;AAG1D;AAA4C;AAC1C;AACA;AACA;AAEE;AAGA;AAA2E;AAC7E;AAGF;AAEI;AAAC;AAAA;AACkC;AACO;AAC/B;AACY;AACjB;AACU;AAEb;AAAA;AAIT;AAGA;AACE;AAA8C;AACW;AAE3D;AAUO;AACL;AAEA;AACE;AAAC;AAAA;AACY;AACT;AACA;AACA;AAAA;AAEE;AACU;AAAA;AAGpB;AAGE;AAEA;AACE;AAAC;AAAA;AACuC;AAClC;AACU;AAAA;AAGpB;AAOE;AAEA;AAKF;AAcE;AAMA;AAEI;AAAC;AAAA;AACiC;AACe;AACP;AACpC;AACU;AAEb;AAAA;AAML;AAAC;AAAA;AACiC;AAC+B;AAClB;AACzC;AACU;AAEb;AAAA;AAGP;AAmBuC;AAC/B;AACJ;AACA;AACA;AACA;AACA;AAAA;AAAA;AAGA;AAAA;AAEQ;AACD;AACC;AACJ;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAGA;AAAA;AACF;AACF;AAEe;AACR;AAEX;AAgCE;AAOI;AACG;AAK6D;AAK1D;AACN;AAME;AAAC;AAAA;AACY;AACD;AACF;AAEP;AAAA;AAED;AAIR;AAEI;AAAC;AAAA;AACkB;AACoD;AACrE;AACI;AACU;AAEb;AAAA;AAML;AAAC;AAAA;AACuD;AACtD;AACI;AACU;AAEb;AAAA;AACoB;AAAA;AAAA;AAG3B;AAgBE;AAMA;AACE;AAAC;AAAA;AACgC;AACE;AAC+B;AACnB;AACzC;AACU;AAAA;AAGpB;AAIE;AAMA;AACE;AAAC;AAAA;AACgC;AACE;AAC+B;AACnB;AACzC;AACU;AAAA;AAGpB;AAiBE;AAEA;AACE;AAAK;AAAJ;AACa;AACD;AACT;AACA;AAAA;AAEG;AACD;AACe;AAAA;AAGzB;AASE;AAGA;AAGE;AAAC;AAAA;AACsE;AAChD;AACb;AACJ;AACU;AAED;AAAA;AAGnB;;AAIE;AAGA;AAGE;AAAC;AAAA;AACoE;AAC9C;AACb;AACJ;AACU;AAED;AAAA;AAGnB;AAUE;AAGA;AAGE;AAAC;AAAA;AACoE;AAC9C;AACjB;AACU;AAED;AAAA;AAGnB;AAIE;AAGA;AAGE;AAAC;AAAA;AACoE;AAC9D;AACD;AACU;AAED;AAAA;AAGnB;;;;;;;;;;;;;;;;;;;;"}

package/dist/composites/SidebarIdentity.d.ts

@@ -0,0 +1,63 @@
+import { ComponentProps } from 'react';
+import { Avatar } from '../simples/avatar.js';
+export interface SidebarIdentityProps extends ComponentProps<"div"> {
+    /** Gate the `group-data-[collapsible=icon]` variants (false for the portaled menu header). */
+    responsive?: boolean;
+    /** Whether the sidebar is currently collapsed (drives the avatar's semantic size). */
+    collapsed?: boolean;
+}
+/**
+ * SidebarIdentity — the collapse-aware "avatar/icon + name + subtitle" block a sidebar header or
+ * footer is built from. When `responsive`, the text column and gap
+ * collapse in the sidebar's icon state and the avatar grows to fill the 32px square (its
+ * `data-size` grows to `md` too, so badges/icons stay correctly scaled).
+ *
+ * The content is CHILDREN, not an `IdentityData` object prop. A record of `ReactNode`s
+ * (`label`/`description`/`avatarUrl`/`fallback`/`icon`) is a layout tree written as an
+ * attribute: you cannot reorder it, wrap a region, spread props onto one, or use `asChild` —
+ * and the avatar could only ever be an `<img src>` plus initials, never a badge or a status
+ * dot. Composition gives all of that back, and matches how every simple in this library
+ * already works — `CardHeader`, not `<Card header={…} />`.
+ *
+ *   <SidebarIdentity responsive collapsed={collapsed}>
+ *     <SidebarIdentityAvatar>
+ *       <AvatarImage src={url} alt={name} />
+ *       <AvatarFallback>{initials}</AvatarFallback>
+ *     </SidebarIdentityAvatar>
+ *     <SidebarIdentityText>
+ *       <SidebarIdentityLabel>{name}</SidebarIdentityLabel>
+ *       <SidebarIdentityDescription>{email}</SidebarIdentityDescription>
+ *     </SidebarIdentityText>
+ *   </SidebarIdentity>
+ */
+export declare function SidebarIdentity({ responsive, collapsed, className, children, slot, ...rest }: SidebarIdentityProps): import("react").JSX.Element;
+export declare namespace SidebarIdentity {
+    var displayName: string;
+}
+/** A square icon tile instead of an avatar (instances / workspaces / orgs). */
+export declare function SidebarIdentityIcon({ className, slot, ...rest }: ComponentProps<"div">): import("react").JSX.Element;
+export declare namespace SidebarIdentityIcon {
+    var displayName: string;
+}
+/**
+ * The avatar (people). Takes `AvatarImage` / `AvatarFallback` as children; its `size` is
+ * derived from the sidebar state, so it is not overridable here.
+ */
+export declare function SidebarIdentityAvatar({ slot, ...rest }: Omit<ComponentProps<typeof Avatar>, "size">): import("react").JSX.Element;
+export declare namespace SidebarIdentityAvatar {
+    var displayName: string;
+}
+/** The text column. Hidden entirely in the sidebar's icon state when `responsive`. */
+export declare function SidebarIdentityText({ className, slot, ...rest }: ComponentProps<"div">): import("react").JSX.Element;
+export declare namespace SidebarIdentityText {
+    var displayName: string;
+}
+export declare function SidebarIdentityLabel({ className, slot, ...rest }: ComponentProps<"span">): import("react").JSX.Element;
+export declare namespace SidebarIdentityLabel {
+    var displayName: string;
+}
+export declare function SidebarIdentityDescription({ className, slot, ...rest }: ComponentProps<"span">): import("react").JSX.Element;
+export declare namespace SidebarIdentityDescription {
+    var displayName: string;
+}
+//# sourceMappingURL=SidebarIdentity.d.ts.map

package/dist/composites/SidebarIdentity.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarIdentity.d.ts","sourceRoot":"","sources":["../../src/composites/SidebarIdentity.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAc9C,MAAM,WAAW,oBAAqB,SAAQ,cAAc,CAAC,KAAK,CAAC;IACjE,8FAA8F;IAC9F,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,UAAkB,EAClB,SAAiB,EACjB,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,GAAG,IAAI,EACR,EAAE,oBAAoB,+BAmBtB;yBA1Be,eAAe;;;AA6B/B,+EAA+E;AAC/E,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAatF;yBAbe,mBAAmB;;;AAgBnC;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,+BAGnG;yBAHe,qBAAqB;;;AAMrC,sFAAsF;AACtF,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,+BAatF;yBAbe,mBAAmB;;;AAgBnC,wBAAgB,oBAAoB,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,MAAM,CAAC,+BAQxF;yBARe,oBAAoB;;;AAWpC,wBAAgB,0BAA0B,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,CAAC,MAAM,CAAC,+BAQ9F;yBARe,0BAA0B"}

package/dist/composites/SidebarIdentity.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { useContext as s, createContext as c } from "react";
+import { Avatar as p } from "../simples/avatar.js";
+import { cn as n } from "../lib/cn.js";
+const d = c({
+  responsive: !1,
+  collapsed: !1
+});
+function m({
+  responsive: e = !1,
+  collapsed: t = !1,
+  className: i,
+  children: a,
+  slot: o,
+  ...l
+}) {
+  return /* @__PURE__ */ r(d.Provider, { value: { responsive: e, collapsed: t }, children: /* @__PURE__ */ r(
+    "div",
+    {
+      className: n(
+        "flex min-w-0 flex-1 items-center gap-2 text-start",
+        // Collapsed, the avatar/tile (32px) is slightly larger than the ghost button's content
+        // box (32px minus its 1px transparent border), so `justify-start` would left-align it and
+        // clip the right edge — reading as off-centre. Centre it so the overflow is symmetric.
+        e && "group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:gap-0",
+        i
+      ),
+      ...l,
+      "data-slot": o ?? "sidebar-identity",
+      children: a
+    }
+  ) });
+}
+m.displayName = "SidebarIdentity";
+function y({ className: e, slot: t, ...i }) {
+  const { responsive: a } = s(d);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: n(
+        "flex size-6 shrink-0 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground [&_svg]:size-4",
+        a && "group-data-[collapsible=icon]:size-8",
+        e
+      ),
+      ...i,
+      "data-slot": t ?? "sidebar-identity-icon"
+    }
+  );
+}
+y.displayName = "SidebarIdentityIcon";
+function b({ slot: e, ...t }) {
+  const { responsive: i, collapsed: a } = s(d);
+  return /* @__PURE__ */ r(p, { size: i && a ? "md" : "sm", ...t, slot: e ?? "sidebar-identity-avatar" });
+}
+b.displayName = "SidebarIdentityAvatar";
+function u({ className: e, slot: t, ...i }) {
+  const { responsive: a } = s(d);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: n(
+        "flex min-w-0 flex-col leading-tight",
+        a && "group-data-[collapsible=icon]:hidden",
+        e
+      ),
+      ...i,
+      "data-slot": t ?? "sidebar-identity-text"
+    }
+  );
+}
+u.displayName = "SidebarIdentityText";
+function f({ className: e, slot: t, ...i }) {
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      className: n("truncate text-sm font-medium", e),
+      ...i,
+      "data-slot": t ?? "sidebar-identity-label"
+    }
+  );
+}
+f.displayName = "SidebarIdentityLabel";
+function x({ className: e, slot: t, ...i }) {
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      className: n("truncate text-xs text-muted-foreground", e),
+      ...i,
+      "data-slot": t ?? "sidebar-identity-description"
+    }
+  );
+}
+x.displayName = "SidebarIdentityDescription";
+export {
+  m as SidebarIdentity,
+  b as SidebarIdentityAvatar,
+  x as SidebarIdentityDescription,
+  y as SidebarIdentityIcon,
+  f as SidebarIdentityLabel,
+  u as SidebarIdentityText
+};
+//# sourceMappingURL=SidebarIdentity.js.map

package/dist/composites/SidebarIdentity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarIdentity.js","sources":["../../src/composites/SidebarIdentity.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, type ComponentProps } from \"react\";\nimport { Avatar } from \"../simples/avatar.js\";\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * `responsive`/`collapsed` are behaviour, so they stay props on the root — but the parts need\n * them too (the avatar's semantic size, the text column's collapse). Context carries them\n * down instead of the caller repeating them on every part. This context is why the file is\n * `\"use client\"`.\n */\nconst IdentityCtx = createContext<{ responsive: boolean; collapsed: boolean }>({\n  responsive: false,\n  collapsed: false,\n});\n\nexport interface SidebarIdentityProps extends ComponentProps<\"div\"> {\n  /** Gate the `group-data-[collapsible=icon]` variants (false for the portaled menu header). */\n  responsive?: boolean;\n  /** Whether the sidebar is currently collapsed (drives the avatar's semantic size). */\n  collapsed?: boolean;\n}\n\n/**\n * SidebarIdentity — the collapse-aware \"avatar/icon + name + subtitle\" block a sidebar header or\n * footer is built from. When `responsive`, the text column and gap\n * collapse in the sidebar's icon state and the avatar grows to fill the 32px square (its\n * `data-size` grows to `md` too, so badges/icons stay correctly scaled).\n *\n * The content is CHILDREN, not an `IdentityData` object prop. A record of `ReactNode`s\n * (`label`/`description`/`avatarUrl`/`fallback`/`icon`) is a layout tree written as an\n * attribute: you cannot reorder it, wrap a region, spread props onto one, or use `asChild` —\n * and the avatar could only ever be an `<img src>` plus initials, never a badge or a status\n * dot. Composition gives all of that back, and matches how every simple in this library\n * already works — `CardHeader`, not `<Card header={…} />`.\n *\n *   <SidebarIdentity responsive collapsed={collapsed}>\n *     <SidebarIdentityAvatar>\n *       <AvatarImage src={url} alt={name} />\n *       <AvatarFallback>{initials}</AvatarFallback>\n *     </SidebarIdentityAvatar>\n *     <SidebarIdentityText>\n *       <SidebarIdentityLabel>{name}</SidebarIdentityLabel>\n *       <SidebarIdentityDescription>{email}</SidebarIdentityDescription>\n *     </SidebarIdentityText>\n *   </SidebarIdentity>\n */\nexport function SidebarIdentity({\n  responsive = false,\n  collapsed = false,\n  className,\n  children,\n  slot,\n  ...rest\n}: SidebarIdentityProps) {\n  return (\n    <IdentityCtx.Provider value={{ responsive, collapsed }}>\n      <div\n        className={cn(\n          \"flex min-w-0 flex-1 items-center gap-2 text-start\",\n          // Collapsed, the avatar/tile (32px) is slightly larger than the ghost button's content\n          // box (32px minus its 1px transparent border), so `justify-start` would left-align it and\n          // clip the right edge — reading as off-centre. Centre it so the overflow is symmetric.\n          responsive && \"group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:gap-0\",\n          className,\n        )}\n        {...rest}\n        data-slot={slot ?? \"sidebar-identity\"}\n      >\n        {children}\n      </div>\n    </IdentityCtx.Provider>\n  );\n}\nSidebarIdentity.displayName = \"SidebarIdentity\";\n\n/** A square icon tile instead of an avatar (instances / workspaces / orgs). */\nexport function SidebarIdentityIcon({ className, slot, ...rest }: ComponentProps<\"div\">) {\n  const { responsive } = useContext(IdentityCtx);\n  return (\n    <div\n      className={cn(\n        \"flex size-6 shrink-0 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground [&_svg]:size-4\",\n        responsive && \"group-data-[collapsible=icon]:size-8\",\n        className,\n      )}\n      {...rest}\n      data-slot={slot ?? \"sidebar-identity-icon\"}\n    />\n  );\n}\nSidebarIdentityIcon.displayName = \"SidebarIdentityIcon\";\n\n/**\n * The avatar (people). Takes `AvatarImage` / `AvatarFallback` as children; its `size` is\n * derived from the sidebar state, so it is not overridable here.\n */\nexport function SidebarIdentityAvatar({ slot, ...rest }: Omit<ComponentProps<typeof Avatar>, \"size\">) {\n  const { responsive, collapsed } = useContext(IdentityCtx);\n  return <Avatar size={responsive && collapsed ? \"md\" : \"sm\"} {...rest} slot={slot ?? \"sidebar-identity-avatar\"} />;\n}\nSidebarIdentityAvatar.displayName = \"SidebarIdentityAvatar\";\n\n/** The text column. Hidden entirely in the sidebar's icon state when `responsive`. */\nexport function SidebarIdentityText({ className, slot, ...rest }: ComponentProps<\"div\">) {\n  const { responsive } = useContext(IdentityCtx);\n  return (\n    <div\n      className={cn(\n        \"flex min-w-0 flex-col leading-tight\",\n        responsive && \"group-data-[collapsible=icon]:hidden\",\n        className,\n      )}\n      {...rest}\n      data-slot={slot ?? \"sidebar-identity-text\"}\n    />\n  );\n}\nSidebarIdentityText.displayName = \"SidebarIdentityText\";\n\nexport function SidebarIdentityLabel({ className, slot, ...rest }: ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\"truncate text-sm font-medium\", className)}\n      {...rest}\n      data-slot={slot ?? \"sidebar-identity-label\"}\n    />\n  );\n}\nSidebarIdentityLabel.displayName = \"SidebarIdentityLabel\";\n\nexport function SidebarIdentityDescription({ className, slot, ...rest }: ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\"truncate text-xs text-muted-foreground\", className)}\n      {...rest}\n      data-slot={slot ?? \"sidebar-identity-description\"}\n    />\n  );\n}\nSidebarIdentityDescription.displayName = \"SidebarIdentityDescription\";\n"],"names":["SidebarIdentity","SidebarIdentityIcon","SidebarIdentityAvatar","SidebarIdentityText","SidebarIdentityLabel","SidebarIdentityDescription"],"mappings":";;;;;AAYA;AAA+E;AACjE;AAEd;AAiCO;AAAyB;AACjB;AACD;AACZ;AACA;AACA;AAEF;AACE;AAEI;AAAC;AAAA;AACY;AACT;AAAA;AAAA;AAAA;AAIc;AACd;AAAA;AAEE;AACe;AAElB;AAAA;AAIT;AACAA;AAGO;AACL;AACA;AACE;AAAC;AAAA;AACY;AACT;AACc;AACd;AAAA;AAEE;AACe;AAAA;AAGzB;AACAC;AAMO;AACL;AACA;AACF;AACAC;AAGO;AACL;AACA;AACE;AAAC;AAAA;AACY;AACT;AACc;AACd;AAAA;AAEE;AACe;AAAA;AAGzB;AACAC;AAEO;AACL;AACE;AAAC;AAAA;AACwD;AACnD;AACe;AAAA;AAGzB;AACAC;AAEO;AACL;AACE;AAAC;AAAA;AACkE;AAC7D;AACe;AAAA;AAGzB;AACAC;;;;;;;;;"}

package/dist/composites/code-editor-search.d.ts

@@ -0,0 +1,40 @@
+import { Extension } from '@codemirror/state';
+import { Panel } from '@codemirror/view';
+import { ReactNode } from 'react';
+/**
+ * The find/replace panel, built from this library's own controls.
+ *
+ * `@codemirror/search` lets the panel be replaced wholesale — `search({ createPanel })`, where a
+ * `Panel` is an object with a `dom` — so the editor hands CodeMirror an empty element and renders
+ * into it with `createPortal`. **The search itself is not reimplemented:** `setSearchQuery`,
+ * `findNext`, `findPrevious`, `replaceNext`, `replaceAll` and `getSearchQuery` are all public, and
+ * they are the whole of the behaviour here. What changes is who draws the form.
+ *
+ * It buys the one thing a CSS override could not: the panel stops being the piece of the editor
+ * with its own typography, its own buttons and its own focus ring. Six selectors went with it —
+ * `.cm-panel.cm-search`, its font-size reset, the two `.cm-textfield` rules and the two for
+ * `button[name=close]`. **`.cm-textfield` and `.cm-button` themselves stay**, unscoped, because
+ * `gotoLine`'s dialog is still CodeMirror's own and because `codemirror-dark-parity.test.ts` reads
+ * that list: they are what stands between a dark page and CodeMirror's `&light` white box.
+ */
+/**
+ * How a `Panel` is opened as React. `CodeEditor` owns the implementation because the portals have
+ * to be children of its tree — a panel rendered from anywhere else loses the theme context, the
+ * error boundary and every provider above it.
+ */
+export interface ReactPanelHost {
+    panel: (node: ReactNode, opts?: {
+        top?: boolean;
+    }) => Panel;
+}
+/**
+ * `@codemirror/search`, drawn by `CodeSearchPanel`.
+ *
+ * The `update` hook is the panel's only channel back into React: CodeMirror gives a `Panel` a
+ * `ViewUpdate` on every transaction, and re-rendering the form on each keystroke of the document
+ * would be absurd — so it compares the query and `readOnly` and notifies only when one of them
+ * moved. `SearchQuery.eq` is what makes that cheap, and it is also what keeps our own
+ * `setSearchQuery` from looping back through the component.
+ */
+export declare const kanzoSearch: (host: ReactPanelHost) => Extension;
+//# sourceMappingURL=code-editor-search.d.ts.map

package/dist/composites/code-editor-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-editor-search.d.ts","sourceRoot":"","sources":["../../src/composites/code-editor-search.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAmB,KAAK,KAAK,EAAoB,MAAM,kBAAkB,CAAC;AAYjF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWvC;;;;;;;;;;;;;;;GAeG;AAEH;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE;QAAE,GAAG,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,KAAK,CAAC;CAC7D;AA6LD;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,GAAI,MAAM,cAAc,KAAG,SA+B/C,CAAC"}

package/dist/composites/code-editor-search.js

@@ -0,0 +1,212 @@
+"use client";
+import { jsx as r, jsxs as o, Fragment as w } from "react/jsx-runtime";
+import { search as k, getSearchQuery as u, findPrevious as v, findNext as y, selectMatches as O, closeSearchPanel as P, replaceNext as b, replaceAll as W, SearchQuery as D, setSearchQuery as F } from "@codemirror/search";
+import { runScopeHandlers as q } from "@codemirror/view";
+import { CaseSensitiveIcon as G, WholeWordIcon as N, RegexIcon as Q, ChevronUpIcon as T, ChevronDownIcon as A, TextSelectIcon as E, XIcon as K, ReplaceIcon as j, ReplaceAllIcon as B } from "lucide-react";
+import { useState as C, useRef as S, useEffect as x } from "react";
+import { Button as c } from "../simples/button.js";
+import { ButtonGroup as z } from "../simples/button-group.js";
+import { InputGroup as I, InputGroupInput as R, InputGroupAddon as M } from "../simples/input-group.js";
+import { Toggle as m } from "../simples/toggle.js";
+const _ = (h) => {
+  const { view: a, subscribe: t } = h, [n, s] = C(() => u(a.state)), [g, l] = C(() => a.state.readOnly), i = S(null), p = S(null);
+  x(
+    () => t(() => {
+      s(u(a.state)), l(a.state.readOnly);
+    }),
+    [t, a]
+  ), x(() => {
+    var e;
+    (e = i.current) == null || e.select();
+  }, []);
+  const d = (e) => {
+    const f = new D({
+      search: n.search,
+      caseSensitive: n.caseSensitive,
+      literal: n.literal,
+      regexp: n.regexp,
+      replace: n.replace,
+      wholeWord: n.wholeWord,
+      ...e
+    });
+    f.eq(n) || (s(f), a.dispatch({ effects: F.of(f) }));
+  };
+  return (
+    // Two rows on ONE grid, not two flex rows. The fields have to end on the same line and the
+    // clusters beside them have to start on it, and the two clusters are a different number of
+    // buttons — so that column has to be sized by the wider of them, which is what a shared grid
+    // track does and what a pair of flex rows cannot.
+    //
+    // `font-sans` is the point of the file: everything inside `.cm-editor` inherits the monospace
+    // stack, so a panel that says nothing renders its labels in code type.
+    /* @__PURE__ */ o(
+      "div",
+      {
+        className: "grid grid-cols-[1fr_auto_auto] items-center gap-1.5 p-1.5 font-sans",
+        "data-slot": "code-editor-search",
+        onKeyDown: (e) => {
+          if (q(a, e.nativeEvent, "search-panel")) {
+            e.preventDefault();
+            return;
+          }
+          e.key === "Enter" && (e.target === i.current ? (e.preventDefault(), (e.shiftKey ? v : y)(a)) : e.target === p.current && (e.preventDefault(), b(a)));
+        },
+        children: [
+          /* @__PURE__ */ o(I, { size: "sm", children: [
+            /* @__PURE__ */ r(
+              R,
+              {
+                "aria-label": "Find",
+                "main-field": "true",
+                onChange: (e) => d({ search: e.currentTarget.value }),
+                placeholder: "Find",
+                ref: i,
+                size: "sm",
+                value: n.search
+              }
+            ),
+            /* @__PURE__ */ o(M, { align: "inline-end", children: [
+              /* @__PURE__ */ r(
+                m,
+                {
+                  "aria-label": "Match case",
+                  onPressedChange: (e) => d({ caseSensitive: e }),
+                  pressed: n.caseSensitive,
+                  size: "sm",
+                  children: /* @__PURE__ */ r(G, {})
+                }
+              ),
+              /* @__PURE__ */ r(
+                m,
+                {
+                  "aria-label": "Whole word",
+                  onPressedChange: (e) => d({ wholeWord: e }),
+                  pressed: n.wholeWord,
+                  size: "sm",
+                  children: /* @__PURE__ */ r(N, {})
+                }
+              ),
+              /* @__PURE__ */ r(
+                m,
+                {
+                  "aria-label": "Regular expression",
+                  onPressedChange: (e) => d({ regexp: e }),
+                  pressed: n.regexp,
+                  size: "sm",
+                  children: /* @__PURE__ */ r(Q, {})
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ o(z, { "aria-label": "Find", children: [
+            /* @__PURE__ */ r(
+              c,
+              {
+                "aria-label": "Previous match",
+                onClick: () => v(a),
+                size: "icon-lg",
+                variant: "outline",
+                children: /* @__PURE__ */ r(T, {})
+              }
+            ),
+            /* @__PURE__ */ r(
+              c,
+              {
+                "aria-label": "Next match",
+                onClick: () => y(a),
+                size: "icon-lg",
+                variant: "outline",
+                children: /* @__PURE__ */ r(A, {})
+              }
+            ),
+            /* @__PURE__ */ r(
+              c,
+              {
+                "aria-label": "Select all matches",
+                onClick: () => O(a),
+                size: "icon-lg",
+                variant: "outline",
+                children: /* @__PURE__ */ r(E, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ r(
+            c,
+            {
+              "aria-label": "Close",
+              onClick: () => P(a),
+              size: "icon-lg",
+              variant: "ghost",
+              children: /* @__PURE__ */ r(K, {})
+            }
+          ),
+          !g && /* @__PURE__ */ o(w, { children: [
+            /* @__PURE__ */ r(I, { size: "sm", children: /* @__PURE__ */ r(
+              R,
+              {
+                "aria-label": "Replace",
+                onChange: (e) => d({ replace: e.currentTarget.value }),
+                placeholder: "Replace",
+                ref: p,
+                size: "sm",
+                value: n.replace
+              }
+            ) }),
+            /* @__PURE__ */ o(z, { "aria-label": "Replace", children: [
+              /* @__PURE__ */ r(
+                c,
+                {
+                  "aria-label": "Replace",
+                  onClick: () => b(a),
+                  size: "icon-lg",
+                  variant: "outline",
+                  children: /* @__PURE__ */ r(j, {})
+                }
+              ),
+              /* @__PURE__ */ r(
+                c,
+                {
+                  "aria-label": "Replace all",
+                  onClick: () => W(a),
+                  size: "icon-lg",
+                  variant: "outline",
+                  children: /* @__PURE__ */ r(B, {})
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
+  );
+}, re = (h) => k({
+  createPanel: (a) => {
+    const t = /* @__PURE__ */ new Set();
+    let n = u(a.state), s = a.state.readOnly;
+    return {
+      ...h.panel(
+        /* @__PURE__ */ r(
+          _,
+          {
+            subscribe: (l) => (t.add(l), () => {
+              t.delete(l);
+            }),
+            view: a
+          }
+        ),
+        { top: !0 }
+      ),
+      update: (l) => {
+        const i = u(l.state);
+        if (!(i.eq(n) && l.state.readOnly === s)) {
+          n = i, s = l.state.readOnly;
+          for (const p of t) p();
+        }
+      }
+    };
+  }
+});
+export {
+  re as kanzoSearch
+};
+//# sourceMappingURL=code-editor-search.js.map

package/dist/composites/code-editor-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-editor-search.js","sources":["../../src/composites/code-editor-search.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  SearchQuery,\n  closeSearchPanel,\n  findNext,\n  findPrevious,\n  getSearchQuery,\n  replaceAll,\n  replaceNext,\n  search,\n  selectMatches,\n  setSearchQuery,\n} from \"@codemirror/search\";\nimport type { Extension } from \"@codemirror/state\";\nimport { type EditorView, type Panel, runScopeHandlers } from \"@codemirror/view\";\nimport {\n  CaseSensitiveIcon,\n  ChevronDownIcon,\n  ChevronUpIcon,\n  RegexIcon,\n  ReplaceAllIcon,\n  ReplaceIcon,\n  TextSelectIcon,\n  WholeWordIcon,\n  XIcon,\n} from \"lucide-react\";\nimport type { ReactNode } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Button } from \"../simples/button\";\nimport { ButtonGroup } from \"../simples/button-group\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"../simples/input-group\";\nimport { Toggle } from \"../simples/toggle\";\n\n/**\n * The find/replace panel, built from this library's own controls.\n *\n * `@codemirror/search` lets the panel be replaced wholesale — `search({ createPanel })`, where a\n * `Panel` is an object with a `dom` — so the editor hands CodeMirror an empty element and renders\n * into it with `createPortal`. **The search itself is not reimplemented:** `setSearchQuery`,\n * `findNext`, `findPrevious`, `replaceNext`, `replaceAll` and `getSearchQuery` are all public, and\n * they are the whole of the behaviour here. What changes is who draws the form.\n *\n * It buys the one thing a CSS override could not: the panel stops being the piece of the editor\n * with its own typography, its own buttons and its own focus ring. Six selectors went with it —\n * `.cm-panel.cm-search`, its font-size reset, the two `.cm-textfield` rules and the two for\n * `button[name=close]`. **`.cm-textfield` and `.cm-button` themselves stay**, unscoped, because\n * `gotoLine`'s dialog is still CodeMirror's own and because `codemirror-dark-parity.test.ts` reads\n * that list: they are what stands between a dark page and CodeMirror's `&light` white box.\n */\n\n/**\n * How a `Panel` is opened as React. `CodeEditor` owns the implementation because the portals have\n * to be children of its tree — a panel rendered from anywhere else loses the theme context, the\n * error boundary and every provider above it.\n */\nexport interface ReactPanelHost {\n  panel: (node: ReactNode, opts?: { top?: boolean }) => Panel;\n}\n\ninterface CodeSearchPanelProps {\n  view: EditorView;\n  /** Fires when the query or `readOnly` changed under us — see `kanzoSearch`. */\n  subscribe: (fn: () => void) => () => void;\n}\n\nconst CodeSearchPanel = (props: CodeSearchPanelProps) => {\n  const { view, subscribe } = props;\n\n  const [query, setQuery] = useState(() => getSearchQuery(view.state));\n  const [readOnly, setReadOnly] = useState(() => view.state.readOnly);\n  const searchField = useRef<HTMLInputElement>(null);\n  const replaceField = useRef<HTMLInputElement>(null);\n\n  // The query is not ours alone: Mod-F over a selection seeds it while the panel is already open,\n  // and `selectSelectionMatches` writes it too. Both arrive as a `setSearchQuery` effect.\n  useEffect(\n    () =>\n      subscribe(() => {\n        setQuery(getSearchQuery(view.state));\n        setReadOnly(view.state.readOnly);\n      }),\n    [subscribe, view]\n  );\n\n  // CodeMirror focuses the field itself only when the panel is REOPENED (it looks for\n  // `[main-field]`). On the first open it calls the panel's `mount()`, which runs before React has\n  // rendered anything into the element — so the first focus is ours.\n  useEffect(() => {\n    searchField.current?.select();\n  }, []);\n\n  const commit = (patch: Partial<ConstructorParameters<typeof SearchQuery>[0]>) => {\n    const next = new SearchQuery({\n      search: query.search,\n      caseSensitive: query.caseSensitive,\n      literal: query.literal,\n      regexp: query.regexp,\n      replace: query.replace,\n      wholeWord: query.wholeWord,\n      ...patch,\n    });\n    if (next.eq(query)) return;\n    setQuery(next);\n    view.dispatch({ effects: setSearchQuery.of(next) });\n  };\n\n  const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    // The panel is inside the editor but outside its `contenteditable`, so the editor's own key\n    // handling never sees these. `search-panel` is the scope `searchKeymap` registers for exactly\n    // this: Escape closes, Mod-G and F3 step, Mod-F refocuses.\n    if (runScopeHandlers(view, e.nativeEvent, \"search-panel\")) {\n      e.preventDefault();\n      return;\n    }\n    if (e.key !== \"Enter\") return;\n    if (e.target === searchField.current) {\n      e.preventDefault();\n      (e.shiftKey ? findPrevious : findNext)(view);\n    } else if (e.target === replaceField.current) {\n      e.preventDefault();\n      replaceNext(view);\n    }\n  };\n\n  return (\n    // Two rows on ONE grid, not two flex rows. The fields have to end on the same line and the\n    // clusters beside them have to start on it, and the two clusters are a different number of\n    // buttons — so that column has to be sized by the wider of them, which is what a shared grid\n    // track does and what a pair of flex rows cannot.\n    //\n    // `font-sans` is the point of the file: everything inside `.cm-editor` inherits the monospace\n    // stack, so a panel that says nothing renders its labels in code type.\n    <div\n      className=\"grid grid-cols-[1fr_auto_auto] items-center gap-1.5 p-1.5 font-sans\"\n      data-slot=\"code-editor-search\"\n      onKeyDown={onKeyDown}\n    >\n      <InputGroup size=\"sm\">\n        <InputGroupInput\n          aria-label=\"Find\"\n          main-field=\"true\"\n          onChange={(e) => commit({ search: e.currentTarget.value })}\n          placeholder=\"Find\"\n          ref={searchField}\n          size=\"sm\"\n          value={query.search}\n        />\n        <InputGroupAddon align=\"inline-end\">\n          <Toggle\n            aria-label=\"Match case\"\n            onPressedChange={(pressed) => commit({ caseSensitive: pressed })}\n            pressed={query.caseSensitive}\n            size=\"sm\"\n          >\n            <CaseSensitiveIcon />\n          </Toggle>\n          <Toggle\n            aria-label=\"Whole word\"\n            onPressedChange={(pressed) => commit({ wholeWord: pressed })}\n            pressed={query.wholeWord}\n            size=\"sm\"\n          >\n            <WholeWordIcon />\n          </Toggle>\n          <Toggle\n            aria-label=\"Regular expression\"\n            onPressedChange={(pressed) => commit({ regexp: pressed })}\n            pressed={query.regexp}\n            size=\"sm\"\n          >\n            <RegexIcon />\n          </Toggle>\n        </InputGroupAddon>\n      </InputGroup>\n      <ButtonGroup aria-label=\"Find\">\n        <Button\n          aria-label=\"Previous match\"\n          onClick={() => findPrevious(view)}\n          size=\"icon-lg\"\n          variant=\"outline\"\n        >\n          <ChevronUpIcon />\n        </Button>\n        <Button\n          aria-label=\"Next match\"\n          onClick={() => findNext(view)}\n          size=\"icon-lg\"\n          variant=\"outline\"\n        >\n          <ChevronDownIcon />\n        </Button>\n        <Button\n          aria-label=\"Select all matches\"\n          onClick={() => selectMatches(view)}\n          size=\"icon-lg\"\n          variant=\"outline\"\n        >\n          <TextSelectIcon />\n        </Button>\n      </ButtonGroup>\n      <Button\n        aria-label=\"Close\"\n        onClick={() => closeSearchPanel(view)}\n        size=\"icon-lg\"\n        variant=\"ghost\"\n      >\n        <XIcon />\n      </Button>\n      {/* A read-only document has nothing to replace, and CodeMirror's own panel drops the row\n          for the same reason. The third column stays empty on this row. */}\n      {!readOnly && (\n        <>\n          <InputGroup size=\"sm\">\n            <InputGroupInput\n              aria-label=\"Replace\"\n              onChange={(e) => commit({ replace: e.currentTarget.value })}\n              placeholder=\"Replace\"\n              ref={replaceField}\n              size=\"sm\"\n              value={query.replace}\n            />\n          </InputGroup>\n          <ButtonGroup aria-label=\"Replace\">\n            <Button\n              aria-label=\"Replace\"\n              onClick={() => replaceNext(view)}\n              size=\"icon-lg\"\n              variant=\"outline\"\n            >\n              <ReplaceIcon />\n            </Button>\n            <Button\n              aria-label=\"Replace all\"\n              onClick={() => replaceAll(view)}\n              size=\"icon-lg\"\n              variant=\"outline\"\n            >\n              <ReplaceAllIcon />\n            </Button>\n          </ButtonGroup>\n        </>\n      )}\n    </div>\n  );\n};\n\n/**\n * `@codemirror/search`, drawn by `CodeSearchPanel`.\n *\n * The `update` hook is the panel's only channel back into React: CodeMirror gives a `Panel` a\n * `ViewUpdate` on every transaction, and re-rendering the form on each keystroke of the document\n * would be absurd — so it compares the query and `readOnly` and notifies only when one of them\n * moved. `SearchQuery.eq` is what makes that cheap, and it is also what keeps our own\n * `setSearchQuery` from looping back through the component.\n */\nexport const kanzoSearch = (host: ReactPanelHost): Extension =>\n  search({\n    createPanel: (view) => {\n      const listeners = new Set<() => void>();\n      let query = getSearchQuery(view.state);\n      let readOnly = view.state.readOnly;\n\n      const panel = host.panel(\n        <CodeSearchPanel\n          subscribe={(fn) => {\n            listeners.add(fn);\n            return () => {\n              listeners.delete(fn);\n            };\n          }}\n          view={view}\n        />,\n        { top: true }\n      );\n\n      return {\n        ...panel,\n        update: (u) => {\n          const next = getSearchQuery(u.state);\n          if (next.eq(query) && u.state.readOnly === readOnly) return;\n          query = next;\n          readOnly = u.state.readOnly;\n          for (const fn of listeners) fn();\n        },\n      };\n    },\n  });\n"],"names":[],"mappings":";;;;;;;;;;AAsEA;AACE;AASA;AAAA;AAGM;AAC+B;AAChC;AACa;;AAOhB;AAAqB;AAGvB;AACE;AAA6B;AACb;AACO;AACN;AACD;AACC;AACE;AACd;AAEL;AAEkD;AAqBpD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQE;AAAC;AAAA;AACW;AACA;AAxBZ;AACE;AACA;AAAA;AAEF;AAMkB;AAEpB;AAeI;AACE;AAAA;AAAC;AAAA;AACY;AACA;AAC8C;AAC7C;AACP;AACA;AACQ;AAAA;AAAA;AAGb;AAAA;AAAC;AAAA;AACY;AACoD;AAChD;AACV;AAEc;AAAA;AAAA;AAErB;AAAC;AAAA;AACY;AACgD;AAC5C;AACV;AAEU;AAAA;AAAA;AAEjB;AAAC;AAAA;AACY;AAC6C;AACzC;AACV;AAEM;AAAA;AAAA;AAEf;AACF;AAEE;AAAA;AAAC;AAAA;AACY;AACqB;AAC3B;AACG;AAEO;AAAA;AAAA;AAEjB;AAAC;AAAA;AACY;AACiB;AACvB;AACG;AAES;AAAA;AAAA;AAEnB;AAAC;AAAA;AACY;AACsB;AAC5B;AACG;AAEQ;AAAA;AAAA;AAEpB;AACA;AAAC;AAAA;AACY;AACyB;AAC/B;AACG;AAED;AAAA;AAAA;AAML;AACE;AAAC;AAAA;AACY;AAC+C;AAC9C;AACP;AACA;AACQ;AAAA;AAEjB;AAEE;AAAA;AAAC;AAAA;AACY;AACoB;AAC1B;AACG;AAEK;AAAA;AAAA;AAEf;AAAC;AAAA;AACY;AACmB;AACzB;AACG;AAEQ;AAAA;AAAA;AAEpB;AACF;AAAA;AAAA;AAAA;AAIR;AAYS;AAEH;AACA;AAgBA;AAAO;AAbY;AACjB;AAAC;AAAA;AAIK;AAAmB;AACrB;AAEF;AAAA;AAAA;AAEK;AAAK;AAMV;AACA;AACA;AAEA;AAA4B;AAAA;AAC9B;AAAA;AAGN;;;;"}