@tomny-dev/uzi 0.7.1 → 0.8.0-pr.85.286.1.ccec3e4

package/dist/index27.js.map

@@ -1 +1 @@
-{"version":3,"file":"index27.js","names":[],"sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./multi-select.module.css\";\n\nexport type MultiSelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  /** Optional decorative leading visual. The label remains the accessible option name. */\n  icon?: React.ReactElement;\n};\n\nexport type MultiSelectProps = {\n  options: MultiSelectOption[];\n  value: string[];\n  onChange: (value: string[]) => void;\n  placeholder?: string;\n  fullWidth?: boolean;\n  maxVisibleValues?: number;\n  /** Formats the closed trigger text from the selected options, including an empty selection. */\n  formatValue?: (selected: MultiSelectOption[]) => string;\n  /** Shows Select all and Clear all actions. Bulk actions modify enabled options only. */\n  bulkActions?: boolean;\n  selectAllLabel?: string;\n  /** Label for clearing all enabled selections. Disabled selected options remain selected. */\n  clearAllLabel?: string;\n  className?: string;\n  disabled?: boolean;\n  name?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n};\n\nexport const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(\n  (\n    {\n      options,\n      value,\n      onChange,\n      placeholder = \"Select options\",\n      fullWidth = true,\n      maxVisibleValues = 2,\n      formatValue,\n      bulkActions = false,\n      selectAllLabel = \"Select all\",\n      clearAllLabel,\n      className,\n      disabled = false,\n      name,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n    },\n    ref,\n  ) => {\n    const selectedSet = React.useMemo(() => new Set(value), [value]);\n    const selectedOptions = React.useMemo(\n      () => options.filter((opt) => selectedSet.has(opt.value)),\n      [options, selectedSet],\n    );\n\n    const enabledValues = React.useMemo(\n      () => options.filter((option) => !option.disabled).map((option) => option.value),\n      [options],\n    );\n    const allEnabledSelected =\n      enabledValues.length > 0 && enabledValues.every((entry) => selectedSet.has(entry));\n    const hasDisabledOptions = options.some((option) => option.disabled);\n    const resolvedClearAllLabel =\n      clearAllLabel ?? (hasDisabledOptions ? \"Clear enabled\" : \"Clear all\");\n\n    const formattedValue = React.useMemo(\n      () => formatValue?.(selectedOptions),\n      [formatValue, selectedOptions],\n    );\n\n    const toggleValue = React.useCallback(\n      (nextValue: string) => {\n        if (selectedSet.has(nextValue)) {\n          onChange(value.filter((entry) => entry !== nextValue));\n          return;\n        }\n\n        onChange([...value, nextValue]);\n      },\n      [onChange, selectedSet, value],\n    );\n\n    const visibleCount = Math.max(1, maxVisibleValues);\n    const visibleOptions = selectedOptions.slice(0, visibleCount);\n    const overflowCount = Math.max(\n      0,\n      selectedOptions.length - visibleOptions.length,\n    );\n\n    return (\n      <DropdownMenuPrimitive.Root modal={false}>\n        <div\n          className={cx(\n            styles.wrapper,\n            fullWidth && styles.wrapperFullWidth,\n            className,\n          )}\n        >\n          <DropdownMenuPrimitive.Trigger asChild>\n            <button\n              ref={ref}\n              type=\"button\"\n              className={styles.trigger}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledBy}\n              disabled={disabled}\n            >\n              <span className={styles.value}>\n                {formatValue ? (\n                  <span className={styles.summary}>{formattedValue}</span>\n                ) : selectedOptions.length === 0 ? (\n                  <span className={styles.placeholder}>{placeholder}</span>\n                ) : (\n                  <>\n                    {visibleOptions.map((option) => (\n                      <span key={option.value} className={styles.chip}>\n                        {option.icon ? <span className={styles.optionIcon} aria-hidden=\"true\">{option.icon}</span> : null}\n                        {option.label}\n                      </span>\n                    ))}\n                    {overflowCount > 0 ? (\n                      <span className={cx(styles.chip, styles.chipSummary)}>\n                        +{overflowCount}\n                      </span>\n                    ) : null}\n                  </>\n                )}\n              </span>\n              <span className={styles.chevron} aria-hidden=\"true\">\n                <svg\n                  viewBox=\"0 0 10 10\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"10\"\n                  height=\"10\"\n                >\n                  <path\n                    d=\"M2 3.5L5 6.5L8 3.5\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"1.5\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                  />\n                </svg>\n              </span>\n            </button>\n          </DropdownMenuPrimitive.Trigger>\n\n          {name\n            ? value.map((entry) => (\n                <input key={entry} type=\"hidden\" name={name} value={entry} />\n              ))\n            : null}\n\n          <DropdownMenuPrimitive.Portal>\n            <DropdownMenuPrimitive.Content\n              className={styles.menu}\n              sideOffset={4}\n              align=\"start\"\n            >\n              {bulkActions && enabledValues.length > 0 ? (\n                <>\n                  <DropdownMenuPrimitive.Item\n                    className={styles.bulkAction}\n                    disabled={allEnabledSelected}\n                    onSelect={(event) => {\n                      event.preventDefault();\n                      onChange([...value, ...enabledValues.filter((entry) => !selectedSet.has(entry))]);\n                    }}\n                  >\n                    {selectAllLabel}\n                  </DropdownMenuPrimitive.Item>\n                  <DropdownMenuPrimitive.Item\n                    className={styles.bulkAction}\n                    disabled={!enabledValues.some((entry) => selectedSet.has(entry))}\n                    onSelect={(event) => {\n                      event.preventDefault();\n                      const enabledSet = new Set(enabledValues);\n                      onChange(value.filter((entry) => !enabledSet.has(entry)));\n                    }}\n                  >\n                    {resolvedClearAllLabel}\n                  </DropdownMenuPrimitive.Item>\n                </>\n              ) : null}\n              {bulkActions && enabledValues.length > 0 ? (\n                <DropdownMenuPrimitive.Separator className={styles.separator} />\n              ) : null}\n              {options.map((option) => {\n                const selected = selectedSet.has(option.value);\n\n                return (\n                  <DropdownMenuPrimitive.CheckboxItem\n                    key={option.value}\n                    className={cx(\n                      styles.option,\n                      selected && styles.optionSelected,\n                      option.disabled && styles.optionDisabled,\n                    )}\n                    checked={selected}\n                    disabled={option.disabled}\n                    onCheckedChange={() => toggleValue(option.value)}\n                    onSelect={(event) => event.preventDefault()}\n                  >\n                    <span\n                      className={cx(\n                        styles.indicator,\n                        selected && styles.indicatorSelected,\n                        option.disabled && styles.indicatorDisabled,\n                      )}\n                      aria-hidden=\"true\"\n                    >\n                      <DropdownMenuPrimitive.ItemIndicator forceMount>\n                        <svg\n                          viewBox=\"0 0 16 16\"\n                          width=\"16\"\n                          height=\"16\"\n                          fill=\"none\"\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                          <path\n                            d=\"M3.5 8.5 6.5 11.5 12.5 4.5\"\n                            stroke=\"currentColor\"\n                            strokeWidth=\"1.8\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                          />\n                        </svg>\n                      </DropdownMenuPrimitive.ItemIndicator>\n                    </span>\n                    <span className={styles.optionLabel}>\n                          {option.icon ? <span className={styles.optionIcon} aria-hidden=\"true\">{option.icon}</span> : null}\n                          {option.label}\n                        </span>\n                  </DropdownMenuPrimitive.CheckboxItem>\n                );\n              })}\n            </DropdownMenuPrimitive.Content>\n          </DropdownMenuPrimitive.Portal>\n        </div>\n      </DropdownMenuPrimitive.Root>\n    );\n  },\n);\n\nMultiSelect.displayName = \"MultiSelect\";\n"],"mappings":"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"}
+{"version":3,"file":"index27.js","names":[],"sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./multi-select.module.css\";\n\nexport type MultiSelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  /** Optional decorative leading visual. The label remains the accessible option name. */\n  icon?: React.ReactElement;\n};\n\nexport type MultiSelectProps = {\n  options: MultiSelectOption[];\n  value: string[];\n  onChange: (value: string[]) => void;\n  placeholder?: string;\n  fullWidth?: boolean;\n  maxVisibleValues?: number;\n  /** Formats the closed trigger text from the selected options, including an empty selection. */\n  formatValue?: (selected: MultiSelectOption[]) => string;\n  /** Shows Select all and Clear all actions. Bulk actions modify enabled options only. */\n  bulkActions?: boolean;\n  /** Stage changes until Apply. Cancel/dismiss discards the draft. */\n  draftMode?: boolean;\n  minSelected?: number;\n  selectAllLabel?: string;\n  /** Label for clearing all enabled selections. Disabled selected options remain selected. */\n  clearAllLabel?: string;\n  className?: string;\n  disabled?: boolean;\n  name?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n};\n\nexport const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(\n  (\n    {\n      options,\n      value,\n      onChange,\n      placeholder = \"Select options\",\n      fullWidth = true,\n      maxVisibleValues = 2,\n      formatValue,\n      bulkActions = false,\n      draftMode = false,\n      minSelected = 0,\n      selectAllLabel = \"Select all\",\n      clearAllLabel,\n      className,\n      disabled = false,\n      name,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n    },\n    ref,\n  ) => {\n    const [open, setOpen] = React.useState(false);\n    const [draft, setDraft] = React.useState<string[]>(value);\n    const editValue = draftMode && open ? draft : value;\n    const updateSelection = (next: string[]) => {\n      if (draftMode) setDraft(next);\n      else if (next.length >= minSelected) onChange(next);\n    };\n    const selectedSet = React.useMemo(() => new Set(editValue), [editValue]);\n    const selectedOptions = React.useMemo(\n      () => options.filter((opt) => value.includes(opt.value)),\n      [options, value],\n    );\n\n    const enabledValues = React.useMemo(\n      () => options.filter((option) => !option.disabled).map((option) => option.value),\n      [options],\n    );\n    const allEnabledSelected =\n      enabledValues.length > 0 && enabledValues.every((entry) => selectedSet.has(entry));\n    const hasDisabledOptions = options.some((option) => option.disabled);\n    const resolvedClearAllLabel =\n      clearAllLabel ?? (hasDisabledOptions ? \"Clear enabled\" : \"Clear all\");\n\n    const formattedValue = React.useMemo(\n      () => formatValue?.(selectedOptions),\n      [formatValue, selectedOptions],\n    );\n\n    const toggleValue = React.useCallback(\n      (nextValue: string) => {\n        if (selectedSet.has(nextValue)) {\n          updateSelection(editValue.filter((entry) => entry !== nextValue));\n          return;\n        }\n\n        updateSelection([...editValue, nextValue]);\n      },\n      [updateSelection, selectedSet, editValue],\n    );\n\n    const visibleCount = Math.max(1, maxVisibleValues);\n    const visibleOptions = selectedOptions.slice(0, visibleCount);\n    const overflowCount = Math.max(\n      0,\n      selectedOptions.length - visibleOptions.length,\n    );\n\n    return (\n      <DropdownMenuPrimitive.Root modal={false} open={open} onOpenChange={(next) => {\n        if (next) setDraft([...value]);\n        setOpen(next);\n      }}>\n        <div\n          className={cx(\n            styles.wrapper,\n            fullWidth && styles.wrapperFullWidth,\n            className,\n          )}\n        >\n          <DropdownMenuPrimitive.Trigger asChild>\n            <button\n              ref={ref}\n              type=\"button\"\n              className={styles.trigger}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledBy}\n              disabled={disabled}\n            >\n              <span className={styles.value}>\n                {formatValue ? (\n                  <span className={styles.summary}>{formattedValue}</span>\n                ) : selectedOptions.length === 0 ? (\n                  <span className={styles.placeholder}>{placeholder}</span>\n                ) : (\n                  <>\n                    {visibleOptions.map((option) => (\n                      <span key={option.value} className={styles.chip}>\n                        {option.icon ? <span className={styles.optionIcon} aria-hidden=\"true\">{option.icon}</span> : null}\n                        {option.label}\n                      </span>\n                    ))}\n                    {overflowCount > 0 ? (\n                      <span className={cx(styles.chip, styles.chipSummary)}>\n                        +{overflowCount}\n                      </span>\n                    ) : null}\n                  </>\n                )}\n              </span>\n              <span className={styles.chevron} aria-hidden=\"true\">\n                <svg\n                  viewBox=\"0 0 10 10\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"10\"\n                  height=\"10\"\n                >\n                  <path\n                    d=\"M2 3.5L5 6.5L8 3.5\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"1.5\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                  />\n                </svg>\n              </span>\n            </button>\n          </DropdownMenuPrimitive.Trigger>\n\n          {name\n            ? value.map((entry) => (\n                <input key={entry} type=\"hidden\" name={name} value={entry} />\n              ))\n            : null}\n\n          <DropdownMenuPrimitive.Portal>\n            <DropdownMenuPrimitive.Content\n              className={styles.menu}\n              sideOffset={4}\n              align=\"start\"\n            >\n              {bulkActions && enabledValues.length > 0 ? (\n                <>\n                  <DropdownMenuPrimitive.Item\n                    className={styles.bulkAction}\n                    disabled={allEnabledSelected}\n                    onSelect={(event) => {\n                      event.preventDefault();\n                      updateSelection([...editValue, ...enabledValues.filter((entry) => !selectedSet.has(entry))]);\n                    }}\n                  >\n                    {selectAllLabel}\n                  </DropdownMenuPrimitive.Item>\n                  <DropdownMenuPrimitive.Item\n                    className={styles.bulkAction}\n                    disabled={!enabledValues.some((entry) => selectedSet.has(entry))}\n                    onSelect={(event) => {\n                      event.preventDefault();\n                      const enabledSet = new Set(enabledValues);\n                      updateSelection(editValue.filter((entry) => !enabledSet.has(entry)));\n                    }}\n                  >\n                    {resolvedClearAllLabel}\n                  </DropdownMenuPrimitive.Item>\n                </>\n              ) : null}\n              {bulkActions && enabledValues.length > 0 ? (\n                <DropdownMenuPrimitive.Separator className={styles.separator} />\n              ) : null}\n              {options.map((option) => {\n                const selected = selectedSet.has(option.value);\n\n                return (\n                  <DropdownMenuPrimitive.CheckboxItem\n                    key={option.value}\n                    className={cx(\n                      styles.option,\n                      selected && styles.optionSelected,\n                      option.disabled && styles.optionDisabled,\n                    )}\n                    checked={selected}\n                    disabled={option.disabled}\n                    onCheckedChange={() => toggleValue(option.value)}\n                    onSelect={(event) => event.preventDefault()}\n                  >\n                    <span\n                      className={cx(\n                        styles.indicator,\n                        selected && styles.indicatorSelected,\n                        option.disabled && styles.indicatorDisabled,\n                      )}\n                      aria-hidden=\"true\"\n                    >\n                      <DropdownMenuPrimitive.ItemIndicator forceMount>\n                        <svg\n                          viewBox=\"0 0 16 16\"\n                          width=\"16\"\n                          height=\"16\"\n                          fill=\"none\"\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                          <path\n                            d=\"M3.5 8.5 6.5 11.5 12.5 4.5\"\n                            stroke=\"currentColor\"\n                            strokeWidth=\"1.8\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                          />\n                        </svg>\n                      </DropdownMenuPrimitive.ItemIndicator>\n                    </span>\n                    <span className={styles.optionLabel}>\n                          {option.icon ? <span className={styles.optionIcon} aria-hidden=\"true\">{option.icon}</span> : null}\n                          {option.label}\n                        </span>\n                  </DropdownMenuPrimitive.CheckboxItem>\n                );\n              })}\n              {draftMode ? (\n                <div className={styles.draftActions}>\n                  <button type=\"button\" className={styles.draftButton} onClick={() => setOpen(false)}>Cancel</button>\n                  <button type=\"button\" className={styles.draftButton} disabled={editValue.length < minSelected} onClick={() => {\n                    onChange(editValue);\n                    setOpen(false);\n                  }}>Apply</button>\n                </div>\n              ) : null}\n            </DropdownMenuPrimitive.Content>\n          </DropdownMenuPrimitive.Portal>\n        </div>\n      </DropdownMenuPrimitive.Root>\n    );\n  },\n);\n\nMultiSelect.displayName = \"MultiSelect\";\n"],"mappings":"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"}

package/dist/index28.cjs

@@ -8,9 +8,16 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let _radix_ui_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 _radix_ui_react_dropdown_menu = require_runtime.__toESM(_radix_ui_react_dropdown_menu, 1);
 //#region src/components/multi-select/MultiSelect.tsx
-var MultiSelect = react.forwardRef(({ options, value, onChange, placeholder = "Select options", fullWidth = true, maxVisibleValues = 2, formatValue, bulkActions = false, selectAllLabel = "Select all", clearAllLabel, className, disabled = false, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, ref) => {
-	const selectedSet = react.useMemo(() => new Set(value), [value]);
-	const selectedOptions = react.useMemo(() => options.filter((opt) => selectedSet.has(opt.value)), [options, selectedSet]);
+var MultiSelect = react.forwardRef(({ options, value, onChange, placeholder = "Select options", fullWidth = true, maxVisibleValues = 2, formatValue, bulkActions = false, draftMode = false, minSelected = 0, selectAllLabel = "Select all", clearAllLabel, className, disabled = false, name, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy }, ref) => {
+	const [open, setOpen] = react.useState(false);
+	const [draft, setDraft] = react.useState(value);
+	const editValue = draftMode && open ? draft : value;
+	const updateSelection = (next) => {
+		if (draftMode) setDraft(next);
+		else if (next.length >= minSelected) onChange(next);
+	};
+	const selectedSet = react.useMemo(() => new Set(editValue), [editValue]);
+	const selectedOptions = react.useMemo(() => options.filter((opt) => value.includes(opt.value)), [options, value]);
 	const enabledValues = react.useMemo(() => options.filter((option) => !option.disabled).map((option) => option.value), [options]);
 	const allEnabledSelected = enabledValues.length > 0 && enabledValues.every((entry) => selectedSet.has(entry));
 	const hasDisabledOptions = options.some((option) => option.disabled);
@@ -18,20 +25,25 @@ var MultiSelect = react.forwardRef(({ options, value, onChange, placeholder = "S
 	const formattedValue = react.useMemo(() => formatValue?.(selectedOptions), [formatValue, selectedOptions]);
 	const toggleValue = react.useCallback((nextValue) => {
 		if (selectedSet.has(nextValue)) {
-			onChange(value.filter((entry) => entry !== nextValue));
+			updateSelection(editValue.filter((entry) => entry !== nextValue));
 			return;
 		}
-		onChange([...value, nextValue]);
+		updateSelection([...editValue, nextValue]);
 	}, [
-		onChange,
+		updateSelection,
 		selectedSet,
-		value
+		editValue
 	]);
 	const visibleCount = Math.max(1, maxVisibleValues);
 	const visibleOptions = selectedOptions.slice(0, visibleCount);
 	const overflowCount = Math.max(0, selectedOptions.length - visibleOptions.length);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Root, {
 		modal: false,
+		open,
+		onOpenChange: (next) => {
+			if (next) setDraft([...value]);
+			setOpen(next);
+		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: require_cx.cx(require_multi_select_module.default.wrapper, fullWidth && require_multi_select_module.default.wrapperFullWidth, className),
 			children: [
@@ -98,7 +110,7 @@ var MultiSelect = react.forwardRef(({ options, value, onChange, placeholder = "S
 							disabled: allEnabledSelected,
 							onSelect: (event) => {
 								event.preventDefault();
-								onChange([...value, ...enabledValues.filter((entry) => !selectedSet.has(entry))]);
+								updateSelection([...editValue, ...enabledValues.filter((entry) => !selectedSet.has(entry))]);
 							},
 							children: selectAllLabel
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dropdown_menu.Item, {
@@ -107,7 +119,7 @@ var MultiSelect = react.forwardRef(({ options, value, onChange, placeholder = "S
 							onSelect: (event) => {
 								event.preventDefault();
 								const enabledSet = new Set(enabledValues);
-								onChange(value.filter((entry) => !enabledSet.has(entry)));
+								updateSelection(editValue.filter((entry) => !enabledSet.has(entry)));
 							},
 							children: resolvedClearAllLabel
 						})] }) : null,
@@ -149,7 +161,25 @@ var MultiSelect = react.forwardRef(({ options, value, onChange, placeholder = "S
 									}) : null, option.label]
 								})]
 							}, option.value);
-						})
+						}),
+						draftMode ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: require_multi_select_module.default.draftActions,
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: require_multi_select_module.default.draftButton,
+								onClick: () => setOpen(false),
+								children: "Cancel"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								className: require_multi_select_module.default.draftButton,
+								disabled: editValue.length < minSelected,
+								onClick: () => {
+									onChange(editValue);
+									setOpen(false);
+								},
+								children: "Apply"
+							})]
+						}) : null
 					]
 				}) })
 			]

