@cloudflare/kumo 2.0.0 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudflare/kumo",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "private": false,
   "type": "module",
   "description": "Kumo - Cloudflare's component library for building modern web applications",

package/scripts/component-registry/index.test.ts

@@ -943,3 +943,45 @@ interface GroupProps extends BaseProps {
     expect(props).toEqual({});
   });
 });
+
+describe("SUB_COMPONENT_OVERRIDES", () => {
+  it("declares a Tooltip.Provider entry that passes through to TooltipBase.Provider", async () => {
+    const { SUB_COMPONENT_OVERRIDES, PASSTHROUGH_COMPONENT_DOCS } =
+      await import("./metadata.js");
+
+    expect(SUB_COMPONENT_OVERRIDES.Tooltip).toBeDefined();
+    const tooltipOverrides = SUB_COMPONENT_OVERRIDES.Tooltip;
+    expect(tooltipOverrides).toHaveLength(1);
+
+    const provider = tooltipOverrides[0];
+    expect(provider.name).toBe("Provider");
+    expect(provider.valueName).toBe("TooltipProvider");
+    expect(provider.isPassThrough).toBe(true);
+    expect(provider.baseComponent).toBe("TooltipBase.Provider");
+    expect(provider.propsType).toBeNull();
+
+    // The baseComponent must resolve to a documented passthrough entry so the
+    // merge + lookup path in index.ts produces real docs, not an empty stub.
+    expect(
+      PASSTHROUGH_COMPONENT_DOCS[provider.baseComponent as string],
+    ).toBeDefined();
+  });
+
+  it("entries have the same shape as detectSubComponents() results", async () => {
+    const { SUB_COMPONENT_OVERRIDES } = await import("./metadata.js");
+
+    for (const overrides of Object.values(SUB_COMPONENT_OVERRIDES)) {
+      for (const entry of overrides) {
+        // Required fields of SubComponentConfig.
+        expect(typeof entry.name).toBe("string");
+        expect(typeof entry.valueName).toBe("string");
+        expect(typeof entry.description).toBe("string");
+        expect(typeof entry.isPassThrough).toBe("boolean");
+        // propsType may be a string or null.
+        expect(
+          entry.propsType === null || typeof entry.propsType === "string",
+        ).toBe(true);
+      }
+    }
+  });
+});

package/scripts/component-registry/index.ts