package/dist/index28.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index28.cjs","names":[],"sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./multi-select.module.css\";\n\nexport type MultiSelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  /** Optional decorative leading visual. The label remains the accessible option name. */\n  icon?: React.ReactElement;\n};\n\nexport type MultiSelectProps = {\n  options: MultiSelectOption[];\n  value: string[];\n  onChange: (value: string[]) => void;\n  placeholder?: string;\n  fullWidth?: boolean;\n  maxVisibleValues?: number;\n  /** Formats the closed trigger text from the selected options, including an empty selection. */\n  formatValue?: (selected: MultiSelectOption[]) => string;\n  /** Shows Select all and Clear all actions. Bulk actions modify enabled options only. */\n  bulkActions?: boolean;\n  selectAllLabel?: string;\n  /** Label for clearing all enabled selections. Disabled selected options remain selected. */\n  clearAllLabel?: string;\n  className?: string;\n  disabled?: boolean;\n  name?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n};\n\nexport const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(\n  (\n    {\n      options,\n      value,\n      onChange,\n      placeholder = \"Select options\",\n      fullWidth = true,\n      maxVisibleValues = 2,\n      formatValue,\n      bulkActions = false,\n      selectAllLabel = \"Select all\",\n      clearAllLabel,\n      className,\n      disabled = false,\n      name,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n    },\n    ref,\n  ) => {\n    const selectedSet = React.useMemo(() => new Set(value), [value]);\n    const selectedOptions = React.useMemo(\n      () => options.filter((opt) => selectedSet.has(opt.value)),\n      [options, selectedSet],\n    );\n\n    const enabledValues = React.useMemo(\n      () => options.filter((option) => !option.disabled).map((option) => option.value),\n      [options],\n    );\n    const allEnabledSelected =\n      enabledValues.length > 0 && enabledValues.every((entry) => selectedSet.has(entry));\n    const hasDisabledOptions = options.some((option) => option.disabled);\n    const resolvedClearAllLabel =\n      clearAllLabel ?? (hasDisabledOptions ? \"Clear enabled\" : \"Clear all\");\n\n    const formattedValue = React.useMemo(\n      () => formatValue?.(selectedOptions),\n      [formatValue, selectedOptions],\n    );\n\n    const toggleValue = React.useCallback(\n      (nextValue: string) => {\n        if (selectedSet.has(nextValue)) {\n          onChange(value.filter((entry) => entry !== nextValue));\n          return;\n        }\n\n        onChange([...value, nextValue]);\n      },\n      [onChange, selectedSet, value],\n    );\n\n    const visibleCount = Math.max(1, maxVisibleValues);\n    const visibleOptions = selectedOptions.slice(0, visibleCount);\n    const overflowCount = Math.max(\n      0,\n      selectedOptions.length - visibleOptions.length,\n    );\n\n    return (\n      <DropdownMenuPrimitive.Root modal={false}>\n        <div\n          className={cx(\n            styles.wrapper,\n            fullWidth && styles.wrapperFullWidth,\n            className,\n          )}\n        >\n          <DropdownMenuPrimitive.Trigger asChild>\n            <button\n              ref={ref}\n              type=\"button\"\n              className={styles.trigger}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledBy}\n              disabled={disabled}\n            >\n              <span className={styles.value}>\n                {formatValue ? (\n                  <span className={styles.summary}>{formattedValue}</span>\n                ) : selectedOptions.length === 0 ? (\n                  <span className={styles.placeholder}>{placeholder}</span>\n                ) : (\n                  <>\n                    {visibleOptions.map((option) => (\n                      <span key={option.value} className={styles.chip}>\n                        {option.icon ? <span className={styles.optionIcon} aria-hidden=\"true\">{option.icon}</span> : null}\n                        {option.label}\n                      </span>\n                    ))}\n                    {overflowCount > 0 ? (\n                      <span className={cx(styles.chip, styles.chipSummary)}>\n                        +{overflowCount}\n                      </span>\n                    ) : null}\n                  </>\n                )}\n              </span>\n              <span className={styles.chevron} aria-hidden=\"true\">\n                <svg\n                  viewBox=\"0 0 10 10\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"10\"\n                  height=\"10\"\n                >\n                  <path\n                    d=\"M2 3.5L5 6.5L8 3.5\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"1.5\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                  />\n                </svg>\n              </span>\n            </button>\n          </DropdownMenuPrimitive.Trigger>\n\n          {name\n            ? value.map((entry) => (\n                <input key={entry} type=\"hidden\" name={name} value={entry} />\n              ))\n            : null}\n\n          <DropdownMenuPrimitive.Portal>\n            <DropdownMenuPrimitive.Content\n              className={styles.menu}\n              sideOffset={4}\n              align=\"start\"\n            >\n              {bulkActions && enabledValues.length > 0 ? (\n                <>\n                  <DropdownMenuPrimitive.Item\n                    className={styles.bulkAction}\n                    disabled={allEnabledSelected}\n                    onSelect={(event) => {\n                      event.preventDefault();\n                      onChange([...value, ...enabledValues.filter((entry) => !selectedSet.has(entry))]);\n                    }}\n                  >\n                    {selectAllLabel}\n                  </DropdownMenuPrimitive.Item>\n                  <DropdownMenuPrimitive.Item\n                    className={styles.bulkAction}\n                    disabled={!enabledValues.some((entry) => selectedSet.has(entry))}\n                    onSelect={(event) => {\n                      event.preventDefault();\n                      const enabledSet = new Set(enabledValues);\n                      onChange(value.filter((entry) => !enabledSet.has(entry)));\n                    }}\n                  >\n                    {resolvedClearAllLabel}\n                  </DropdownMenuPrimitive.Item>\n                </>\n              ) : null}\n              {bulkActions && enabledValues.length > 0 ? (\n                <DropdownMenuPrimitive.Separator className={styles.separator} />\n              ) : null}\n              {options.map((option) => {\n                const selected = selectedSet.has(option.value);\n\n                return (\n                  <DropdownMenuPrimitive.CheckboxItem\n                    key={option.value}\n                    className={cx(\n                      styles.option,\n                      selected && styles.optionSelected,\n                      option.disabled && styles.optionDisabled,\n                    )}\n                    checked={selected}\n                    disabled={option.disabled}\n                    onCheckedChange={() => toggleValue(option.value)}\n                    onSelect={(event) => event.preventDefault()}\n                  >\n                    <span\n                      className={cx(\n                        styles.indicator,\n                        selected && styles.indicatorSelected,\n                        option.disabled && styles.indicatorDisabled,\n                      )}\n                      aria-hidden=\"true\"\n                    >\n                      <DropdownMenuPrimitive.ItemIndicator forceMount>\n                        <svg\n                          viewBox=\"0 0 16 16\"\n                          width=\"16\"\n                          height=\"16\"\n                          fill=\"none\"\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                          <path\n                            d=\"M3.5 8.5 6.5 11.5 12.5 4.5\"\n                            stroke=\"currentColor\"\n                            strokeWidth=\"1.8\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                          />\n                        </svg>\n                      </DropdownMenuPrimitive.ItemIndicator>\n                    </span>\n                    <span className={styles.optionLabel}>\n                          {option.icon ? <span className={styles.optionIcon} aria-hidden=\"true\">{option.icon}</span> : null}\n                          {option.label}\n                        </span>\n                  </DropdownMenuPrimitive.CheckboxItem>\n                );\n              })}\n            </DropdownMenuPrimitive.Content>\n          </DropdownMenuPrimitive.Portal>\n        </div>\n      </DropdownMenuPrimitive.Root>\n    );\n  },\n);\n\nMultiSelect.displayName = \"MultiSelect\";\n"],"mappings":"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"}
+{"version":3,"file":"index28.cjs","names":[],"sources":["../src/components/multi-select/MultiSelect.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport * as DropdownMenuPrimitive from \"@radix-ui/react-dropdown-menu\";\nimport { cx } from \"../../utils/cx\";\nimport styles from \"./multi-select.module.css\";\n\nexport type MultiSelectOption = {\n  label: string;\n  value: string;\n  disabled?: boolean;\n  /** Optional decorative leading visual. The label remains the accessible option name. */\n  icon?: React.ReactElement;\n};\n\nexport type MultiSelectProps = {\n  options: MultiSelectOption[];\n  value: string[];\n  onChange: (value: string[]) => void;\n  placeholder?: string;\n  fullWidth?: boolean;\n  maxVisibleValues?: number;\n  /** Formats the closed trigger text from the selected options, including an empty selection. */\n  formatValue?: (selected: MultiSelectOption[]) => string;\n  /** Shows Select all and Clear all actions. Bulk actions modify enabled options only. */\n  bulkActions?: boolean;\n  /** Stage changes until Apply. Cancel/dismiss discards the draft. */\n  draftMode?: boolean;\n  minSelected?: number;\n  selectAllLabel?: string;\n  /** Label for clearing all enabled selections. Disabled selected options remain selected. */\n  clearAllLabel?: string;\n  className?: string;\n  disabled?: boolean;\n  name?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n};\n\nexport const MultiSelect = React.forwardRef<HTMLButtonElement, MultiSelectProps>(\n  (\n    {\n      options,\n      value,\n      onChange,\n      placeholder = \"Select options\",\n      fullWidth = true,\n      maxVisibleValues = 2,\n      formatValue,\n      bulkActions = false,\n      draftMode = false,\n      minSelected = 0,\n      selectAllLabel = \"Select all\",\n      clearAllLabel,\n      className,\n      disabled = false,\n      name,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n    },\n    ref,\n  ) => {\n    const [open, setOpen] = React.useState(false);\n    const [draft, setDraft] = React.useState<string[]>(value);\n    const editValue = draftMode && open ? draft : value;\n    const updateSelection = (next: string[]) => {\n      if (draftMode) setDraft(next);\n      else if (next.length >= minSelected) onChange(next);\n    };\n    const selectedSet = React.useMemo(() => new Set(editValue), [editValue]);\n    const selectedOptions = React.useMemo(\n      () => options.filter((opt) => value.includes(opt.value)),\n      [options, value],\n    );\n\n    const enabledValues = React.useMemo(\n      () => options.filter((option) => !option.disabled).map((option) => option.value),\n      [options],\n    );\n    const allEnabledSelected =\n      enabledValues.length > 0 && enabledValues.every((entry) => selectedSet.has(entry));\n    const hasDisabledOptions = options.some((option) => option.disabled);\n    const resolvedClearAllLabel =\n      clearAllLabel ?? (hasDisabledOptions ? \"Clear enabled\" : \"Clear all\");\n\n    const formattedValue = React.useMemo(\n      () => formatValue?.(selectedOptions),\n      [formatValue, selectedOptions],\n    );\n\n    const toggleValue = React.useCallback(\n      (nextValue: string) => {\n        if (selectedSet.has(nextValue)) {\n          updateSelection(editValue.filter((entry) => entry !== nextValue));\n          return;\n        }\n\n        updateSelection([...editValue, nextValue]);\n      },\n      [updateSelection, selectedSet, editValue],\n    );\n\n    const visibleCount = Math.max(1, maxVisibleValues);\n    const visibleOptions = selectedOptions.slice(0, visibleCount);\n    const overflowCount = Math.max(\n      0,\n      selectedOptions.length - visibleOptions.length,\n    );\n\n    return (\n      <DropdownMenuPrimitive.Root modal={false} open={open} onOpenChange={(next) => {\n        if (next) setDraft([...value]);\n        setOpen(next);\n      }}>\n        <div\n          className={cx(\n            styles.wrapper,\n            fullWidth && styles.wrapperFullWidth,\n            className,\n          )}\n        >\n          <DropdownMenuPrimitive.Trigger asChild>\n            <button\n              ref={ref}\n              type=\"button\"\n              className={styles.trigger}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledBy}\n              disabled={disabled}\n            >\n              <span className={styles.value}>\n                {formatValue ? (\n                  <span className={styles.summary}>{formattedValue}</span>\n                ) : selectedOptions.length === 0 ? (\n                  <span className={styles.placeholder}>{placeholder}</span>\n                ) : (\n                  <>\n                    {visibleOptions.map((option) => (\n                      <span key={option.value} className={styles.chip}>\n                        {option.icon ? <span className={styles.optionIcon} aria-hidden=\"true\">{option.icon}</span> : null}\n                        {option.label}\n                      </span>\n                    ))}\n                    {overflowCount > 0 ? (\n                      <span className={cx(styles.chip, styles.chipSummary)}>\n                        +{overflowCount}\n                      </span>\n                    ) : null}\n                  </>\n                )}\n              </span>\n              <span className={styles.chevron} aria-hidden=\"true\">\n                <svg\n                  viewBox=\"0 0 10 10\"\n                  fill=\"none\"\n                  xmlns=\"http://www.w3.org/2000/svg\"\n                  width=\"10\"\n                  height=\"10\"\n                >\n                  <path\n                    d=\"M2 3.5L5 6.5L8 3.5\"\n                    stroke=\"currentColor\"\n                    strokeWidth=\"1.5\"\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                  />\n                </svg>\n              </span>\n            </button>\n          </DropdownMenuPrimitive.Trigger>\n\n          {name\n            ? value.map((entry) => (\n                <input key={entry} type=\"hidden\" name={name} value={entry} />\n              ))\n            : null}\n\n          <DropdownMenuPrimitive.Portal>\n            <DropdownMenuPrimitive.Content\n              className={styles.menu}\n              sideOffset={4}\n              align=\"start\"\n            >\n              {bulkActions && enabledValues.length > 0 ? (\n                <>\n                  <DropdownMenuPrimitive.Item\n                    className={styles.bulkAction}\n                    disabled={allEnabledSelected}\n                    onSelect={(event) => {\n                      event.preventDefault();\n                      updateSelection([...editValue, ...enabledValues.filter((entry) => !selectedSet.has(entry))]);\n                    }}\n                  >\n                    {selectAllLabel}\n                  </DropdownMenuPrimitive.Item>\n                  <DropdownMenuPrimitive.Item\n                    className={styles.bulkAction}\n                    disabled={!enabledValues.some((entry) => selectedSet.has(entry))}\n                    onSelect={(event) => {\n                      event.preventDefault();\n                      const enabledSet = new Set(enabledValues);\n                      updateSelection(editValue.filter((entry) => !enabledSet.has(entry)));\n                    }}\n                  >\n                    {resolvedClearAllLabel}\n                  </DropdownMenuPrimitive.Item>\n                </>\n              ) : null}\n              {bulkActions && enabledValues.length > 0 ? (\n                <DropdownMenuPrimitive.Separator className={styles.separator} />\n              ) : null}\n              {options.map((option) => {\n                const selected = selectedSet.has(option.value);\n\n                return (\n                  <DropdownMenuPrimitive.CheckboxItem\n                    key={option.value}\n                    className={cx(\n                      styles.option,\n                      selected && styles.optionSelected,\n                      option.disabled && styles.optionDisabled,\n                    )}\n                    checked={selected}\n                    disabled={option.disabled}\n                    onCheckedChange={() => toggleValue(option.value)}\n                    onSelect={(event) => event.preventDefault()}\n                  >\n                    <span\n                      className={cx(\n                        styles.indicator,\n                        selected && styles.indicatorSelected,\n                        option.disabled && styles.indicatorDisabled,\n                      )}\n                      aria-hidden=\"true\"\n                    >\n                      <DropdownMenuPrimitive.ItemIndicator forceMount>\n                        <svg\n                          viewBox=\"0 0 16 16\"\n                          width=\"16\"\n                          height=\"16\"\n                          fill=\"none\"\n                          xmlns=\"http://www.w3.org/2000/svg\"\n                        >\n                          <path\n                            d=\"M3.5 8.5 6.5 11.5 12.5 4.5\"\n                            stroke=\"currentColor\"\n                            strokeWidth=\"1.8\"\n                            strokeLinecap=\"round\"\n                            strokeLinejoin=\"round\"\n                          />\n                        </svg>\n                      </DropdownMenuPrimitive.ItemIndicator>\n                    </span>\n                    <span className={styles.optionLabel}>\n                          {option.icon ? <span className={styles.optionIcon} aria-hidden=\"true\">{option.icon}</span> : null}\n                          {option.label}\n                        </span>\n                  </DropdownMenuPrimitive.CheckboxItem>\n                );\n              })}\n              {draftMode ? (\n                <div className={styles.draftActions}>\n                  <button type=\"button\" className={styles.draftButton} onClick={() => setOpen(false)}>Cancel</button>\n                  <button type=\"button\" className={styles.draftButton} disabled={editValue.length < minSelected} onClick={() => {\n                    onChange(editValue);\n                    setOpen(false);\n                  }}>Apply</button>\n                </div>\n              ) : null}\n            </DropdownMenuPrimitive.Content>\n          </DropdownMenuPrimitive.Portal>\n        </div>\n      </DropdownMenuPrimitive.Root>\n    );\n  },\n);\n\nMultiSelect.displayName = \"MultiSelect\";\n"],"mappings":"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"}

package/dist/index75.js

@@ -0,0 +1,91 @@
+//#region src/components/ai-chat/ai-chat.module.css
+var container = "uzi-ai-chat-module__container__UoyFb";
+var scope = "uzi-ai-chat-module__scope__6xOgo";
+var scopeLabel = "uzi-ai-chat-module__scopeLabel__LHbKZ";
+var scopeHelp = "uzi-ai-chat-module__scopeHelp__NddsL";
+var closeBtn = "uzi-ai-chat-module__closeBtn__IeRH2";
+var sendButton = "uzi-ai-chat-module__sendButton__S9MmM";
+var errorActions = "uzi-ai-chat-module__errorActions__MWoVQ";
+var historyLimit = "uzi-ai-chat-module__historyLimit__LgZzD";
+var thread = "uzi-ai-chat-module__thread__Rqyeu";
+var viewport = "uzi-ai-chat-module__viewport__-CgLF";
+var chatToolbar = "uzi-ai-chat-module__chatToolbar__-QMr9";
+var messageList = "uzi-ai-chat-module__messageList__G3H50";
+var userMessage = "uzi-ai-chat-module__userMessage__iGksi";
+var assistantMessage = "uzi-ai-chat-module__assistantMessage__hRdxP";
+var textPart = "uzi-ai-chat-module__textPart__U0myJ";
+var reasoning = "uzi-ai-chat-module__reasoning__7Xf83";
+var toolPart = "uzi-ai-chat-module__toolPart__P160m";
+var reasoningSummary = "uzi-ai-chat-module__reasoningSummary__3gaQ3";
+var reasoningText = "uzi-ai-chat-module__reasoningText__qxl36";
+var sources = "uzi-ai-chat-module__sources__EwoEv";
+var sourcesLabel = "uzi-ai-chat-module__sourcesLabel__YV6j1";
+var data = "uzi-ai-chat-module__data__6pYCT";
+var structuredData = "uzi-ai-chat-module__structuredData__CVeqF";
+var footer = "uzi-ai-chat-module__footer__VzCvT";
+var composerForm = "uzi-ai-chat-module__composerForm__E2Wqd";
+var input = "uzi-ai-chat-module__input__-Rzh8";
+var status = "uzi-ai-chat-module__status__Wm3t3";
+var error = "uzi-ai-chat-module__error__csAOF";
+var emptyState = "uzi-ai-chat-module__emptyState__JzB1x";
+var composerExtras = "uzi-ai-chat-module__composerExtras__B1qBc";
+var composerActions = "uzi-ai-chat-module__composerActions__wrPZO";
+var approvalActions = "uzi-ai-chat-module__approvalActions__ptwyO";
+var attachmentList = "uzi-ai-chat-module__attachmentList__isbAi";
+var attachmentError = "uzi-ai-chat-module__attachmentError__E-kU-";
+var messageBubble = "uzi-ai-chat-module__messageBubble__ZG7M-";
+var messageLabel = "uzi-ai-chat-module__messageLabel__esd4p";
+var composerSurface = "uzi-ai-chat-module__composerSurface__t7lZs";
+var composerRow = "uzi-ai-chat-module__composerRow__Mjqy2";
+var composerIconButton = "uzi-ai-chat-module__composerIconButton__6FYlZ";
+var visuallyHidden = "uzi-ai-chat-module__visuallyHidden__qVCl7";
+var attachmentThumbnail = "uzi-ai-chat-module__attachmentThumbnail__OzmIc";
+var attachmentFilename = "uzi-ai-chat-module__attachmentFilename__yHCLk";
+var ai_chat_module_default = {
+	container,
+	scope,
+	scopeLabel,
+	scopeHelp,
+	closeBtn,
+	sendButton,
+	errorActions,
+	historyLimit,
+	thread,
+	viewport,
+	chatToolbar,
+	messageList,
+	userMessage,
+	assistantMessage,
+	textPart,
+	reasoning,
+	toolPart,
+	reasoningSummary,
+	reasoningText,
+	sources,
+	sourcesLabel,
+	data,
+	structuredData,
+	footer,
+	composerForm,
+	input,
+	status,
+	error,
+	emptyState,
+	composerExtras,
+	composerActions,
+	approvalActions,
+	attachmentList,
+	attachmentError,
+	messageBubble,
+	messageLabel,
+	composerSurface,
+	composerRow,
+	composerIconButton,
+	visuallyHidden,
+	attachmentThumbnail,
+	attachmentFilename
+};
+//#endregion
+export { approvalActions, assistantMessage, attachmentError, attachmentFilename, attachmentList, attachmentThumbnail, chatToolbar, closeBtn, composerActions, composerExtras, composerForm, composerIconButton, composerRow, composerSurface, container, data, ai_chat_module_default as default, emptyState, error, errorActions, footer, historyLimit, input, messageBubble, messageLabel, messageList, reasoning, reasoningSummary, reasoningText, scope, scopeHelp, scopeLabel, sendButton, sources, sourcesLabel, status, structuredData, textPart, thread, toolPart, userMessage, viewport, visuallyHidden };
+
+//# sourceMappingURL=index75.js.map

package/dist/index75.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index75.js","names":[],"sources":["../src/components/ai-chat/ai-chat.module.css"],"sourcesContent":[".container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  max-height: none;\n  overflow: hidden;\n  position: relative;\n}\n\n.scope {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.75rem 3rem 0.75rem 1rem;\n  background: var(--uzi-surface-1, var(--muted));\n  border-bottom: 1px solid var(--border);\n}\n\n.scopeLabel {\n  font-size: 0.6875rem;\n  font-weight: 650;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--muted-foreground);\n}\n\n.scope strong {\n  font-size: 0.875rem;\n}\n\n.scopeHelp {\n  margin: 0;\n  font-size: 0.75rem;\n  color: var(--muted-foreground);\n  line-height: 1.5;\n}\n\n.closeBtn {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  z-index: 1;\n  display: grid;\n  place-items: center;\n  width: 2rem;\n  height: 2rem;\n  border: 0;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--muted-foreground);\n  cursor: pointer;\n  font-size: 0.875rem;\n}\n\n.closeBtn:hover {\n  background: var(--uzi-surface-2, var(--muted));\n  color: var(--foreground);\n}\n\n.closeBtn:focus-visible,\n.sendButton:focus-visible,\n.errorActions button:focus-visible,\n.historyLimit button:focus-visible {\n  outline: 2px solid var(--primary);\n  outline-offset: 2px;\n}\n\n.thread {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.viewport {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n  gap: 0.75rem;\n}\n\n.chatToolbar {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  justify-content: flex-end;\n  padding: 0.5rem 1rem;\n  background: var(--uzi-surface-1, var(--background));\n  border-bottom: 1px solid var(--border);\n}\n\n.chatToolbar button {\n  border: 0;\n  border-radius: 0.375rem;\n  padding: 0.35rem 0.5rem;\n  background: transparent;\n  color: var(--muted-foreground);\n  font: inherit;\n  font-size: 0.75rem;\n  cursor: pointer;\n}\n\n.chatToolbar button:hover {\n  color: var(--foreground);\n  background: var(--uzi-surface-2, var(--muted));\n}\n\n.chatToolbar button:focus-visible {\n  outline: 2px solid var(--primary);\n  outline-offset: 2px;\n}\n\n.messageList {\n  display: flex;\n  flex: 1 0 auto;\n  flex-direction: column;\n  gap: 0.75rem;\n  padding: 1rem;\n}\n\n.userMessage,\n.assistantMessage {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  border-radius: 0.75rem;\n  color: var(--foreground);\n  overflow-wrap: anywhere;\n}\n\n.userMessage {\n  background: color-mix(in srgb, var(--primary) 10%, transparent);\n  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);\n}\n\n.assistantMessage {\n  background: var(--muted);\n  border: 1px solid var(--border);\n}\n\n.textPart {\n  white-space: pre-wrap;\n  line-height: 1.6;\n}\n\n.reasoning,\n.toolPart {\n  border: 1px solid var(--border);\n  border-radius: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  background: var(--uzi-surface-1, transparent);\n}\n\n.reasoningSummary,\n.toolPart summary {\n  cursor: pointer;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--muted-foreground);\n}\n\n.reasoningText {\n  margin: 0.5rem 0 0;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n  color: var(--muted-foreground);\n  white-space: pre-wrap;\n}\n\n.sources {\n  padding-top: 0.5rem;\n  border-top: 1px solid var(--border);\n}\n\n.sourcesLabel {\n  display: block;\n  font-size: 0.6875rem;\n  font-weight: 650;\n  color: var(--muted-foreground);\n  margin-bottom: 0.25rem;\n}\n\n.sources ul {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin: 0;\n  padding-left: 1.25rem;\n}\n\n.sources li {\n  font-size: 0.75rem;\n  overflow-wrap: anywhere;\n}\n\n.data {\n  padding: 0.5rem;\n  background: var(--uzi-surface-2, var(--muted));\n  border-radius: 0.5rem;\n  overflow-x: auto;\n}\n\n.structuredData {\n  margin: 0;\n  padding: 0.5rem 0;\n  max-width: 100%;\n  overflow-x: auto;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  font-size: 0.75rem;\n  line-height: 1.5;\n}\n\n.footer {\n  position: sticky;\n  bottom: 0;\n  z-index: 1;\n  flex-shrink: 0;\n  background: var(--background);\n  border-top: 1px solid var(--border);\n}\n\n.composerForm {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: end;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n}\n\n.input {\n  width: 100%;\n  min-height: 2.5rem;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid var(--border);\n  border-radius: 0.5rem;\n  background: var(--background);\n  color: var(--foreground);\n  font: inherit;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  resize: vertical;\n}\n\n.input:focus {\n  outline: none;\n  border-color: var(--primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);\n}\n\n.input::placeholder {\n  color: var(--muted-foreground);\n}\n\n.input:disabled,\n.sendButton:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.sendButton {\n  min-height: 2.5rem;\n  padding: 0.5rem 0.875rem;\n  border: 1px solid var(--border);\n  border-radius: 0.5rem;\n  background: var(--primary);\n  color: var(--primary-foreground);\n  font: inherit;\n  font-size: 0.875rem;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.sendButton:not(:disabled):hover {\n  filter: brightness(0.95);\n}\n\n.status {\n  margin: 0;\n  padding: 0.5rem 1rem;\n  text-align: center;\n  font-size: 0.8125rem;\n  color: var(--muted-foreground);\n  font-style: italic;\n}\n\n.error {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  border: 1px solid var(--destructive);\n  border-radius: 0.5rem;\n  margin: 0.75rem 1rem;\n  background: color-mix(in srgb, var(--destructive) 10%, transparent);\n}\n\n.error p {\n  margin: 0;\n  color: var(--destructive);\n  font-size: 0.8125rem;\n}\n\n.errorActions {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.errorActions button,\n.historyLimit button {\n  padding: 0.375rem 0.75rem;\n  border: 1px solid var(--border);\n  border-radius: 0.375rem;\n  background: transparent;\n  color: var(--foreground);\n  font: inherit;\n  font-size: 0.75rem;\n  cursor: pointer;\n}\n\n.errorActions button:hover,\n.historyLimit button:hover {\n  background: var(--uzi-surface-2, var(--muted));\n}\n\n.historyLimit {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  align-items: center;\n  padding: 0.75rem 1rem;\n  margin: 0.75rem 1rem;\n  background: var(--uzi-surface-1, var(--muted));\n  border: 1px solid var(--border);\n  border-radius: 0.5rem;\n}\n\n.historyLimit span {\n  font-size: 0.75rem;\n  color: var(--muted-foreground);\n}\n\n.emptyState {\n  display: grid;\n  place-items: center;\n  flex: 1;\n  min-height: 12rem;\n  color: var(--muted-foreground);\n  text-align: center;\n}\n\n.emptyState p {\n  margin: 0;\n  font-size: 0.875rem;\n}\n\n@media (max-width: 640px) {\n  .composerForm {\n    grid-template-columns: minmax(0, 1fr) auto;\n  }\n\n  .errorActions {\n    flex-wrap: wrap;\n  }\n}\n\n/* Optional integration controls use the same Uzi surface and layout tokens. */\n.composerExtras {\n  grid-column: 1 / -1;\n  min-width: 0;\n}\n\n.composerActions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.approvalActions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.5rem; }\n.approvalActions button, .attachmentList button {\n  background: var(--background); color: var(--foreground); border: 1px solid var(--border);\n  border-radius: 0.375rem; padding: 0.3rem 0.55rem; cursor: pointer;\n}\n.approvalActions button:disabled { opacity: 0.5; cursor: not-allowed; }\n.attachmentError { color: var(--destructive); padding: 0.5rem 1rem; margin: 0; }\n.attachmentList { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.4rem 0; margin: 0; list-style: none; }\n.attachmentList li { display: inline-flex; gap: 0.5rem; align-items: center; font-size: 0.75rem; }\n\n/* Role-aware message layout shared by the default renderer and consumer apps. */\n.messageBubble { width: fit-content; min-width: 0; max-width: 100%; }\n.messageBubble.userMessage { align-self: flex-end; max-width: min(90%, 42rem); }\n.messageBubble.assistantMessage { align-self: flex-start; max-width: 100%; }\n.messageLabel { font-size: 0.6875rem; font-weight: 650; color: var(--muted-foreground); }\n\n/* Shared compact composer: same visual grammar as Betty, without app-owned behavior. */\n.composerSurface {\n  grid-column: 1 / -1;\n  min-width: 0;\n  border: 1px solid var(--border);\n  border-radius: 0.875rem;\n  background: var(--background);\n}\n.composerSurface:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }\n.composerRow { display: flex; align-items: end; min-width: 0; gap: 0.375rem; padding: 0.375rem; }\n.composerRow .input {\n  display: block; flex: 1; width: 0; min-width: 0; min-height: 2.75rem;\n  max-height: 11rem; padding: 0.625rem 0.25rem; border: 0;\n  background: transparent; resize: none; font-size: 1rem;\n}\n.composerRow .input:focus { outline: none; box-shadow: none; }\n.composerIconButton, .composerRow .sendButton {\n  display: grid; place-items: center; flex-shrink: 0;\n  width: 2.75rem; height: 2.75rem; min-height: 2.75rem;\n  padding: 0; border-radius: 0.625rem; cursor: pointer;\n}\n.composerIconButton {\n  color: var(--foreground); border: 0; background: transparent;\n}\n.composerIconButton:hover:not(:disabled) { background: var(--muted); }\n.composerRow .sendButton { border: 0; background: var(--primary); color: var(--primary-foreground); }\n.composerIconButton:focus-visible, .composerRow .sendButton:focus-visible {\n  outline: 2px solid var(--ring); outline-offset: 2px;\n}\n.composerIconButton:disabled { opacity: 0.5; cursor: not-allowed; }\n.visuallyHidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }\n\n/* Thumbnail treatment matches the Betty attachment shelf. */\n.attachmentList {\n  gap: 0.5rem;\n  padding: 0;\n  align-items: center;\n}\n.attachmentList li {\n  max-width: 100%;\n  position: relative;\n  min-height: 3rem;\n  border-radius: 0.625rem;\n  border: 1px solid var(--border);\n  background: var(--uzi-surface-1, var(--muted));\n  padding: 0.125rem;\n}\n.attachmentThumbnail {\n  width: 3rem;\n  height: 3rem;\n  border-radius: 0.5rem;\n  object-fit: cover;\n}\n.attachmentFilename {\n  max-width: 11rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 0.5rem;\n}\n.attachmentList li button {\n  flex-shrink: 0;\n  border: 0;\n  background: transparent;\n  color: var(--muted-foreground);\n  border-radius: 0.4rem;\n}\n.attachmentList li button:hover { color: var(--foreground); background: var(--muted); }\n"],"mappings":""}

package/dist/index76.cjs

@@ -0,0 +1,133 @@
+//#region src/components/ai-chat/ai-chat.module.css
+var container = "uzi-ai-chat-module__container__UoyFb";
+var scope = "uzi-ai-chat-module__scope__6xOgo";
+var scopeLabel = "uzi-ai-chat-module__scopeLabel__LHbKZ";
+var scopeHelp = "uzi-ai-chat-module__scopeHelp__NddsL";
+var closeBtn = "uzi-ai-chat-module__closeBtn__IeRH2";
+var sendButton = "uzi-ai-chat-module__sendButton__S9MmM";
+var errorActions = "uzi-ai-chat-module__errorActions__MWoVQ";
+var historyLimit = "uzi-ai-chat-module__historyLimit__LgZzD";
+var thread = "uzi-ai-chat-module__thread__Rqyeu";
+var viewport = "uzi-ai-chat-module__viewport__-CgLF";
+var chatToolbar = "uzi-ai-chat-module__chatToolbar__-QMr9";
+var messageList = "uzi-ai-chat-module__messageList__G3H50";
+var userMessage = "uzi-ai-chat-module__userMessage__iGksi";
+var assistantMessage = "uzi-ai-chat-module__assistantMessage__hRdxP";
+var textPart = "uzi-ai-chat-module__textPart__U0myJ";
+var reasoning = "uzi-ai-chat-module__reasoning__7Xf83";
+var toolPart = "uzi-ai-chat-module__toolPart__P160m";
+var reasoningSummary = "uzi-ai-chat-module__reasoningSummary__3gaQ3";
+var reasoningText = "uzi-ai-chat-module__reasoningText__qxl36";
+var sources = "uzi-ai-chat-module__sources__EwoEv";
+var sourcesLabel = "uzi-ai-chat-module__sourcesLabel__YV6j1";
+var data = "uzi-ai-chat-module__data__6pYCT";
+var structuredData = "uzi-ai-chat-module__structuredData__CVeqF";
+var footer = "uzi-ai-chat-module__footer__VzCvT";
+var composerForm = "uzi-ai-chat-module__composerForm__E2Wqd";
+var input = "uzi-ai-chat-module__input__-Rzh8";
+var status = "uzi-ai-chat-module__status__Wm3t3";
+var error = "uzi-ai-chat-module__error__csAOF";
+var emptyState = "uzi-ai-chat-module__emptyState__JzB1x";
+var composerExtras = "uzi-ai-chat-module__composerExtras__B1qBc";
+var composerActions = "uzi-ai-chat-module__composerActions__wrPZO";
+var approvalActions = "uzi-ai-chat-module__approvalActions__ptwyO";
+var attachmentList = "uzi-ai-chat-module__attachmentList__isbAi";
+var attachmentError = "uzi-ai-chat-module__attachmentError__E-kU-";
+var messageBubble = "uzi-ai-chat-module__messageBubble__ZG7M-";
+var messageLabel = "uzi-ai-chat-module__messageLabel__esd4p";
+var composerSurface = "uzi-ai-chat-module__composerSurface__t7lZs";
+var composerRow = "uzi-ai-chat-module__composerRow__Mjqy2";
+var composerIconButton = "uzi-ai-chat-module__composerIconButton__6FYlZ";
+var visuallyHidden = "uzi-ai-chat-module__visuallyHidden__qVCl7";
+var attachmentThumbnail = "uzi-ai-chat-module__attachmentThumbnail__OzmIc";
+var attachmentFilename = "uzi-ai-chat-module__attachmentFilename__yHCLk";
+var ai_chat_module_default = {
+	container,
+	scope,
+	scopeLabel,
+	scopeHelp,
+	closeBtn,
+	sendButton,
+	errorActions,
+	historyLimit,
+	thread,
+	viewport,
+	chatToolbar,
+	messageList,
+	userMessage,
+	assistantMessage,
+	textPart,
+	reasoning,
+	toolPart,
+	reasoningSummary,
+	reasoningText,
+	sources,
+	sourcesLabel,
+	data,
+	structuredData,
+	footer,
+	composerForm,
+	input,
+	status,
+	error,
+	emptyState,
+	composerExtras,
+	composerActions,
+	approvalActions,
+	attachmentList,
+	attachmentError,
+	messageBubble,
+	messageLabel,
+	composerSurface,
+	composerRow,
+	composerIconButton,
+	visuallyHidden,
+	attachmentThumbnail,
+	attachmentFilename
+};
+//#endregion
+exports.approvalActions = approvalActions;
+exports.assistantMessage = assistantMessage;
+exports.attachmentError = attachmentError;
+exports.attachmentFilename = attachmentFilename;
+exports.attachmentList = attachmentList;
+exports.attachmentThumbnail = attachmentThumbnail;
+exports.chatToolbar = chatToolbar;
+exports.closeBtn = closeBtn;
+exports.composerActions = composerActions;
+exports.composerExtras = composerExtras;
+exports.composerForm = composerForm;
+exports.composerIconButton = composerIconButton;
+exports.composerRow = composerRow;
+exports.composerSurface = composerSurface;
+exports.container = container;
+exports.data = data;
+exports.default = ai_chat_module_default;
+exports.emptyState = emptyState;
+exports.error = error;
+exports.errorActions = errorActions;
+exports.footer = footer;
+exports.historyLimit = historyLimit;
+exports.input = input;
+exports.messageBubble = messageBubble;
+exports.messageLabel = messageLabel;
+exports.messageList = messageList;
+exports.reasoning = reasoning;
+exports.reasoningSummary = reasoningSummary;
+exports.reasoningText = reasoningText;
+exports.scope = scope;
+exports.scopeHelp = scopeHelp;
+exports.scopeLabel = scopeLabel;
+exports.sendButton = sendButton;
+exports.sources = sources;
+exports.sourcesLabel = sourcesLabel;
+exports.status = status;
+exports.structuredData = structuredData;
+exports.textPart = textPart;
+exports.thread = thread;
+exports.toolPart = toolPart;
+exports.userMessage = userMessage;
+exports.viewport = viewport;
+exports.visuallyHidden = visuallyHidden;
+
+//# sourceMappingURL=index76.cjs.map