@@ -44,6 +44,7 @@ import {
   createCacheEntry,
 } from "./cache.js";
 import {
+  toPascalCase,
   toScreamingSnakeCase,
   extractSemanticColors,
   extractBlockDependencies,
@@ -62,6 +63,7 @@ import {
   ADDITIONAL_COMPONENT_PROPS,
   PROP_TYPE_OVERRIDES,
   COMPONENT_STYLING_METADATA,
+  SUB_COMPONENT_OVERRIDES,
 } from "./metadata.js";
 
 // External imports - demo examples from kumo-docs-astro
@@ -585,11 +587,16 @@ async function processComponent(
   const colors = extractSemanticColors(sourcePath);
 
   // Determine examples
+  // Demo metadata keys are derived from file names (e.g. DropdownDemo.tsx → "Dropdown")
+  // which may differ from the component's export name (e.g. "DropdownMenu").
+  // Try the component name first, then fall back to the PascalCase directory name.
   let examples: readonly string[];
   if (config.examples !== undefined) {
     examples = config.examples;
   } else {
-    const extracted = input.storyExamples.get(config.name);
+    const extracted =
+      input.storyExamples.get(config.name) ??
+      input.storyExamples.get(toPascalCase(config.dirName));
     examples = extracted?.aiExamples ?? [];
     if (examples.length > 0 && CLI_FLAGS.verbose) {
       console.log(
@@ -598,14 +605,21 @@ async function processComponent(
     }
   }
 
-  // Detect and process sub-components
+  // Merge SUB_COMPONENT_OVERRIDES after source detection.
+  // Detected entries win on name conflict so source-level patterns aren't masked.
   const detectedSubComponents = detectSubComponents(sourcePath);
+  const subComponentOverrides = SUB_COMPONENT_OVERRIDES[config.name] ?? [];
+  const detectedNames = new Set(detectedSubComponents.map((sc) => sc.name));
+  const mergedSubComponents = [
+    ...detectedSubComponents,
+    ...subComponentOverrides.filter((o) => !detectedNames.has(o.name)),
+  ];
   let subComponentSchemas: Record<string, SubComponentSchema> | undefined;
 
-  if (detectedSubComponents.length > 0) {
+  if (mergedSubComponents.length > 0) {
     subComponentSchemas = {};
 
-    for (const subComp of detectedSubComponents) {
+    for (const subComp of mergedSubComponents) {
       let subProps = extractSubComponentProps(sourcePath, subComp, CLI_FLAGS);
       let description = subComp.description;
       let usageExamples: string[] | undefined;

package/scripts/component-registry/metadata.ts

@@ -8,7 +8,12 @@
  * - Styling metadata for Figma plugin
  */
 
-import type { PropSchema, PassthroughDoc, ComponentStyling } from "./types.js";
+import type {
+  PropSchema,
+  PassthroughDoc,
+  ComponentStyling,
+  SubComponentConfig,
+} from "./types.js";
 
 // =============================================================================
 // Pass-through Component Documentation
@@ -158,6 +163,66 @@ export const PASSTHROUGH_COMPONENT_DOCS: Record<string, PassthroughDoc> = {
 </Combobox.Collection>`,
     ],
   },
+
+  // Tooltip sub-components
+  "TooltipBase.Provider": {
+    description:
+      "Groups multiple tooltips so that after the first tooltip is shown, switching to another skips the open delay. Place once at your app root or layout.",
+    props: {
+      delay: {
+        type: "number",
+        description:
+          "How long to wait (ms) before opening a tooltip once the pointer enters the trigger.",
+        default: "600",
+      },
+      closeDelay: {
+        type: "number",
+        description: "How long to wait (ms) before closing a tooltip.",
+        default: "0",
+      },
+      timeout: {
+        type: "number",
+        description:
+          "Grace period (ms) during which a just-closed tooltip's delay is skipped when another tooltip opens.",
+        default: "400",
+      },
+    },
+    usageExamples: ["<TooltipProvider>\n  <App />\n</TooltipProvider>"],
+  },
+};
+
+// =============================================================================
+// Sub-Component Overrides
+// =============================================================================
+
+/**
+ * Manual sub-component entries that are merged into the registry alongside
+ * entries detected by `detectSubComponents()` in `sub-components.ts`.
+ *
+ * Use this when a component exposes a related API (e.g., a sibling named
+ * export like `TooltipProvider`) that we want documented as a sub-component
+ * (e.g., `Tooltip.Provider`) for the registry / docs, *without* changing the
+ * component's runtime shape (no `Object.assign`, no attached property).
+ *
+ * Detected sub-components take precedence over overrides with the same
+ * `name`, so a real source-level compound pattern will always win and
+ * prevent silent masking of detector regressions.
+ *
+ * Keyed by the parent component name (e.g., "Tooltip"). Values have the same
+ * shape as `detectSubComponents()` entries so they feed directly into the
+ * existing processing loop in `index.ts`.
+ */
+export const SUB_COMPONENT_OVERRIDES: Record<string, SubComponentConfig[]> = {
+  Tooltip: [
+    {
+      name: "Provider",
+      valueName: "TooltipProvider",
+      propsType: null,
+      description: "Provider sub-component (wraps TooltipBase)",
+      isPassThrough: true,
+      baseComponent: "TooltipBase.Provider",
+    },
+  ],
 };
 
 // =============================================================================
@@ -254,6 +319,161 @@ export const ADDITIONAL_COMPONENT_PROPS: Record<
       description: "Callback when collapsed state changes",
     },
   },
+  "DropdownMenu.Item": {
+    icon: {
+      type: "Icon | ReactNode",
+      description: "Icon displayed before the label.",
+    },
+    variant: {
+      type: '"default" | "danger"',
+      description: "Visual style of the item.",
+      default: '"default"',
+    },
+    selected: {
+      type: "boolean",
+      description: "Shows a check mark indicator when true.",
+    },
+    inset: {
+      type: "boolean",
+      description: "Adds left padding to align with items that have icons.",
+    },
+    onClick: {
+      type: "(event: React.MouseEvent) => void",
+      description: "Callback when the item is clicked.",
+    },
+    closeOnClick: {
+      type: "boolean",
+      description: "Whether the menu closes after clicking this item.",
+      default: "true",
+    },
+    disabled: {
+      type: "boolean",
+      description: "When true, the item cannot be interacted with.",
+    },
+  },
+  "DropdownMenu.LinkItem": {
+    href: {
+      type: "string",
+      description: "URL to navigate to when clicked.",
+    },
+    icon: {
+      type: "Icon | ReactNode",
+      description: "Icon displayed before the label.",
+    },
+    variant: {
+      type: '"default" | "danger"',
+      description: "Visual style of the item.",
+      default: '"default"',
+    },
+    inset: {
+      type: "boolean",
+      description: "Adds left padding to align with items that have icons.",
+    },
+    target: {
+      type: "string",
+      description: 'Link target attribute (e.g. "_blank" for new tab).',
+    },
+    render: {
+      type: "ReactElement | ((props, state) => ReactElement)",
+      description:
+        "Custom element to render as the link. Use to integrate with framework routers (e.g. Next.js Link).",
+    },
+  },
+  "DropdownMenu.Content": {
+    sideOffset: {
+      type: "number",
+      description: "Distance in pixels from the trigger.",
+      default: "8",
+    },
+    container: {
+      type: "PortalContainer",
+      description:
+        "Container element for the portal. Use this to render inside a Shadow DOM or custom container.",
+    },
+  },
+  "DropdownMenu.SubTrigger": {
+    icon: {
+      type: "Icon",
+      description: "Icon displayed before the label.",
+    },
+    inset: {
+      type: "boolean",
+      description: "Adds left padding to align with items that have icons.",
+    },
+  },
+  "DropdownMenu.CheckboxItem": {
+    checked: {
+      type: "boolean",
+      description: "Whether the item is checked.",
+    },
+    defaultChecked: {
+      type: "boolean",
+      description: "Whether the item is initially checked (uncontrolled).",
+      default: "false",
+    },
+    onCheckedChange: {
+      type: "(checked: boolean, event: ChangeEventDetails) => void",
+      description: "Callback when the checked state changes.",
+    },
+    closeOnClick: {
+      type: "boolean",
+      description: "Whether the menu closes after clicking this item.",
+      default: "false",
+    },
+    disabled: {
+      type: "boolean",
+      description: "When true, the item cannot be interacted with.",
+    },
+  },
+  "DropdownMenu.RadioGroup": {
+    value: {
+      type: "any",
+      description:
+        "The controlled value of the currently selected radio item.",
+    },
+    defaultValue: {
+      type: "any",
+      description: "The initially selected value (uncontrolled).",
+    },
+    onValueChange: {
+      type: "(value: any, event: ChangeEventDetails) => void",
+      description: "Callback when the selected value changes.",
+    },
+    disabled: {
+      type: "boolean",
+      description: "When true, all radio items in the group are disabled.",
+    },
+  },
+  "DropdownMenu.RadioItem": {
+    value: {
+      type: "any",
+      required: true,
+      description: "The value of this radio item.",
+    },
+    icon: {
+      type: "Icon | ReactNode",
+      description: "Icon displayed before the label.",
+    },
+    inset: {
+      type: "boolean",
+      description: "Adds left padding to align with items that have icons.",
+    },
+    closeOnClick: {
+      type: "boolean",
+      description: "Whether the menu closes after clicking this item.",
+      default: "false",
+    },
+    disabled: {
+      type: "boolean",
+      description: "When true, the item cannot be interacted with.",
+    },
+  },
+  "DropdownMenu.Label": {
+    inset: {
+      type: "boolean",
+      description: "Adds left padding to align with items that have icons.",
+    },
+  },
   "InputGroup.Addon": {
     align: {
       type: '"start" | "end"',
@@ -420,7 +640,7 @@ export const COMPONENT_STYLING_METADATA: Record<string, ComponentStyling> = {
     ],
   },
   Code: {
-    baseTokens: ["text-kumo-strong"],
+    baseTokens: ["text-kumo-subtle"],
     dimensions: "m-0 w-auto p-0",
     borderRadius: "rounded-none",
     states: {

package/scripts/theme-generator/config.ts

@@ -43,8 +43,8 @@ export const THEME_CONFIG: ThemeConfig = {
       newName: "",
       theme: {
         kumo: {
-          light: "var(--color-neutral-600, oklch(43.9% 0 0))",
-          dark: "var(--color-neutral-400, oklch(70.8% 0 0))",
+          light: "var(--color-neutral-950, oklch(14.5% 0 0))", // darker than default
+          dark: "var(--color-neutral-50, oklch(98.5% 0 0))", // lighter than default
         },
       },
     },
@@ -52,8 +52,8 @@ export const THEME_CONFIG: ThemeConfig = {
       newName: "",
       theme: {
         kumo: {
-          light: "var(--color-neutral-500, oklch(55.6% 0 0))",
-          dark: "var(--color-neutral-400, oklch(70.8% 0 0))",
+          light: "var(--color-neutral-500, oklch(55.6% 0 0))", // lighter than default
+          dark: "var(--color-neutral-400, oklch(70.8% 0 0))", // darker than default
         },
       },
     },
@@ -61,17 +61,17 @@ export const THEME_CONFIG: ThemeConfig = {
       newName: "",
       theme: {
         kumo: {
-          light: "var(--color-neutral-400, oklch(70.8% 0 0))",
-          dark: "var(--color-neutral-600, oklch(70.8% 0 0))",
+          light: "var(--color-neutral-300, oklch(87% 0 0))", // lighter than subtle
+          dark: "var(--color-neutral-600, oklch(43.9% 0 0))", // darker than subtle
         },
       },
     },
-    "kumo-placeholder": {
+    "kumo-placeholder": { // in between subtle and inactive
       newName: "",
       theme: {
         kumo: {
           light: "var(--color-neutral-400, oklch(70.8% 0 0))",
-          dark: "var(--color-neutral-500, oklch(55.6% 0 0))",
+          dark: "var(--color-neutral-500, oklch(55.6% 0 0))", 
         },
       },
     },
@@ -323,7 +323,7 @@ export const THEME_CONFIG: ThemeConfig = {
         kumo: {
           light: "var(--color-kumo-neutral-150, oklch(93.5% 0 0))",
           dark: "var(--color-neutral-800, oklch(26.9% 0 0))",
-        },
+      },
         fedramp: {
           light: "#c8d4e5",
           dark: "#c8d4e5",

package/dist/chunks/input-lpa5fc75tgrraafv.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input-lpa5fc75tgrraafv.js","sources":["../../src/components/input/input.tsx"],"sourcesContent":["import { cn } from \"../../utils/cn\";\nimport {\n  forwardRef,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\nimport { Input as BaseInput } from \"@base-ui/react/input\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Input size and variant definitions mapping names to their Tailwind classes. */\nexport const KUMO_INPUT_VARIANTS = {\n  size: {\n    xs: {\n      classes: \"h-5 gap-1 rounded-sm px-1.5 text-xs\",\n      description: \"Extra small input for compact UIs\",\n    },\n    sm: {\n      classes: \"h-6.5 gap-1 rounded-md px-2 text-xs\",\n      description: \"Small input for secondary fields\",\n    },\n    base: {\n      classes: \"h-9 gap-1.5 rounded-lg px-3 text-base\",\n      description: \"Default input size\",\n    },\n    lg: {\n      classes: \"h-10 gap-2 rounded-lg px-4 text-base\",\n      description: \"Large input for prominent fields\",\n    },\n  },\n  variant: {\n    default: {\n      classes: \"focus:ring-kumo-focus/50 focus:ring-[1.5px]\",\n      description: \"Default input appearance\",\n    },\n    error: {\n      classes: \"!ring-kumo-danger focus:ring-kumo-danger/50 focus:ring-[1.5px]\",\n      description: \"Error state for validation failures\",\n    },\n  },\n} as const;\n\nexport const KUMO_INPUT_DEFAULT_VARIANTS = {\n  size: \"base\",\n  variant: \"default\",\n} as const;\n\nexport const KUMO_INPUT_STYLING = {\n  dimensions: {\n    xs: { height: 20, paddingX: 6, fontSize: 12, borderRadius: 2, width: 160 },\n    sm: { height: 26, paddingX: 8, fontSize: 12, borderRadius: 6, width: 200 },\n    base: {\n      height: 36,\n      paddingX: 12,\n      fontSize: 16,\n      borderRadius: 8,\n      width: 280,\n    },\n    lg: { height: 40, paddingX: 16, fontSize: 16, borderRadius: 8, width: 320 },\n  },\n  baseTokens: {\n    background: \"color-secondary\",\n    text: \"text-color-surface\",\n    placeholder: \"text-color-muted\",\n    ring: \"color-border\",\n  },\n  stateTokens: {\n    focus: { ring: \"color-active\" },\n    error: { ring: \"color-error\" },\n    disabled: { opacity: 0.5, text: \"text-color-muted\" },\n  },\n} as const;\n\n// Derived types from KUMO_INPUT_VARIANTS\nexport type KumoInputSize = keyof typeof KUMO_INPUT_VARIANTS.size;\nexport type KumoInputVariant = keyof typeof KUMO_INPUT_VARIANTS.variant;\n\nexport interface KumoInputVariantsProps {\n  /**\n   * Input size.\n   * - `\"xs\"` — Extra small for compact UIs\n   * - `\"sm\"` — Small for secondary fields\n   * - `\"base\"` — Default size\n   * - `\"lg\"` — Large for prominent fields\n   * @default \"base\"\n   */\n  size?: KumoInputSize;\n  /**\n   * Visual variant.\n   * - `\"default\"` — Standard input\n   * - `\"error\"` — Error state for validation failures\n   * @default \"default\"\n   */\n  variant?: KumoInputVariant;\n  parentFocusIndicator?: boolean;\n  focusIndicator?: boolean;\n}\n\n// Omit native `size` attribute (number) to avoid conflict with our custom `size` variant\ntype BaseInputProps = Omit<ComponentPropsWithoutRef<typeof BaseInput>, \"size\">;\n\nexport function inputVariants({\n  variant = KUMO_INPUT_DEFAULT_VARIANTS.variant,\n  size = KUMO_INPUT_DEFAULT_VARIANTS.size,\n  parentFocusIndicator = false,\n  focusIndicator = false,\n}: KumoInputVariantsProps = {}) {\n  return cn(\n    // Base styles\n    \"border-0 bg-kumo-control text-kumo-default ring ring-kumo-line outline-none focus:outline-none\",\n    // Disabled state and placeholder styles (using vanilla CSS class for Chrome compatibility)\n    \"kumo-input-placeholder disabled:text-kumo-subtle\",\n    // Apply size styles from KUMO_INPUT_VARIANTS\n    KUMO_INPUT_VARIANTS.size[size].classes,\n    // Apply variant styles from KUMO_INPUT_VARIANTS\n    KUMO_INPUT_VARIANTS.variant[variant].classes,\n    // Focus state handling\n    parentFocusIndicator &&\n      (variant === \"error\"\n        ? \"focus-within:ring-kumo-danger/50 focus-within:ring-[1.5px]\"\n        : \"focus-within:ring-kumo-focus/50 focus-within:ring-[1.5px]\"),\n    focusIndicator &&\n      (variant === \"error\"\n        ? \"focus:ring-kumo-danger/50 focus:ring-[1.5px]\"\n        : \"focus:ring-kumo-focus/50 focus:ring-[1.5px]\"),\n  );\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {\n  const {\n    className,\n    size = \"base\",\n    variant: variantProp,\n    label,\n    labelTooltip,\n    description,\n    error,\n    ...inputProps\n  } = props;\n\n  // Deprecation warning for variant=\"error\"\n  if (process.env.NODE_ENV !== \"production\" && variantProp === \"error\") {\n    console.warn(\n      '[Kumo Input]: variant=\"error\" is deprecated. ' +\n        \"Error styling is now automatically applied when the `error` prop is truthy. \" +\n        \"Simply remove the variant prop and pass an error message instead.\",\n    );\n  }\n\n  // Auto-apply error styling when error prop is truthy\n  // Explicit variant prop takes precedence for backwards compatibility\n  const variant = variantProp ?? (error ? \"error\" : \"default\");\n\n  // Extract required from inputProps to pass to Field for label decoration\n  const { required } = inputProps;\n\n  // A11y enforcement: warn in dev if no accessible name provided\n  if (process.env.NODE_ENV !== \"production\") {\n    const hasLabel = Boolean(label);\n    const hasAriaLabel = Boolean(inputProps[\"aria-label\"]);\n    const hasAriaLabelledBy = Boolean(inputProps[\"aria-labelledby\"]);\n\n    if (!hasLabel && !hasAriaLabel && !hasAriaLabelledBy) {\n      console.warn(\n        \"[Kumo Input]: Input must have an accessible name. Provide either:\\n\" +\n          \"  - label prop: <Input label='Email' />\\n\" +\n          \"  - aria-label: <Input aria-label='Email address' />\\n\" +\n          \"  - aria-labelledby for custom label association\",\n      );\n    }\n  }\n\n  const input = (\n    <BaseInput\n      ref={ref}\n      className={cn(\n        inputVariants({ size, variant, focusIndicator: true }),\n        className,\n      )}\n      {...inputProps}\n    />\n  );\n\n  // Render with Field wrapper if label is provided\n  if (label) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {input}\n      </Field>\n    );\n  }\n\n  // Render bare input without Field wrapper\n  return input;\n});\n\nInput.displayName = \"Input\";\n\n/**\n * Input component props with accessibility guidance.\n *\n * **Accessible Name Required:** Input should have one of:\n * 1. `label` prop (recommended) - enables Field wrapper with label/description/error\n * 2. `placeholder` + `aria-label` - for bare inputs with visual placeholder\n * 3. `aria-labelledby` - for custom label association\n *\n * Missing accessible names will trigger console warnings in development.\n *\n * @example\n * // Recommended: Built-in Field wrapper\n * <Input label=\"Email\" placeholder=\"you@example.com\" />\n *\n * @example\n * // Bare input with placeholder and aria-label\n * <Input placeholder=\"Search...\" aria-label=\"Search products\" />\n *\n * @example\n * // Custom label association\n * <label id=\"email-label\">Email</label>\n * <Input aria-labelledby=\"email-label\" />\n *\n * @example\n * // With description and error\n * <Input\n *   label=\"Password\"\n *   description=\"Must be at least 8 characters\"\n *   error=\"Password is too short\"\n * />\n */\nexport type InputProps = Pick<KumoInputVariantsProps, \"size\" | \"variant\"> &\n  BaseInputProps & {\n    /** Label content for the input (enables Field wrapper) - can be a string or any React node */\n    label?: ReactNode;\n    /** Tooltip content to display next to the label via an info icon */\n    labelTooltip?: ReactNode;\n    /** Helper text displayed below the input */\n    description?: ReactNode;\n    /** Error message or validation error object */\n    error?: string | { message: ReactNode; match: FieldErrorMatch };\n  };\n"],"names":["KUMO_INPUT_VARIANTS","KUMO_INPUT_DEFAULT_VARIANTS","inputVariants","variant","size","parentFocusIndicator","focusIndicator","cn","Input","forwardRef","props","ref","className","variantProp","label","labelTooltip","description","error","inputProps","required","hasLabel","hasAriaLabel","hasAriaLabelledBy","input","jsx","BaseInput","Field"],"mappings":";;;;;;AAUO,MAAMA,IAAsB;AAAA,EACjC,MAAM;AAAA,IACJ,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,IAAI;AAAA,MACF,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,SAAS;AAAA,IACP,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,IAEf,OAAO;AAAA,MACL,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaC,IAA8B;AAAA,EACzC,MAAM;AAAA,EACN,SAAS;AACX;AAwDO,SAASC,EAAc;AAAA,EAC5B,SAAAC,IAAUF,EAA4B;AAAA,EACtC,MAAAG,IAAOH,EAA4B;AAAA,EACnC,sBAAAI,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AACnB,IAA4B,IAAI;AAC9B,SAAOC;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEAP,EAAoB,KAAKI,CAAI,EAAE;AAAA;AAAA,IAE/BJ,EAAoB,QAAQG,CAAO,EAAE;AAAA;AAAA,IAErCE,MACGF,MAAY,UACT,+DACA;AAAA,IACNG,MACGH,MAAY,UACT,iDACA;AAAA,EAAA;AAEV;AAEO,MAAMK,IAAQC,EAAyC,CAACC,GAAOC,MAAQ;AAC5E,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,MAAAR,IAAO;AAAA,IACP,SAASS;AAAA,IACT,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AAGJ,EAAI,QAAQ,IAAI,aAAa,gBAAgBG,MAAgB,WAC3D,QAAQ;AAAA,IACN;AAAA,EAAA;AAQJ,QAAMV,IAAUU,MAAgBI,IAAQ,UAAU,YAG5C,EAAE,UAAAE,MAAaD;AAGrB,MAAI,QAAQ,IAAI,aAAa,cAAc;AACzC,UAAME,IAAW,EAAQN,GACnBO,IAAe,EAAQH,EAAW,YAAY,GAC9CI,IAAoB,EAAQJ,EAAW,iBAAiB;AAE9D,IAAI,CAACE,KAAY,CAACC,KAAgB,CAACC,KACjC,QAAQ;AAAA,MACN;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAMN;AAEA,QAAMC,IACJ,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAd;AAAA,MACA,WAAWJ;AAAA,QACTL,EAAc,EAAE,MAAAE,GAAM,SAAAD,GAAS,gBAAgB,IAAM;AAAA,QACrDS;AAAA,MAAA;AAAA,MAED,GAAGM;AAAA,IAAA;AAAA,EAAA;AAKR,SAAIJ,IAEA,gBAAAU;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,OAAAZ;AAAA,MACA,UAAAK;AAAA,MACA,cAAAJ;AAAA,MACA,aAAAC;AAAA,MACA,OACEC,IACI,OAAOA,KAAU,WACf,EAAE,SAASA,GAAO,OAAO,GAAA,IACzBA,IACF;AAAA,MAGL,UAAAM;AAAA,IAAA;AAAA,EAAA,IAMAA;AACT,CAAC;AAEDf,EAAM,cAAc;"}