package/dist/index76.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index76.cjs","names":[],"sources":["../src/components/ai-chat/ai-chat.module.css"],"sourcesContent":[".container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  min-height: 0;\n  max-height: none;\n  overflow: hidden;\n  position: relative;\n}\n\n.scope {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  padding: 0.75rem 3rem 0.75rem 1rem;\n  background: var(--uzi-surface-1, var(--muted));\n  border-bottom: 1px solid var(--border);\n}\n\n.scopeLabel {\n  font-size: 0.6875rem;\n  font-weight: 650;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: var(--muted-foreground);\n}\n\n.scope strong {\n  font-size: 0.875rem;\n}\n\n.scopeHelp {\n  margin: 0;\n  font-size: 0.75rem;\n  color: var(--muted-foreground);\n  line-height: 1.5;\n}\n\n.closeBtn {\n  position: absolute;\n  top: 0.5rem;\n  right: 0.5rem;\n  z-index: 1;\n  display: grid;\n  place-items: center;\n  width: 2rem;\n  height: 2rem;\n  border: 0;\n  border-radius: 50%;\n  background: transparent;\n  color: var(--muted-foreground);\n  cursor: pointer;\n  font-size: 0.875rem;\n}\n\n.closeBtn:hover {\n  background: var(--uzi-surface-2, var(--muted));\n  color: var(--foreground);\n}\n\n.closeBtn:focus-visible,\n.sendButton:focus-visible,\n.errorActions button:focus-visible,\n.historyLimit button:focus-visible {\n  outline: 2px solid var(--primary);\n  outline-offset: 2px;\n}\n\n.thread {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n}\n\n.viewport {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n  gap: 0.75rem;\n}\n\n.chatToolbar {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  display: flex;\n  justify-content: flex-end;\n  padding: 0.5rem 1rem;\n  background: var(--uzi-surface-1, var(--background));\n  border-bottom: 1px solid var(--border);\n}\n\n.chatToolbar button {\n  border: 0;\n  border-radius: 0.375rem;\n  padding: 0.35rem 0.5rem;\n  background: transparent;\n  color: var(--muted-foreground);\n  font: inherit;\n  font-size: 0.75rem;\n  cursor: pointer;\n}\n\n.chatToolbar button:hover {\n  color: var(--foreground);\n  background: var(--uzi-surface-2, var(--muted));\n}\n\n.chatToolbar button:focus-visible {\n  outline: 2px solid var(--primary);\n  outline-offset: 2px;\n}\n\n.messageList {\n  display: flex;\n  flex: 1 0 auto;\n  flex-direction: column;\n  gap: 0.75rem;\n  padding: 1rem;\n}\n\n.userMessage,\n.assistantMessage {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  border-radius: 0.75rem;\n  color: var(--foreground);\n  overflow-wrap: anywhere;\n}\n\n.userMessage {\n  background: color-mix(in srgb, var(--primary) 10%, transparent);\n  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);\n}\n\n.assistantMessage {\n  background: var(--muted);\n  border: 1px solid var(--border);\n}\n\n.textPart {\n  white-space: pre-wrap;\n  line-height: 1.6;\n}\n\n.reasoning,\n.toolPart {\n  border: 1px solid var(--border);\n  border-radius: 0.5rem;\n  padding: 0.5rem 0.75rem;\n  background: var(--uzi-surface-1, transparent);\n}\n\n.reasoningSummary,\n.toolPart summary {\n  cursor: pointer;\n  font-size: 0.75rem;\n  font-weight: 600;\n  color: var(--muted-foreground);\n}\n\n.reasoningText {\n  margin: 0.5rem 0 0;\n  font-size: 0.8125rem;\n  line-height: 1.6;\n  color: var(--muted-foreground);\n  white-space: pre-wrap;\n}\n\n.sources {\n  padding-top: 0.5rem;\n  border-top: 1px solid var(--border);\n}\n\n.sourcesLabel {\n  display: block;\n  font-size: 0.6875rem;\n  font-weight: 650;\n  color: var(--muted-foreground);\n  margin-bottom: 0.25rem;\n}\n\n.sources ul {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.5rem;\n  margin: 0;\n  padding-left: 1.25rem;\n}\n\n.sources li {\n  font-size: 0.75rem;\n  overflow-wrap: anywhere;\n}\n\n.data {\n  padding: 0.5rem;\n  background: var(--uzi-surface-2, var(--muted));\n  border-radius: 0.5rem;\n  overflow-x: auto;\n}\n\n.structuredData {\n  margin: 0;\n  padding: 0.5rem 0;\n  max-width: 100%;\n  overflow-x: auto;\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n  font-size: 0.75rem;\n  line-height: 1.5;\n}\n\n.footer {\n  position: sticky;\n  bottom: 0;\n  z-index: 1;\n  flex-shrink: 0;\n  background: var(--background);\n  border-top: 1px solid var(--border);\n}\n\n.composerForm {\n  display: grid;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: end;\n  gap: 0.75rem;\n  padding: 0.75rem 1rem;\n}\n\n.input {\n  width: 100%;\n  min-height: 2.5rem;\n  padding: 0.5rem 0.75rem;\n  border: 1px solid var(--border);\n  border-radius: 0.5rem;\n  background: var(--background);\n  color: var(--foreground);\n  font: inherit;\n  font-size: 0.875rem;\n  line-height: 1.5;\n  resize: vertical;\n}\n\n.input:focus {\n  outline: none;\n  border-color: var(--primary);\n  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 30%, transparent);\n}\n\n.input::placeholder {\n  color: var(--muted-foreground);\n}\n\n.input:disabled,\n.sendButton:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.sendButton {\n  min-height: 2.5rem;\n  padding: 0.5rem 0.875rem;\n  border: 1px solid var(--border);\n  border-radius: 0.5rem;\n  background: var(--primary);\n  color: var(--primary-foreground);\n  font: inherit;\n  font-size: 0.875rem;\n  font-weight: 600;\n  cursor: pointer;\n}\n\n.sendButton:not(:disabled):hover {\n  filter: brightness(0.95);\n}\n\n.status {\n  margin: 0;\n  padding: 0.5rem 1rem;\n  text-align: center;\n  font-size: 0.8125rem;\n  color: var(--muted-foreground);\n  font-style: italic;\n}\n\n.error {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  border: 1px solid var(--destructive);\n  border-radius: 0.5rem;\n  margin: 0.75rem 1rem;\n  background: color-mix(in srgb, var(--destructive) 10%, transparent);\n}\n\n.error p {\n  margin: 0;\n  color: var(--destructive);\n  font-size: 0.8125rem;\n}\n\n.errorActions {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.errorActions button,\n.historyLimit button {\n  padding: 0.375rem 0.75rem;\n  border: 1px solid var(--border);\n  border-radius: 0.375rem;\n  background: transparent;\n  color: var(--foreground);\n  font: inherit;\n  font-size: 0.75rem;\n  cursor: pointer;\n}\n\n.errorActions button:hover,\n.historyLimit button:hover {\n  background: var(--uzi-surface-2, var(--muted));\n}\n\n.historyLimit {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n  align-items: center;\n  padding: 0.75rem 1rem;\n  margin: 0.75rem 1rem;\n  background: var(--uzi-surface-1, var(--muted));\n  border: 1px solid var(--border);\n  border-radius: 0.5rem;\n}\n\n.historyLimit span {\n  font-size: 0.75rem;\n  color: var(--muted-foreground);\n}\n\n.emptyState {\n  display: grid;\n  place-items: center;\n  flex: 1;\n  min-height: 12rem;\n  color: var(--muted-foreground);\n  text-align: center;\n}\n\n.emptyState p {\n  margin: 0;\n  font-size: 0.875rem;\n}\n\n@media (max-width: 640px) {\n  .composerForm {\n    grid-template-columns: minmax(0, 1fr) auto;\n  }\n\n  .errorActions {\n    flex-wrap: wrap;\n  }\n}\n\n/* Optional integration controls use the same Uzi surface and layout tokens. */\n.composerExtras {\n  grid-column: 1 / -1;\n  min-width: 0;\n}\n\n.composerActions {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.approvalActions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding-top: 0.5rem; }\n.approvalActions button, .attachmentList button {\n  background: var(--background); color: var(--foreground); border: 1px solid var(--border);\n  border-radius: 0.375rem; padding: 0.3rem 0.55rem; cursor: pointer;\n}\n.approvalActions button:disabled { opacity: 0.5; cursor: not-allowed; }\n.attachmentError { color: var(--destructive); padding: 0.5rem 1rem; margin: 0; }\n.attachmentList { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.4rem 0; margin: 0; list-style: none; }\n.attachmentList li { display: inline-flex; gap: 0.5rem; align-items: center; font-size: 0.75rem; }\n\n/* Role-aware message layout shared by the default renderer and consumer apps. */\n.messageBubble { width: fit-content; min-width: 0; max-width: 100%; }\n.messageBubble.userMessage { align-self: flex-end; max-width: min(90%, 42rem); }\n.messageBubble.assistantMessage { align-self: flex-start; max-width: 100%; }\n.messageLabel { font-size: 0.6875rem; font-weight: 650; color: var(--muted-foreground); }\n\n/* Shared compact composer: same visual grammar as Betty, without app-owned behavior. */\n.composerSurface {\n  grid-column: 1 / -1;\n  min-width: 0;\n  border: 1px solid var(--border);\n  border-radius: 0.875rem;\n  background: var(--background);\n}\n.composerSurface:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }\n.composerRow { display: flex; align-items: end; min-width: 0; gap: 0.375rem; padding: 0.375rem; }\n.composerRow .input {\n  display: block; flex: 1; width: 0; min-width: 0; min-height: 2.75rem;\n  max-height: 11rem; padding: 0.625rem 0.25rem; border: 0;\n  background: transparent; resize: none; font-size: 1rem;\n}\n.composerRow .input:focus { outline: none; box-shadow: none; }\n.composerIconButton, .composerRow .sendButton {\n  display: grid; place-items: center; flex-shrink: 0;\n  width: 2.75rem; height: 2.75rem; min-height: 2.75rem;\n  padding: 0; border-radius: 0.625rem; cursor: pointer;\n}\n.composerIconButton {\n  color: var(--foreground); border: 0; background: transparent;\n}\n.composerIconButton:hover:not(:disabled) { background: var(--muted); }\n.composerRow .sendButton { border: 0; background: var(--primary); color: var(--primary-foreground); }\n.composerIconButton:focus-visible, .composerRow .sendButton:focus-visible {\n  outline: 2px solid var(--ring); outline-offset: 2px;\n}\n.composerIconButton:disabled { opacity: 0.5; cursor: not-allowed; }\n.visuallyHidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }\n\n/* Thumbnail treatment matches the Betty attachment shelf. */\n.attachmentList {\n  gap: 0.5rem;\n  padding: 0;\n  align-items: center;\n}\n.attachmentList li {\n  max-width: 100%;\n  position: relative;\n  min-height: 3rem;\n  border-radius: 0.625rem;\n  border: 1px solid var(--border);\n  background: var(--uzi-surface-1, var(--muted));\n  padding: 0.125rem;\n}\n.attachmentThumbnail {\n  width: 3rem;\n  height: 3rem;\n  border-radius: 0.5rem;\n  object-fit: cover;\n}\n.attachmentFilename {\n  max-width: 11rem;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  padding: 0.5rem;\n}\n.attachmentList li button {\n  flex-shrink: 0;\n  border: 0;\n  background: transparent;\n  color: var(--muted-foreground);\n  border-radius: 0.4rem;\n}\n.attachmentList li button:hover { color: var(--foreground); background: var(--muted); }\n"],"mappings":""}