@neuronection/assistant-ui 0.5.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/README.md +2 -0
- package/dist/ai-magic-fill.d.ts +20 -0
- package/dist/ai-magic-fill.js +3 -0
- package/dist/ai-magic-fill.js.map +1 -0
- package/dist/{chunk-BUPMDOVL.js → chunk-2EPZAT3X.js} +2 -2
- package/dist/{chunk-BUPMDOVL.js.map → chunk-2EPZAT3X.js.map} +1 -1
- package/dist/chunk-C74WWM23.js +38 -0
- package/dist/chunk-C74WWM23.js.map +1 -0
- package/dist/chunk-HTXTVWVG.js +3 -0
- package/dist/chunk-HTXTVWVG.js.map +1 -0
- package/dist/chunk-L4NM55XW.js +74 -0
- package/dist/chunk-L4NM55XW.js.map +1 -0
- package/dist/{chunk-COPPAHR5.js → chunk-M4V7XHL7.js} +2 -2
- package/dist/chunk-M4V7XHL7.js.map +1 -0
- package/dist/chunk-PSAJSOXL.js +3 -0
- package/dist/chunk-PSAJSOXL.js.map +1 -0
- package/dist/connection-test-row.d.ts +23 -0
- package/dist/connection-test-row.js +73 -0
- package/dist/connection-test-row.js.map +1 -0
- package/dist/form-modal.js +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +13 -12
- package/dist/input.d.ts +2 -2
- package/dist/input.js +1 -1
- package/dist/provider-form.d.ts +31 -0
- package/dist/provider-form.js +89 -0
- package/dist/provider-form.js.map +1 -0
- package/dist/settings-shell.d.ts +24 -0
- package/dist/settings-shell.js +74 -0
- package/dist/settings-shell.js.map +1 -0
- package/dist/styles.css +1 -1
- package/dist/textarea.d.ts +10 -0
- package/dist/textarea.js +3 -0
- package/dist/textarea.js.map +1 -0
- package/package.json +18 -2
- package/dist/chunk-COPPAHR5.js.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @neuronection/assistant-ui
|
|
2
2
|
|
|
3
|
+
## 0.6.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`fc350c6`](https://github.com/neuronection/assistant-ui/commit/fc350c6a684eb85dd5ef18a73af5c0d1a368b315) Thanks [@constLiakos](https://github.com/constLiakos)! - New `AiMagicFill` (describe-in-words prompt modal over `FormModal`, with
|
|
8
|
+
busy/error states — the app applies the extracted data) and a `Textarea`
|
|
9
|
+
primitive with the same label/hint/error wiring as `Input`.
|
|
10
|
+
|
|
11
|
+
- [`048e70a`](https://github.com/neuronection/assistant-ui/commit/048e70abfcaa349b8e61193ac85961ca834ca8b1) Thanks [@constLiakos](https://github.com/constLiakos)! - Phase-4 settings-trio blocks (part 1): `SettingsShell` (controlled two-pane
|
|
12
|
+
nav — router/store stay app-side), `ProviderForm` (name/base URL plus a
|
|
13
|
+
**write-only** masked API-key field; keyring stays app-side, ADR-006) and
|
|
14
|
+
`ConnectionTestRow` (idle/testing/ok/fail + latency presentation; the ping is
|
|
15
|
+
app-side). `Input`'s `label`/`hint` now accept ReactNode.
|
|
16
|
+
|
|
3
17
|
## 0.5.0
|
|
4
18
|
|
|
5
19
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -88,7 +88,9 @@ files in the package's `dist/`. Visual reference:
|
|
|
88
88
|
| `check-indicator` / `selection-bar` / `view-toggle` | `CheckIndicator` (tri-state) · `SelectionBar` (bulk-select bar) · `ViewToggle` (grid/list) |
|
|
89
89
|
| `error-banner` / `undo-notice` / `empty-state` / `spinner` | presentational feedback: alert banner with `action` slot · undo toast · `EmptyState` · `Spinner` |
|
|
90
90
|
| `info-button` / `field-label` | `InfoButton` (info popover) · `FieldLabel` (label + info affordance) |
|
|
91
|
+
| `settings-shell` / `provider-form` / `connection-test-row` | `SettingsShell` (controlled two-pane nav) · `ProviderForm` (write-only key field) · `ConnectionTestRow` (idle/testing/ok/fail) |
|
|
91
92
|
| `copy-button` / `breadcrumbs` | `CopyButton` (clipboard + copied state) · `Breadcrumbs` (SPA links via `linkComponent`) |
|
|
93
|
+
| `ai-magic-fill` | `AiMagicFill` (describe-in-words → structured data prompt modal; app applies the data) |
|
|
92
94
|
| `ai-button` / `ai-actions-dropdown` | `AiButton` (suggestions + prompt + response slot) · `AiActionsDropdown` (action list + custom prompt) |
|
|
93
95
|
| `marquee` | `useMarquee`, `MarqueeSurface`, `MarqueeBand` (rubber-band selection) |
|
|
94
96
|
| `portal` / `theme-scope` / `tokens` | `Portal` · `ThemeScope` · token name lists + types |
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
interface AiMagicFillProps {
|
|
4
|
+
open: boolean;
|
|
5
|
+
onOpenChange: (open: boolean) => void;
|
|
6
|
+
onSubmit: (prompt: string) => void;
|
|
7
|
+
busy?: boolean;
|
|
8
|
+
error?: string | null;
|
|
9
|
+
title?: string;
|
|
10
|
+
subtitle?: string;
|
|
11
|
+
description?: string;
|
|
12
|
+
promptLabel?: string;
|
|
13
|
+
placeholder?: string;
|
|
14
|
+
submitLabel?: string;
|
|
15
|
+
cancelLabel?: string;
|
|
16
|
+
className?: string;
|
|
17
|
+
}
|
|
18
|
+
declare function AiMagicFill({ open, onOpenChange, onSubmit, busy, error, title, subtitle, description, promptLabel, placeholder, submitLabel, cancelLabel, className, }: AiMagicFillProps): React.JSX.Element;
|
|
19
|
+
|
|
20
|
+
export { AiMagicFill, type AiMagicFillProps };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"ai-magic-fill.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/form-modal/FormModal.tsx"],"names":[],"mappings":";;;;;AAoCO,SAAS,SAAA,CAAU;AAAA,EACxB,IAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA,EAAM,IAAA;AAAA,EACN,aAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,cAAA,GAAiB,KAAA;AAAA,EACjB,WAAA,GAAc,MAAA;AAAA,EACd,WAAA,GAAc,QAAA;AAAA,EACd,UAAA,GAAa,OAAA;AAAA,EACb,IAAA,GAAO,IAAA;AAAA,EACP,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,QAAA;AAAA,EACA,WAAA,GAAc;AAChB,CAAA,EAAmB;AACjB,EAAA,uBACE,GAAA,CAAC,SAAM,IAAA,EAAY,YAAA,EACjB,8BAAC,YAAA,EAAA,EAAa,IAAA,EAAY,UAAA,EAAwB,kBAAA,EAAkB,MAAA,EAClE,QAAA,kBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAQ,YAAA;AAAA,MACR,SAAA,EAAW,EAAA,CAAG,UAAA,EAAY,gBAAgB,CAAA;AAAA,MAC1C,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,IAAI,CAAC,UAAA,IAAc,CAAC,cAAA,EAAgB;AAClC,UAAA,QAAA,IAAW;AAAA,QACb;AAAA,MACF,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,WAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACZ,QAAA,EAAA;AAAA,YAAA,IAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,6EAAA,EACd,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,SAAA,EAAU,QAAA,EAAS,CAAA,EAC9C,CAAA,GACE,IAAA;AAAA,4BACJ,GAAA,CAAC,cAAY,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,YAClB,gCACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mCAAA,EAAqC,yBAAc,CAAA,GACjE;AAAA,WAAA,EACN,CAAA;AAAA,UACC,WAAA,mBAAc,GAAA,CAAC,gBAAA,EAAA,EAAkB,QAAA,EAAA,WAAA,EAAY,CAAA,GAAsB;AAAA,SAAA,EACtE,CAAA;AAAA,4BACC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,WAAA,EAAa,aAAa,GAAI,QAAA,EAAS,CAAA;AAAA,QACzD,MAAA,KAAW,UAAA,GAAa,IAAA,mBACvB,IAAA,CAAC,WAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,QAAA,mBACC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,OAAA,EAAQ,aAAA;AAAA,cACR,OAAA,EAAS,QAAA;AAAA,cACT,QAAA,EAAU,UAAA;AAAA,cACV,SAAA,EAAU,YAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA,WACH,GACE,IAAA;AAAA,0BACJ,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,OAAA,EAAQ,SAAA;AAAA,cACR,OAAA,EAAS,MAAM,YAAA,CAAa,KAAK,CAAA;AAAA,cACjC,QAAA,EAAU,UAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UACC,QAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,QAAA,EAAU,cAAA,IAAkB,UAAA,EAAY,OAAA,EAAS,UAAA,EACpE,QAAA,EAAA,WAAA,EACH,CAAA,GACE;AAAA,SAAA,EACN,CAAA;AAAA;AAAA;AAAA,KAGN,CAAA,EACF,CAAA;AAEJ","file":"chunk-
|
|
1
|
+
{"version":3,"sources":["../src/components/form-modal/FormModal.tsx"],"names":[],"mappings":";;;;;AAoCO,SAAS,SAAA,CAAU;AAAA,EACxB,IAAA;AAAA,EACA,YAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA,EAAM,IAAA;AAAA,EACN,aAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,cAAA,GAAiB,KAAA;AAAA,EACjB,WAAA,GAAc,MAAA;AAAA,EACd,WAAA,GAAc,QAAA;AAAA,EACd,UAAA,GAAa,OAAA;AAAA,EACb,IAAA,GAAO,IAAA;AAAA,EACP,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,QAAA;AAAA,EACA,WAAA,GAAc;AAChB,CAAA,EAAmB;AACjB,EAAA,uBACE,GAAA,CAAC,SAAM,IAAA,EAAY,YAAA,EACjB,8BAAC,YAAA,EAAA,EAAa,IAAA,EAAY,UAAA,EAAwB,kBAAA,EAAkB,MAAA,EAClE,QAAA,kBAAA,IAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAQ,YAAA;AAAA,MACR,SAAA,EAAW,EAAA,CAAG,UAAA,EAAY,gBAAgB,CAAA;AAAA,MAC1C,QAAA,EAAU,CAAC,KAAA,KAAU;AACnB,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,IAAI,CAAC,UAAA,IAAc,CAAC,cAAA,EAAgB;AAClC,UAAA,QAAA,IAAW;AAAA,QACb;AAAA,MACF,CAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,WAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yBAAA,EACZ,QAAA,EAAA;AAAA,YAAA,IAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,6EAAA,EACd,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,aAAA,EAAY,MAAA,EAAO,SAAA,EAAU,QAAA,EAAS,CAAA,EAC9C,CAAA,GACE,IAAA;AAAA,4BACJ,GAAA,CAAC,cAAY,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,YAClB,gCACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mCAAA,EAAqC,yBAAc,CAAA,GACjE;AAAA,WAAA,EACN,CAAA;AAAA,UACC,WAAA,mBAAc,GAAA,CAAC,gBAAA,EAAA,EAAkB,QAAA,EAAA,WAAA,EAAY,CAAA,GAAsB;AAAA,SAAA,EACtE,CAAA;AAAA,4BACC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,WAAA,EAAa,aAAa,GAAI,QAAA,EAAS,CAAA;AAAA,QACzD,MAAA,KAAW,UAAA,GAAa,IAAA,mBACvB,IAAA,CAAC,WAAA,EAAA,EACE,QAAA,EAAA;AAAA,UAAA,QAAA,mBACC,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,OAAA,EAAQ,aAAA;AAAA,cACR,OAAA,EAAS,QAAA;AAAA,cACT,QAAA,EAAU,UAAA;AAAA,cACV,SAAA,EAAU,YAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA,WACH,GACE,IAAA;AAAA,0BACJ,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,QAAA;AAAA,cACL,OAAA,EAAQ,SAAA;AAAA,cACR,OAAA,EAAS,MAAM,YAAA,CAAa,KAAK,CAAA;AAAA,cACjC,QAAA,EAAU,UAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UACC,QAAA,mBACC,GAAA,CAAC,MAAA,EAAA,EAAO,IAAA,EAAK,QAAA,EAAS,QAAA,EAAU,cAAA,IAAkB,UAAA,EAAY,OAAA,EAAS,UAAA,EACpE,QAAA,EAAA,WAAA,EACH,CAAA,GACE;AAAA,SAAA,EACN,CAAA;AAAA;AAAA;AAAA,KAGN,CAAA,EACF,CAAA;AAEJ","file":"chunk-2EPZAT3X.js","sourcesContent":["import * as React from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '../../lib/utils'\nimport { Button } from '../button/Button'\nimport {\n Modal,\n ModalContent,\n ModalDescription,\n ModalFooter,\n ModalHeader,\n ModalTitle,\n} from '../modal/Modal'\n\nexport interface FormModalProps {\n open: boolean\n onOpenChange: (open: boolean) => void\n title: React.ReactNode\n description?: React.ReactNode\n icon?: LucideIcon\n headerActions?: React.ReactNode\n children: React.ReactNode\n onSubmit?: () => void\n submitting?: boolean\n submitDisabled?: boolean\n submitLabel?: string\n cancelLabel?: string\n closeLabel?: string\n size?: 'sm' | 'md' | 'lg' | 'xl'\n contentClassName?: string\n bodyClassName?: string\n footer?: React.ReactNode\n hideFooter?: boolean\n onReject?: () => void\n rejectLabel?: string\n}\n\nexport function FormModal({\n open,\n onOpenChange,\n title,\n description,\n icon: Icon,\n headerActions,\n children,\n onSubmit,\n submitting = false,\n submitDisabled = false,\n submitLabel = 'Save',\n cancelLabel = 'Cancel',\n closeLabel = 'Close',\n size = 'md',\n contentClassName,\n bodyClassName,\n footer,\n hideFooter = false,\n onReject,\n rejectLabel = 'Reject',\n}: FormModalProps) {\n return (\n <Modal open={open} onOpenChange={onOpenChange}>\n <ModalContent size={size} closeLabel={closeLabel} aria-describedby={undefined}>\n <form\n data-as=\"form-modal\"\n className={cn('contents', contentClassName)}\n onSubmit={(event) => {\n event.preventDefault()\n if (!submitting && !submitDisabled) {\n onSubmit?.()\n }\n }}\n >\n <ModalHeader>\n <div className=\"flex items-center gap-3\">\n {Icon ? (\n <span className=\"rounded-[var(--as-radius)] bg-[var(--as-secondary)] p-2 text-[var(--as-fg)]\">\n <Icon aria-hidden=\"true\" className=\"size-5\" />\n </span>\n ) : null}\n <ModalTitle>{title}</ModalTitle>\n {headerActions ? (\n <span className=\"ml-auto flex items-center gap-1.5\">{headerActions}</span>\n ) : null}\n </div>\n {description ? <ModalDescription>{description}</ModalDescription> : null}\n </ModalHeader>\n <div className={cn('px-6 pb-2', bodyClassName)}>{children}</div>\n {footer ?? (hideFooter ? null : (\n <ModalFooter>\n {onReject ? (\n <Button\n type=\"button\"\n variant=\"destructive\"\n onClick={onReject}\n disabled={submitting}\n className=\"sm:mr-auto\"\n >\n {rejectLabel}\n </Button>\n ) : null}\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={() => onOpenChange(false)}\n disabled={submitting}\n >\n {cancelLabel}\n </Button>\n {onSubmit ? (\n <Button type=\"submit\" disabled={submitDisabled || submitting} loading={submitting}>\n {submitLabel}\n </Button>\n ) : null}\n </ModalFooter>\n ))}\n </form>\n </ModalContent>\n </Modal>\n )\n}\n"]}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { cn } from './chunk-BLJWR4ZV.js';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
var Textarea = React.forwardRef(
|
|
6
|
+
function Textarea2({ className, label, hint, error, id: idProp, ...props }, ref) {
|
|
7
|
+
const autoId = React.useId();
|
|
8
|
+
const id = idProp ?? (label || hint || error ? autoId : void 0);
|
|
9
|
+
const describedBy = error ? `${id}-error` : hint ? `${id}-hint` : void 0;
|
|
10
|
+
const textarea = /* @__PURE__ */ jsx(
|
|
11
|
+
"textarea",
|
|
12
|
+
{
|
|
13
|
+
ref,
|
|
14
|
+
id,
|
|
15
|
+
"data-as": "textarea",
|
|
16
|
+
"aria-invalid": error ? true : void 0,
|
|
17
|
+
"aria-describedby": describedBy,
|
|
18
|
+
className: cn(
|
|
19
|
+
"flex min-h-16 w-full rounded-[var(--as-radius)] border border-[var(--as-border)] bg-[var(--as-surface)] px-3 py-2 text-sm text-[var(--as-fg)] transition-colors placeholder:text-[var(--as-muted-fg)] focus-visible:border-[var(--as-focus-ring)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--as-focus-ring)] disabled:cursor-not-allowed disabled:opacity-50",
|
|
20
|
+
error && "border-[var(--as-danger)] focus-visible:border-[var(--as-danger)] focus-visible:ring-[var(--as-danger)]",
|
|
21
|
+
className
|
|
22
|
+
),
|
|
23
|
+
...props
|
|
24
|
+
}
|
|
25
|
+
);
|
|
26
|
+
if (!label && !hint && !error) return textarea;
|
|
27
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-1.5", children: [
|
|
28
|
+
label ? /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-sm font-medium leading-none text-[var(--as-fg)]", children: label }) : null,
|
|
29
|
+
textarea,
|
|
30
|
+
hint && !error ? /* @__PURE__ */ jsx("p", { id: `${id}-hint`, className: "text-xs text-[var(--as-muted-fg)]", children: hint }) : null,
|
|
31
|
+
error ? /* @__PURE__ */ jsx("p", { id: `${id}-error`, role: "alert", className: "text-xs font-medium text-[var(--as-danger)]", children: error }) : null
|
|
32
|
+
] });
|
|
33
|
+
}
|
|
34
|
+
);
|
|
35
|
+
|
|
36
|
+
export { Textarea };
|
|
37
|
+
//# sourceMappingURL=chunk-C74WWM23.js.map
|
|
38
|
+
//# sourceMappingURL=chunk-C74WWM23.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/textarea/Textarea.tsx"],"names":["Textarea"],"mappings":";;;;AASO,IAAM,QAAA,GAAiB,KAAA,CAAA,UAAA;AAAA,EAC5B,SAASA,SAAAA,CAAS,EAAE,SAAA,EAAW,KAAA,EAAO,IAAA,EAAM,KAAA,EAAO,EAAA,EAAI,MAAA,EAAQ,GAAG,KAAA,EAAM,EAAG,GAAA,EAAK;AAC9E,IAAA,MAAM,SAAe,KAAA,CAAA,KAAA,EAAM;AAC3B,IAAA,MAAM,EAAA,GAAK,MAAA,KAAW,KAAA,IAAS,IAAA,IAAQ,QAAQ,MAAA,GAAS,MAAA,CAAA;AACxD,IAAA,MAAM,WAAA,GAAc,QAAQ,CAAA,EAAG,EAAE,WAAW,IAAA,GAAO,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,GAAU,MAAA;AAElE,IAAA,MAAM,QAAA,mBACJ,GAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,EAAA;AAAA,QACA,SAAA,EAAQ,UAAA;AAAA,QACR,cAAA,EAAc,QAAQ,IAAA,GAAO,MAAA;AAAA,QAC7B,kBAAA,EAAkB,WAAA;AAAA,QAClB,SAAA,EAAW,EAAA;AAAA,UACT,6XAAA;AAAA,UACA,KAAA,IACE,yGAAA;AAAA,UACF;AAAA,SACF;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAGF,IAAA,IAAI,CAAC,KAAA,IAAS,CAAC,IAAA,IAAQ,CAAC,OAAO,OAAO,QAAA;AAEtC,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EACZ,QAAA,EAAA;AAAA,MAAA,KAAA,uBACE,OAAA,EAAA,EAAM,OAAA,EAAS,IAAI,SAAA,EAAU,sDAAA,EAC3B,iBACH,CAAA,GACE,IAAA;AAAA,MACH,QAAA;AAAA,MACA,IAAA,IAAQ,CAAC,KAAA,mBACR,GAAA,CAAC,GAAA,EAAA,EAAE,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,EAAS,SAAA,EAAU,mCAAA,EAC5B,QAAA,EAAA,IAAA,EACH,CAAA,GACE,IAAA;AAAA,MACH,KAAA,mBACC,GAAA,CAAC,GAAA,EAAA,EAAE,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,MAAA,CAAA,EAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,6CAAA,EAC1C,QAAA,EAAA,KAAA,EACH,CAAA,GACE;AAAA,KAAA,EACN,CAAA;AAAA,EAEJ;AACF","file":"chunk-C74WWM23.js","sourcesContent":["import * as React from 'react'\nimport { cn } from '../../lib/utils'\n\nexport interface TextareaProps extends React.ComponentProps<'textarea'> {\n label?: string\n hint?: string\n error?: string\n}\n\nexport const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(\n function Textarea({ className, label, hint, error, id: idProp, ...props }, ref) {\n const autoId = React.useId()\n const id = idProp ?? (label || hint || error ? autoId : undefined)\n const describedBy = error ? `${id}-error` : hint ? `${id}-hint` : undefined\n\n const textarea = (\n <textarea\n ref={ref}\n id={id}\n data-as=\"textarea\"\n aria-invalid={error ? true : undefined}\n aria-describedby={describedBy}\n className={cn(\n 'flex min-h-16 w-full rounded-[var(--as-radius)] border border-[var(--as-border)] bg-[var(--as-surface)] px-3 py-2 text-sm text-[var(--as-fg)] transition-colors placeholder:text-[var(--as-muted-fg)] focus-visible:border-[var(--as-focus-ring)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--as-focus-ring)] disabled:cursor-not-allowed disabled:opacity-50',\n error &&\n 'border-[var(--as-danger)] focus-visible:border-[var(--as-danger)] focus-visible:ring-[var(--as-danger)]',\n className,\n )}\n {...props}\n />\n )\n\n if (!label && !hint && !error) return textarea\n\n return (\n <div className=\"flex w-full flex-col gap-1.5\">\n {label ? (\n <label htmlFor={id} className=\"text-sm font-medium leading-none text-[var(--as-fg)]\">\n {label}\n </label>\n ) : null}\n {textarea}\n {hint && !error ? (\n <p id={`${id}-hint`} className=\"text-xs text-[var(--as-muted-fg)]\">\n {hint}\n </p>\n ) : null}\n {error ? (\n <p id={`${id}-error`} role=\"alert\" className=\"text-xs font-medium text-[var(--as-danger)]\">\n {error}\n </p>\n ) : null}\n </div>\n )\n },\n)\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-HTXTVWVG.js"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { Textarea } from './chunk-C74WWM23.js';
|
|
2
|
+
import { FormModal } from './chunk-2EPZAT3X.js';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { Sparkles } from 'lucide-react';
|
|
5
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
function AiMagicFill({
|
|
8
|
+
open,
|
|
9
|
+
onOpenChange,
|
|
10
|
+
onSubmit,
|
|
11
|
+
busy = false,
|
|
12
|
+
error,
|
|
13
|
+
title = "Magic Fill",
|
|
14
|
+
subtitle = "AI-powered data extraction",
|
|
15
|
+
description,
|
|
16
|
+
promptLabel = "Describe details",
|
|
17
|
+
placeholder = "Describe the data here\u2026",
|
|
18
|
+
submitLabel,
|
|
19
|
+
cancelLabel = "Cancel",
|
|
20
|
+
className
|
|
21
|
+
}) {
|
|
22
|
+
const [prompt, setPrompt] = React.useState("");
|
|
23
|
+
const submit = () => {
|
|
24
|
+
const trimmed = prompt.trim();
|
|
25
|
+
if (!trimmed || busy) return;
|
|
26
|
+
onSubmit(trimmed);
|
|
27
|
+
setPrompt("");
|
|
28
|
+
};
|
|
29
|
+
return /* @__PURE__ */ jsx(
|
|
30
|
+
FormModal,
|
|
31
|
+
{
|
|
32
|
+
open,
|
|
33
|
+
onOpenChange,
|
|
34
|
+
title,
|
|
35
|
+
description: subtitle,
|
|
36
|
+
icon: Sparkles,
|
|
37
|
+
submitLabel: submitLabel ?? `Apply ${title}`,
|
|
38
|
+
cancelLabel,
|
|
39
|
+
submitting: busy,
|
|
40
|
+
submitDisabled: !prompt.trim(),
|
|
41
|
+
onSubmit: submit,
|
|
42
|
+
contentClassName: className,
|
|
43
|
+
children: /* @__PURE__ */ jsxs("div", { "data-as": "ai-magic-fill", className: "flex flex-col gap-4", children: [
|
|
44
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
|
|
45
|
+
/* @__PURE__ */ jsx(
|
|
46
|
+
"label",
|
|
47
|
+
{
|
|
48
|
+
htmlFor: "ai-magic-fill-prompt",
|
|
49
|
+
className: "text-[11px] font-bold uppercase tracking-[0.18em] text-[var(--as-muted-fg)]",
|
|
50
|
+
children: promptLabel
|
|
51
|
+
}
|
|
52
|
+
),
|
|
53
|
+
/* @__PURE__ */ jsx(
|
|
54
|
+
Textarea,
|
|
55
|
+
{
|
|
56
|
+
id: "ai-magic-fill-prompt",
|
|
57
|
+
rows: 5,
|
|
58
|
+
value: prompt,
|
|
59
|
+
onChange: (event) => setPrompt(event.target.value),
|
|
60
|
+
placeholder,
|
|
61
|
+
className: "resize-none leading-relaxed"
|
|
62
|
+
}
|
|
63
|
+
)
|
|
64
|
+
] }),
|
|
65
|
+
description ? /* @__PURE__ */ jsx("p", { className: "rounded-[var(--as-radius)] border border-[color-mix(in_srgb,var(--as-ai)_25%,transparent)] bg-[color-mix(in_srgb,var(--as-ai)_8%,transparent)] p-3 text-xs font-medium leading-relaxed text-[var(--as-fg)]", children: description }) : null,
|
|
66
|
+
error ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-xs font-semibold text-[var(--as-danger)]", children: error }) : null
|
|
67
|
+
] })
|
|
68
|
+
}
|
|
69
|
+
);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
export { AiMagicFill };
|
|
73
|
+
//# sourceMappingURL=chunk-L4NM55XW.js.map
|
|
74
|
+
//# sourceMappingURL=chunk-L4NM55XW.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/ai-magic-fill/AiMagicFill.tsx"],"names":[],"mappings":";;;;;;AAqBO,SAAS,WAAA,CAAY;AAAA,EAC1B,IAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,KAAA;AAAA,EACP,KAAA;AAAA,EACA,KAAA,GAAQ,YAAA;AAAA,EACR,QAAA,GAAW,4BAAA;AAAA,EACX,WAAA;AAAA,EACA,WAAA,GAAc,kBAAA;AAAA,EACd,WAAA,GAAc,8BAAA;AAAA,EACd,WAAA;AAAA,EACA,WAAA,GAAc,QAAA;AAAA,EACd;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAU,eAAS,EAAE,CAAA;AAE7C,EAAA,MAAM,SAAS,MAAM;AACnB,IAAA,MAAM,OAAA,GAAU,OAAO,IAAA,EAAK;AAC5B,IAAA,IAAI,CAAC,WAAW,IAAA,EAAM;AACtB,IAAA,QAAA,CAAS,OAAO,CAAA;AAChB,IAAA,SAAA,CAAU,EAAE,CAAA;AAAA,EACd,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,YAAA;AAAA,MACA,KAAA;AAAA,MACA,WAAA,EAAa,QAAA;AAAA,MACb,IAAA,EAAM,QAAA;AAAA,MACN,WAAA,EAAa,WAAA,IAAe,CAAA,MAAA,EAAS,KAAK,CAAA,CAAA;AAAA,MAC1C,WAAA;AAAA,MACA,UAAA,EAAY,IAAA;AAAA,MACZ,cAAA,EAAgB,CAAC,MAAA,CAAO,IAAA,EAAK;AAAA,MAC7B,QAAA,EAAU,MAAA;AAAA,MACV,gBAAA,EAAkB,SAAA;AAAA,MAElB,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAQ,eAAA,EAAgB,WAAU,qBAAA,EACrC,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,uBAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,OAAA,EAAQ,sBAAA;AAAA,cACR,SAAA,EAAU,6EAAA;AAAA,cAET,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,0BACA,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,EAAA,EAAG,sBAAA;AAAA,cACH,IAAA,EAAM,CAAA;AAAA,cACN,KAAA,EAAO,MAAA;AAAA,cACP,UAAU,CAAC,KAAA,KACT,SAAA,CAAU,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,cAE9B,WAAA;AAAA,cACA,SAAA,EAAU;AAAA;AAAA;AACZ,SAAA,EACF,CAAA;AAAA,QACC,8BACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,4MAAA,EACV,uBACH,CAAA,GACE,IAAA;AAAA,QACH,KAAA,uBACE,GAAA,EAAA,EAAE,IAAA,EAAK,SAAQ,SAAA,EAAU,+CAAA,EACvB,iBACH,CAAA,GACE;AAAA,OAAA,EACN;AAAA;AAAA,GACF;AAEJ","file":"chunk-L4NM55XW.js","sourcesContent":["import * as React from 'react'\nimport { Sparkles } from 'lucide-react'\nimport { FormModal } from '../form-modal/FormModal'\nimport { Textarea } from '../textarea/Textarea'\n\nexport interface AiMagicFillProps {\n open: boolean\n onOpenChange: (open: boolean) => void\n onSubmit: (prompt: string) => void\n busy?: boolean\n error?: string | null\n title?: string\n subtitle?: string\n description?: string\n promptLabel?: string\n placeholder?: string\n submitLabel?: string\n cancelLabel?: string\n className?: string\n}\n\nexport function AiMagicFill({\n open,\n onOpenChange,\n onSubmit,\n busy = false,\n error,\n title = 'Magic Fill',\n subtitle = 'AI-powered data extraction',\n description,\n promptLabel = 'Describe details',\n placeholder = 'Describe the data here…',\n submitLabel,\n cancelLabel = 'Cancel',\n className,\n}: AiMagicFillProps) {\n const [prompt, setPrompt] = React.useState('')\n\n const submit = () => {\n const trimmed = prompt.trim()\n if (!trimmed || busy) return\n onSubmit(trimmed)\n setPrompt('')\n }\n\n return (\n <FormModal\n open={open}\n onOpenChange={onOpenChange}\n title={title}\n description={subtitle}\n icon={Sparkles}\n submitLabel={submitLabel ?? `Apply ${title}`}\n cancelLabel={cancelLabel}\n submitting={busy}\n submitDisabled={!prompt.trim()}\n onSubmit={submit}\n contentClassName={className}\n >\n <div data-as=\"ai-magic-fill\" className=\"flex flex-col gap-4\">\n <div className=\"flex flex-col gap-1.5\">\n <label\n htmlFor=\"ai-magic-fill-prompt\"\n className=\"text-[11px] font-bold uppercase tracking-[0.18em] text-[var(--as-muted-fg)]\"\n >\n {promptLabel}\n </label>\n <Textarea\n id=\"ai-magic-fill-prompt\"\n rows={5}\n value={prompt}\n onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) =>\n setPrompt(event.target.value)\n }\n placeholder={placeholder}\n className=\"resize-none leading-relaxed\"\n />\n </div>\n {description ? (\n <p className=\"rounded-[var(--as-radius)] border border-[color-mix(in_srgb,var(--as-ai)_25%,transparent)] bg-[color-mix(in_srgb,var(--as-ai)_8%,transparent)] p-3 text-xs font-medium leading-relaxed text-[var(--as-fg)]\">\n {description}\n </p>\n ) : null}\n {error ? (\n <p role=\"alert\" className=\"text-xs font-semibold text-[var(--as-danger)]\">\n {error}\n </p>\n ) : null}\n </div>\n </FormModal>\n )\n}\n"]}
|
|
@@ -32,5 +32,5 @@ var Input = React.forwardRef(function Input2({ className, label, hint, error, id
|
|
|
32
32
|
});
|
|
33
33
|
|
|
34
34
|
export { Input };
|
|
35
|
-
//# sourceMappingURL=chunk-
|
|
36
|
-
//# sourceMappingURL=chunk-
|
|
35
|
+
//# sourceMappingURL=chunk-M4V7XHL7.js.map
|
|
36
|
+
//# sourceMappingURL=chunk-M4V7XHL7.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/input/Input.tsx"],"names":["Input"],"mappings":";;;;AASO,IAAM,KAAA,GAAc,KAAA,CAAA,UAAA,CAAyC,SAASA,MAAAA,CAC3E,EAAE,SAAA,EAAW,KAAA,EAAO,IAAA,EAAM,KAAA,EAAO,EAAA,EAAI,MAAA,EAAQ,GAAG,KAAA,IAChD,GAAA,EACA;AACA,EAAA,MAAM,SAAe,KAAA,CAAA,KAAA,EAAM;AAC3B,EAAA,MAAM,EAAA,GAAK,MAAA,KAAW,KAAA,IAAS,IAAA,IAAQ,QAAQ,MAAA,GAAS,MAAA,CAAA;AACxD,EAAA,MAAM,WAAA,GAAc,QAAQ,CAAA,EAAG,EAAE,WAAW,IAAA,GAAO,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,GAAU,MAAA;AAElE,EAAA,MAAM,KAAA,mBACJ,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,EAAA;AAAA,MACA,SAAA,EAAQ,OAAA;AAAA,MACR,cAAA,EAAc,QAAQ,IAAA,GAAO,MAAA;AAAA,MAC7B,kBAAA,EAAkB,WAAA;AAAA,MAClB,SAAA,EAAW,EAAA;AAAA,QACT,oZAAA;AAAA,QACA,KAAA,IACE,yGAAA;AAAA,QACF;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,IAAI,CAAC,KAAA,IAAS,CAAC,IAAA,IAAQ,CAAC,OAAO,OAAO,KAAA;AAEtC,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EACZ,QAAA,EAAA;AAAA,IAAA,KAAA,uBACE,OAAA,EAAA,EAAM,OAAA,EAAS,IAAI,SAAA,EAAU,sDAAA,EAC3B,iBACH,CAAA,GACE,IAAA;AAAA,IACH,KAAA;AAAA,IACA,IAAA,IAAQ,CAAC,KAAA,mBACR,GAAA,CAAC,GAAA,EAAA,EAAE,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,EAAS,SAAA,EAAU,mCAAA,EAC5B,QAAA,EAAA,IAAA,EACH,CAAA,GACE,IAAA;AAAA,IACH,KAAA,mBACC,GAAA,CAAC,GAAA,EAAA,EAAE,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,MAAA,CAAA,EAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,6CAAA,EAC1C,QAAA,EAAA,KAAA,EACH,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ,CAAC","file":"chunk-M4V7XHL7.js","sourcesContent":["import * as React from 'react'\nimport { cn } from '../../lib/utils'\n\nexport interface InputProps extends React.ComponentProps<'input'> {\n label?: React.ReactNode\n hint?: React.ReactNode\n error?: string\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(\n { className, label, hint, error, id: idProp, ...props },\n ref,\n) {\n const autoId = React.useId()\n const id = idProp ?? (label || hint || error ? autoId : undefined)\n const describedBy = error ? `${id}-error` : hint ? `${id}-hint` : undefined\n\n const input = (\n <input\n ref={ref}\n id={id}\n data-as=\"input\"\n aria-invalid={error ? true : undefined}\n aria-describedby={describedBy}\n className={cn(\n 'flex h-9 w-full rounded-[var(--as-radius)] border border-[var(--as-border)] bg-[var(--as-surface)] px-3 py-1 text-sm text-[var(--as-fg)] transition-colors placeholder:text-[var(--as-muted-fg)] focus-visible:border-[var(--as-focus-ring)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--as-focus-ring)] focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50',\n error &&\n 'border-[var(--as-danger)] focus-visible:border-[var(--as-danger)] focus-visible:ring-[var(--as-danger)]',\n className,\n )}\n {...props}\n />\n )\n\n if (!label && !hint && !error) return input\n\n return (\n <div className=\"flex w-full flex-col gap-1.5\">\n {label ? (\n <label htmlFor={id} className=\"text-sm font-medium leading-none text-[var(--as-fg)]\">\n {label}\n </label>\n ) : null}\n {input}\n {hint && !error ? (\n <p id={`${id}-hint`} className=\"text-xs text-[var(--as-muted-fg)]\">\n {hint}\n </p>\n ) : null}\n {error ? (\n <p id={`${id}-error`} role=\"alert\" className=\"text-xs font-medium text-[var(--as-danger)]\">\n {error}\n </p>\n ) : null}\n </div>\n )\n})\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-PSAJSOXL.js"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
type ConnectionTestStatus = 'idle' | 'testing' | 'ok' | 'fail';
|
|
4
|
+
interface ConnectionTestRowProps {
|
|
5
|
+
status: ConnectionTestStatus;
|
|
6
|
+
latencyMs?: number | null;
|
|
7
|
+
label?: string;
|
|
8
|
+
testLabel?: string;
|
|
9
|
+
okLabel?: string;
|
|
10
|
+
failLabel?: string;
|
|
11
|
+
latencyLabel?: string;
|
|
12
|
+
errorMessage?: string | null;
|
|
13
|
+
onTest?: () => void;
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
className?: string;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* Presentational connection-test row (idle/testing/ok/fail + latency).
|
|
19
|
+
* The actual ping is app-side: flip `status` from the test handler.
|
|
20
|
+
*/
|
|
21
|
+
declare const ConnectionTestRow: React.ForwardRefExoticComponent<ConnectionTestRowProps & React.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
|
|
23
|
+
export { ConnectionTestRow, type ConnectionTestRowProps, type ConnectionTestStatus };
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { Spinner } from './chunk-INTST5VG.js';
|
|
2
|
+
import { cn } from './chunk-BLJWR4ZV.js';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { X, Check, TriangleAlert } from 'lucide-react';
|
|
5
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
var ConnectionTestRow = React.forwardRef(function ConnectionTestRow2({
|
|
8
|
+
status,
|
|
9
|
+
latencyMs,
|
|
10
|
+
label = "Connection",
|
|
11
|
+
testLabel = "Test",
|
|
12
|
+
okLabel = "Connected",
|
|
13
|
+
failLabel = "Failed",
|
|
14
|
+
latencyLabel = "ms",
|
|
15
|
+
errorMessage,
|
|
16
|
+
onTest,
|
|
17
|
+
disabled = false,
|
|
18
|
+
className
|
|
19
|
+
}, ref) {
|
|
20
|
+
const state = status === "ok" ? { text: okLabel, icon: /* @__PURE__ */ jsx(Check, { className: "size-3.5", "aria-hidden": true }), tone: "text-[var(--as-success)]" } : status === "fail" ? {
|
|
21
|
+
text: failLabel,
|
|
22
|
+
icon: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-3.5", "aria-hidden": true }),
|
|
23
|
+
tone: "text-[var(--as-danger)]"
|
|
24
|
+
} : null;
|
|
25
|
+
return /* @__PURE__ */ jsxs(
|
|
26
|
+
"div",
|
|
27
|
+
{
|
|
28
|
+
ref,
|
|
29
|
+
"data-as": "connection-test-row",
|
|
30
|
+
"data-status": status,
|
|
31
|
+
className: cn(
|
|
32
|
+
"flex items-center justify-between gap-3 rounded-[var(--as-radius)] border border-[var(--as-border)] bg-[var(--as-surface)] px-3 py-2",
|
|
33
|
+
className
|
|
34
|
+
),
|
|
35
|
+
children: [
|
|
36
|
+
/* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2 text-sm", children: [
|
|
37
|
+
/* @__PURE__ */ jsx("span", { className: "font-medium text-[var(--as-fg)]", children: label }),
|
|
38
|
+
status === "testing" ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-[var(--as-muted-fg)]", role: "status", children: [
|
|
39
|
+
/* @__PURE__ */ jsx(Spinner, { size: "sm" }),
|
|
40
|
+
testLabel,
|
|
41
|
+
"\u2026"
|
|
42
|
+
] }) : state ? /* @__PURE__ */ jsxs("span", { className: cn("flex items-center gap-1 font-medium", state.tone), children: [
|
|
43
|
+
state.icon,
|
|
44
|
+
state.text,
|
|
45
|
+
status === "ok" && latencyMs != null ? /* @__PURE__ */ jsxs("span", { className: "font-normal text-[var(--as-muted-fg)]", children: [
|
|
46
|
+
"\xB7 ",
|
|
47
|
+
latencyMs,
|
|
48
|
+
latencyLabel
|
|
49
|
+
] }) : null
|
|
50
|
+
] }) : null,
|
|
51
|
+
status === "fail" && errorMessage ? /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-[var(--as-danger)]", children: errorMessage }) : null
|
|
52
|
+
] }),
|
|
53
|
+
onTest ? /* @__PURE__ */ jsxs(
|
|
54
|
+
"button",
|
|
55
|
+
{
|
|
56
|
+
type: "button",
|
|
57
|
+
onClick: onTest,
|
|
58
|
+
disabled: disabled || status === "testing",
|
|
59
|
+
className: "shrink-0 cursor-pointer rounded-[var(--as-radius-sm)] border border-[var(--as-border)] px-2.5 py-1 text-xs font-medium text-[var(--as-fg)] transition-colors hover:bg-[var(--as-secondary)] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)] disabled:pointer-events-none disabled:opacity-50",
|
|
60
|
+
children: [
|
|
61
|
+
status === "fail" ? /* @__PURE__ */ jsx(X, { className: "mr-1 inline size-3", "aria-hidden": true }) : null,
|
|
62
|
+
testLabel
|
|
63
|
+
]
|
|
64
|
+
}
|
|
65
|
+
) : null
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
);
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
export { ConnectionTestRow };
|
|
72
|
+
//# sourceMappingURL=connection-test-row.js.map
|
|
73
|
+
//# sourceMappingURL=connection-test-row.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/connection-test-row/ConnectionTestRow.tsx"],"names":["ConnectionTestRow"],"mappings":";;;;;;AAyBO,IAAM,iBAAA,GAA0B,KAAA,CAAA,UAAA,CAGrC,SAASA,kBAAAA,CACT;AAAA,EACE,MAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA,GAAQ,YAAA;AAAA,EACR,SAAA,GAAY,MAAA;AAAA,EACZ,OAAA,GAAU,WAAA;AAAA,EACV,SAAA,GAAY,QAAA;AAAA,EACZ,YAAA,GAAe,IAAA;AAAA,EACf,YAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX;AACF,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,QACJ,MAAA,KAAW,IAAA,GACP,EAAE,IAAA,EAAM,OAAA,EAAS,sBAAM,GAAA,CAAC,KAAA,EAAA,EAAM,SAAA,EAAU,UAAA,EAAW,eAAW,IAAA,EAAC,CAAA,EAAI,MAAM,0BAAA,EAA2B,GACpG,WAAW,MAAA,GACT;AAAA,IACE,IAAA,EAAM,SAAA;AAAA,IACN,sBAAM,GAAA,CAAC,aAAA,EAAA,EAAc,SAAA,EAAU,UAAA,EAAW,eAAW,IAAA,EAAC,CAAA;AAAA,IACtD,IAAA,EAAM;AAAA,GACR,GACA,IAAA;AAER,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAQ,qBAAA;AAAA,MACR,aAAA,EAAa,MAAA;AAAA,MACb,SAAA,EAAW,EAAA;AAAA,QACT,sIAAA;AAAA,QACA;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,yCAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,iCAAA,EAAmC,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,UACxD,WAAW,SAAA,mBACV,IAAA,CAAC,UAAK,SAAA,EAAU,qDAAA,EAAsD,MAAK,QAAA,EACzE,QAAA,EAAA;AAAA,4BAAA,GAAA,CAAC,OAAA,EAAA,EAAQ,MAAK,IAAA,EAAK,CAAA;AAAA,YAClB,SAAA;AAAA,YAAU;AAAA,WAAA,EACb,CAAA,GACE,wBACF,IAAA,CAAC,MAAA,EAAA,EAAK,WAAW,EAAA,CAAG,qCAAA,EAAuC,KAAA,CAAM,IAAI,CAAA,EAClE,QAAA,EAAA;AAAA,YAAA,KAAA,CAAM,IAAA;AAAA,YACN,KAAA,CAAM,IAAA;AAAA,YACN,WAAW,IAAA,IAAQ,SAAA,IAAa,uBAC/B,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,uCAAA,EAAwC,QAAA,EAAA;AAAA,cAAA,OAAA;AAAA,cACnD,SAAA;AAAA,cACF;AAAA,aAAA,EACH,CAAA,GACE;AAAA,WAAA,EACN,CAAA,GACE,IAAA;AAAA,UACH,MAAA,KAAW,UAAU,YAAA,mBACpB,GAAA,CAAC,UAAK,SAAA,EAAU,0CAAA,EACb,wBACH,CAAA,GACE;AAAA,SAAA,EACN,CAAA;AAAA,QACC,MAAA,mBACC,IAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAS,MAAA;AAAA,YACT,QAAA,EAAU,YAAY,MAAA,KAAW,SAAA;AAAA,YACjC,SAAA,EAAU,kVAAA;AAAA,YAET,QAAA,EAAA;AAAA,cAAA,MAAA,KAAW,yBAAS,GAAA,CAAC,CAAA,EAAA,EAAE,WAAU,oBAAA,EAAqB,aAAA,EAAW,MAAC,CAAA,GAAK,IAAA;AAAA,cACvE;AAAA;AAAA;AAAA,SACH,GACE;AAAA;AAAA;AAAA,GACN;AAEJ,CAAC","file":"connection-test-row.js","sourcesContent":["import * as React from 'react'\nimport { Check, TriangleAlert, X } from 'lucide-react'\nimport { cn } from '../../lib/utils'\nimport { Spinner } from '../spinner/Spinner'\n\nexport type ConnectionTestStatus = 'idle' | 'testing' | 'ok' | 'fail'\n\nexport interface ConnectionTestRowProps {\n status: ConnectionTestStatus\n latencyMs?: number | null\n label?: string\n testLabel?: string\n okLabel?: string\n failLabel?: string\n latencyLabel?: string\n errorMessage?: string | null\n onTest?: () => void\n disabled?: boolean\n className?: string\n}\n\n/**\n * Presentational connection-test row (idle/testing/ok/fail + latency).\n * The actual ping is app-side: flip `status` from the test handler.\n */\nexport const ConnectionTestRow = React.forwardRef<\n HTMLDivElement,\n ConnectionTestRowProps\n>(function ConnectionTestRow(\n {\n status,\n latencyMs,\n label = 'Connection',\n testLabel = 'Test',\n okLabel = 'Connected',\n failLabel = 'Failed',\n latencyLabel = 'ms',\n errorMessage,\n onTest,\n disabled = false,\n className,\n },\n ref,\n) {\n const state =\n status === 'ok'\n ? { text: okLabel, icon: <Check className=\"size-3.5\" aria-hidden />, tone: 'text-[var(--as-success)]' }\n : status === 'fail'\n ? {\n text: failLabel,\n icon: <TriangleAlert className=\"size-3.5\" aria-hidden />,\n tone: 'text-[var(--as-danger)]',\n }\n : null\n\n return (\n <div\n ref={ref}\n data-as=\"connection-test-row\"\n data-status={status}\n className={cn(\n 'flex items-center justify-between gap-3 rounded-[var(--as-radius)] border border-[var(--as-border)] bg-[var(--as-surface)] px-3 py-2',\n className,\n )}\n >\n <div className=\"flex min-w-0 items-center gap-2 text-sm\">\n <span className=\"font-medium text-[var(--as-fg)]\">{label}</span>\n {status === 'testing' ? (\n <span className=\"flex items-center gap-1.5 text-[var(--as-muted-fg)]\" role=\"status\">\n <Spinner size=\"sm\" />\n {testLabel}…\n </span>\n ) : state ? (\n <span className={cn('flex items-center gap-1 font-medium', state.tone)}>\n {state.icon}\n {state.text}\n {status === 'ok' && latencyMs != null ? (\n <span className=\"font-normal text-[var(--as-muted-fg)]\">\n · {latencyMs}\n {latencyLabel}\n </span>\n ) : null}\n </span>\n ) : null}\n {status === 'fail' && errorMessage ? (\n <span className=\"truncate text-xs text-[var(--as-danger)]\">\n {errorMessage}\n </span>\n ) : null}\n </div>\n {onTest ? (\n <button\n type=\"button\"\n onClick={onTest}\n disabled={disabled || status === 'testing'}\n className=\"shrink-0 cursor-pointer rounded-[var(--as-radius-sm)] border border-[var(--as-border)] px-2.5 py-1 text-xs font-medium text-[var(--as-fg)] transition-colors hover:bg-[var(--as-secondary)] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)] disabled:pointer-events-none disabled:opacity-50\"\n >\n {status === 'fail' ? <X className=\"mr-1 inline size-3\" aria-hidden /> : null}\n {testLabel}\n </button>\n ) : null}\n </div>\n )\n})\n"]}
|
package/dist/form-modal.js
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -5,6 +5,7 @@ export { Portal, PortalProps } from './portal.js';
|
|
|
5
5
|
export { ThemeScope, ThemeScopeProps } from './theme-scope.js';
|
|
6
6
|
export { AiAction, AiActionsDropdown, AiActionsDropdownProps } from './ai-actions-dropdown.js';
|
|
7
7
|
export { AiButton, AiButtonProps } from './ai-button.js';
|
|
8
|
+
export { AiMagicFill, AiMagicFillProps } from './ai-magic-fill.js';
|
|
8
9
|
export { Badge, BadgeProps, badgeVariants } from './badge.js';
|
|
9
10
|
export { BreadcrumbItem, BreadcrumbLinkProps, Breadcrumbs, BreadcrumbsProps } from './breadcrumbs.js';
|
|
10
11
|
export { Button, ButtonProps, buttonVariants } from './button.js';
|
package/dist/index.js
CHANGED
|
@@ -1,43 +1,44 @@
|
|
|
1
|
-
export { SelectionBar } from './chunk-HSUCCANX.js';
|
|
2
|
-
export { Table } from './chunk-5LRRVD27.js';
|
|
3
1
|
export { ThemeScope } from './chunk-TGU3PKNM.js';
|
|
4
2
|
export { InfoTooltip, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './chunk-34NO2UOB.js';
|
|
5
3
|
export { UndoNotice } from './chunk-OUHUVACM.js';
|
|
6
4
|
export { ViewToggle } from './chunk-MXOBOS4Y.js';
|
|
7
5
|
export { Stepper, Wizard } from './chunk-75QQR2VT.js';
|
|
8
|
-
export { PanelModal } from './chunk-BWPNEQ3T.js';
|
|
9
|
-
export { Portal } from './chunk-7YLR4AGA.js';
|
|
10
6
|
export { RangeBar } from './chunk-5AVBKEDQ.js';
|
|
11
7
|
export { ScaleSlider, scaleColorForValue } from './chunk-UIUALJNR.js';
|
|
12
8
|
export { SearchInput } from './chunk-H5U4KNXF.js';
|
|
9
|
+
export { SelectionBar } from './chunk-HSUCCANX.js';
|
|
10
|
+
export { Table } from './chunk-5LRRVD27.js';
|
|
11
|
+
export { Input } from './chunk-M4V7XHL7.js';
|
|
12
|
+
export { MarqueeBand, MarqueeSurface, hitTestIds, marqueeRect, rectsIntersect, useMarquee } from './chunk-RU3DEF2O.js';
|
|
13
|
+
export { PanelModal } from './chunk-BWPNEQ3T.js';
|
|
14
|
+
export { Portal } from './chunk-7YLR4AGA.js';
|
|
15
|
+
export { ContextMenu } from './chunk-WA7Q4TTA.js';
|
|
16
|
+
export { ActionMenu, Menu, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuSeparator, MenuTrigger } from './chunk-JWAX2AOO.js';
|
|
17
|
+
export { DatePicker } from './chunk-UU2V5FGF.js';
|
|
13
18
|
export { EmptyState } from './chunk-KDJLYKR6.js';
|
|
14
19
|
export { ErrorBanner } from './chunk-BJOY3XL7.js';
|
|
15
20
|
export { ExpandableSearch } from './chunk-4SW3ESVI.js';
|
|
16
21
|
export { FieldLabel } from './chunk-I5J6SDLK.js';
|
|
17
|
-
export { FormModal } from './chunk-BUPMDOVL.js';
|
|
18
22
|
export { InfoButton } from './chunk-OT6EQFMP.js';
|
|
19
23
|
export { PopoverButton } from './chunk-BE3XFZWU.js';
|
|
20
|
-
export {
|
|
21
|
-
export { MarqueeBand, MarqueeSurface, hitTestIds, marqueeRect, rectsIntersect, useMarquee } from './chunk-RU3DEF2O.js';
|
|
24
|
+
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-HSWSYEFQ.js';
|
|
22
25
|
export { CheckIndicator } from './chunk-XE4TFW63.js';
|
|
23
26
|
export { ChipInput } from './chunk-TPLQL62V.js';
|
|
24
27
|
export { ChipList } from './chunk-BN3YHYYL.js';
|
|
25
28
|
export { Combobox, ComboboxMulti } from './chunk-W5WDGME5.js';
|
|
26
29
|
export { ConfirmationModal } from './chunk-TKKHWO6C.js';
|
|
27
|
-
export { Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, ModalTrigger, modalContentVariants } from './chunk-SXVOJ7WE.js';
|
|
28
30
|
export { CopyButton } from './chunk-CZ2BL2ZL.js';
|
|
29
|
-
export { ContextMenu } from './chunk-WA7Q4TTA.js';
|
|
30
|
-
export { ActionMenu, Menu, MenuContent, MenuGroup, MenuItem, MenuLabel, MenuSeparator, MenuTrigger } from './chunk-JWAX2AOO.js';
|
|
31
|
-
export { DatePicker } from './chunk-UU2V5FGF.js';
|
|
32
31
|
export { rawTokens, semanticTokens } from './chunk-GDGKARRB.js';
|
|
33
32
|
export { AiActionsDropdown } from './chunk-I37SYHM7.js';
|
|
34
33
|
export { AiButton } from './chunk-L56KGPGS.js';
|
|
35
34
|
export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from './chunk-SIIY2EGI.js';
|
|
35
|
+
export { AiMagicFill } from './chunk-L4NM55XW.js';
|
|
36
|
+
export { FormModal } from './chunk-2EPZAT3X.js';
|
|
37
|
+
export { Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, ModalTrigger, modalContentVariants } from './chunk-SXVOJ7WE.js';
|
|
36
38
|
export { Badge, badgeVariants } from './chunk-SKTLC2XY.js';
|
|
37
39
|
export { Breadcrumbs } from './chunk-TFS2NUET.js';
|
|
38
40
|
export { Button, buttonVariants } from './chunk-GTXGTQ6F.js';
|
|
39
41
|
export { Spinner } from './chunk-INTST5VG.js';
|
|
40
|
-
export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-HSWSYEFQ.js';
|
|
41
42
|
export { cn } from './chunk-BLJWR4ZV.js';
|
|
42
43
|
//# sourceMappingURL=index.js.map
|
|
43
44
|
//# sourceMappingURL=index.js.map
|
package/dist/input.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
|
|
3
3
|
interface InputProps extends React.ComponentProps<'input'> {
|
|
4
|
-
label?:
|
|
5
|
-
hint?:
|
|
4
|
+
label?: React.ReactNode;
|
|
5
|
+
hint?: React.ReactNode;
|
|
6
6
|
error?: string;
|
|
7
7
|
}
|
|
8
8
|
declare const Input: React.ForwardRefExoticComponent<Omit<InputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
|
package/dist/input.js
CHANGED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
interface ProviderFormProps extends React.ComponentProps<'div'> {
|
|
4
|
+
name: string;
|
|
5
|
+
onNameChange: (value: string) => void;
|
|
6
|
+
baseUrl: string;
|
|
7
|
+
onBaseUrlChange: (value: string) => void;
|
|
8
|
+
apiKey: string;
|
|
9
|
+
onApiKeyChange: (value: string) => void;
|
|
10
|
+
namePlaceholder?: string;
|
|
11
|
+
baseUrlPlaceholder?: string;
|
|
12
|
+
nameLabel?: string;
|
|
13
|
+
baseUrlLabel?: string;
|
|
14
|
+
apiKeyLabel?: string;
|
|
15
|
+
/** Hint under the key field; apps mention keyring storage here. */
|
|
16
|
+
apiKeyHelp?: string;
|
|
17
|
+
/** The provider already stores a key (write-only field shows no value). */
|
|
18
|
+
hasStoredKey?: boolean;
|
|
19
|
+
storedKeyLabel?: string;
|
|
20
|
+
keyPlaceholder?: string;
|
|
21
|
+
error?: string;
|
|
22
|
+
children?: React.ReactNode;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Standard provider credential fields: name, base URL and a **write-only**
|
|
26
|
+
* masked API key (`onChange` only — the library never renders a stored key;
|
|
27
|
+
* keyring/storage is the app's business, ADR-006).
|
|
28
|
+
*/
|
|
29
|
+
declare const ProviderForm: React.ForwardRefExoticComponent<Omit<ProviderFormProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
30
|
+
|
|
31
|
+
export { ProviderForm, type ProviderFormProps };
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { Input } from './chunk-M4V7XHL7.js';
|
|
2
|
+
import { cn } from './chunk-BLJWR4ZV.js';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { KeyRound } from 'lucide-react';
|
|
5
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
6
|
+
|
|
7
|
+
var ProviderForm = React.forwardRef(
|
|
8
|
+
function ProviderForm2({
|
|
9
|
+
name,
|
|
10
|
+
onNameChange,
|
|
11
|
+
baseUrl,
|
|
12
|
+
onBaseUrlChange,
|
|
13
|
+
apiKey,
|
|
14
|
+
onApiKeyChange,
|
|
15
|
+
namePlaceholder = "Provider name",
|
|
16
|
+
baseUrlPlaceholder = "https://api.example.com/v1",
|
|
17
|
+
nameLabel = "Name",
|
|
18
|
+
baseUrlLabel = "API base URL",
|
|
19
|
+
apiKeyLabel = "API key",
|
|
20
|
+
apiKeyHelp,
|
|
21
|
+
hasStoredKey = false,
|
|
22
|
+
storedKeyLabel = "Stored \u2014 leave empty to keep",
|
|
23
|
+
keyPlaceholder = "sk-\u2026",
|
|
24
|
+
error,
|
|
25
|
+
children,
|
|
26
|
+
className,
|
|
27
|
+
...props
|
|
28
|
+
}, ref) {
|
|
29
|
+
return /* @__PURE__ */ jsxs(
|
|
30
|
+
"div",
|
|
31
|
+
{
|
|
32
|
+
ref,
|
|
33
|
+
"data-as": "provider-form",
|
|
34
|
+
className: cn("flex w-full flex-col gap-4", className),
|
|
35
|
+
...props,
|
|
36
|
+
children: [
|
|
37
|
+
/* @__PURE__ */ jsx(
|
|
38
|
+
Input,
|
|
39
|
+
{
|
|
40
|
+
label: nameLabel,
|
|
41
|
+
value: name,
|
|
42
|
+
onChange: (event) => onNameChange(event.target.value),
|
|
43
|
+
placeholder: namePlaceholder
|
|
44
|
+
}
|
|
45
|
+
),
|
|
46
|
+
/* @__PURE__ */ jsx(
|
|
47
|
+
Input,
|
|
48
|
+
{
|
|
49
|
+
label: baseUrlLabel,
|
|
50
|
+
value: baseUrl,
|
|
51
|
+
onChange: (event) => onBaseUrlChange(event.target.value),
|
|
52
|
+
placeholder: baseUrlPlaceholder,
|
|
53
|
+
className: "font-mono"
|
|
54
|
+
}
|
|
55
|
+
),
|
|
56
|
+
/* @__PURE__ */ jsx(
|
|
57
|
+
Input,
|
|
58
|
+
{
|
|
59
|
+
label: hasStoredKey ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
60
|
+
apiKeyLabel,
|
|
61
|
+
" ",
|
|
62
|
+
/* @__PURE__ */ jsxs("span", { className: "font-normal text-[var(--as-muted-fg)]", children: [
|
|
63
|
+
"(",
|
|
64
|
+
storedKeyLabel,
|
|
65
|
+
")"
|
|
66
|
+
] })
|
|
67
|
+
] }) : apiKeyLabel,
|
|
68
|
+
type: "password",
|
|
69
|
+
value: apiKey,
|
|
70
|
+
onChange: (event) => onApiKeyChange(event.target.value),
|
|
71
|
+
placeholder: hasStoredKey ? "\u2022\u2022\u2022" : keyPlaceholder,
|
|
72
|
+
autoComplete: "new-password",
|
|
73
|
+
hint: apiKeyHelp ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
|
|
74
|
+
/* @__PURE__ */ jsx(KeyRound, { className: "size-3", "aria-hidden": true }),
|
|
75
|
+
apiKeyHelp
|
|
76
|
+
] }) : void 0
|
|
77
|
+
}
|
|
78
|
+
),
|
|
79
|
+
children,
|
|
80
|
+
error ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-sm font-medium text-[var(--as-danger)]", children: error }) : null
|
|
81
|
+
]
|
|
82
|
+
}
|
|
83
|
+
);
|
|
84
|
+
}
|
|
85
|
+
);
|
|
86
|
+
|
|
87
|
+
export { ProviderForm };
|
|
88
|
+
//# sourceMappingURL=provider-form.js.map
|
|
89
|
+
//# sourceMappingURL=provider-form.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/provider-form/ProviderForm.tsx"],"names":["ProviderForm"],"mappings":";;;;;;AAgCO,IAAM,YAAA,GAAqB,KAAA,CAAA,UAAA;AAAA,EAChC,SAASA,aAAAA,CACP;AAAA,IACE,IAAA;AAAA,IACA,YAAA;AAAA,IACA,OAAA;AAAA,IACA,eAAA;AAAA,IACA,MAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA,GAAkB,eAAA;AAAA,IAClB,kBAAA,GAAqB,4BAAA;AAAA,IACrB,SAAA,GAAY,MAAA;AAAA,IACZ,YAAA,GAAe,cAAA;AAAA,IACf,WAAA,GAAc,SAAA;AAAA,IACd,UAAA;AAAA,IACA,YAAA,GAAe,KAAA;AAAA,IACf,cAAA,GAAiB,mCAAA;AAAA,IACjB,cAAA,GAAiB,WAAA;AAAA,IACjB,KAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAQ,eAAA;AAAA,QACR,SAAA,EAAW,EAAA,CAAG,4BAAA,EAA8B,SAAS,CAAA;AAAA,QACpD,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,SAAA;AAAA,cACP,KAAA,EAAO,IAAA;AAAA,cACP,UAAU,CAAC,KAAA,KAAU,YAAA,CAAa,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,cACpD,WAAA,EAAa;AAAA;AAAA,WACf;AAAA,0BACA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAO,YAAA;AAAA,cACP,KAAA,EAAO,OAAA;AAAA,cACP,UAAU,CAAC,KAAA,KAAU,eAAA,CAAgB,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,cACvD,WAAA,EAAa,kBAAA;AAAA,cACb,SAAA,EAAU;AAAA;AAAA,WACZ;AAAA,0BACA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,KAAA,EACE,+BACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,gBAAA,WAAA;AAAA,gBAAa,GAAA;AAAA,gCACd,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uCAAA,EAAwC,QAAA,EAAA;AAAA,kBAAA,GAAA;AAAA,kBACpD,cAAA;AAAA,kBAAe;AAAA,iBAAA,EACnB;AAAA,eAAA,EACF,CAAA,GAEA,WAAA;AAAA,cAGJ,IAAA,EAAK,UAAA;AAAA,cACL,KAAA,EAAO,MAAA;AAAA,cACP,UAAU,CAAC,KAAA,KAAU,cAAA,CAAe,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,cACtD,WAAA,EAAa,eAAe,oBAAA,GAAQ,cAAA;AAAA,cACpC,YAAA,EAAa,cAAA;AAAA,cACb,IAAA,EACE,UAAA,mBACE,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,gCAAA,EACd,QAAA,EAAA;AAAA,gCAAA,GAAA,CAAC,QAAA,EAAA,EAAS,SAAA,EAAU,QAAA,EAAS,aAAA,EAAW,IAAA,EAAC,CAAA;AAAA,gBACxC;AAAA,eAAA,EACH,CAAA,GACE;AAAA;AAAA,WAER;AAAA,UACC,QAAA;AAAA,UACA,KAAA,uBACE,GAAA,EAAA,EAAE,IAAA,EAAK,SAAQ,SAAA,EAAU,6CAAA,EACvB,iBACH,CAAA,GACE;AAAA;AAAA;AAAA,KACN;AAAA,EAEJ;AACF","file":"provider-form.js","sourcesContent":["import * as React from 'react'\nimport { KeyRound } from 'lucide-react'\nimport { cn } from '../../lib/utils'\nimport { Input } from '../input/Input'\n\nexport interface ProviderFormProps extends React.ComponentProps<'div'> {\n name: string\n onNameChange: (value: string) => void\n baseUrl: string\n onBaseUrlChange: (value: string) => void\n apiKey: string\n onApiKeyChange: (value: string) => void\n namePlaceholder?: string\n baseUrlPlaceholder?: string\n nameLabel?: string\n baseUrlLabel?: string\n apiKeyLabel?: string\n /** Hint under the key field; apps mention keyring storage here. */\n apiKeyHelp?: string\n /** The provider already stores a key (write-only field shows no value). */\n hasStoredKey?: boolean\n storedKeyLabel?: string\n keyPlaceholder?: string\n error?: string\n children?: React.ReactNode\n}\n\n/**\n * Standard provider credential fields: name, base URL and a **write-only**\n * masked API key (`onChange` only — the library never renders a stored key;\n * keyring/storage is the app's business, ADR-006).\n */\nexport const ProviderForm = React.forwardRef<HTMLDivElement, ProviderFormProps>(\n function ProviderForm(\n {\n name,\n onNameChange,\n baseUrl,\n onBaseUrlChange,\n apiKey,\n onApiKeyChange,\n namePlaceholder = 'Provider name',\n baseUrlPlaceholder = 'https://api.example.com/v1',\n nameLabel = 'Name',\n baseUrlLabel = 'API base URL',\n apiKeyLabel = 'API key',\n apiKeyHelp,\n hasStoredKey = false,\n storedKeyLabel = 'Stored — leave empty to keep',\n keyPlaceholder = 'sk-…',\n error,\n children,\n className,\n ...props\n },\n ref,\n ) {\n return (\n <div\n ref={ref}\n data-as=\"provider-form\"\n className={cn('flex w-full flex-col gap-4', className)}\n {...props}\n >\n <Input\n label={nameLabel}\n value={name}\n onChange={(event) => onNameChange(event.target.value)}\n placeholder={namePlaceholder}\n />\n <Input\n label={baseUrlLabel}\n value={baseUrl}\n onChange={(event) => onBaseUrlChange(event.target.value)}\n placeholder={baseUrlPlaceholder}\n className=\"font-mono\"\n />\n <Input\n label={\n hasStoredKey ? (\n <>\n {apiKeyLabel}{' '}\n <span className=\"font-normal text-[var(--as-muted-fg)]\">\n ({storedKeyLabel})\n </span>\n </>\n ) : (\n apiKeyLabel\n )\n }\n type=\"password\"\n value={apiKey}\n onChange={(event) => onApiKeyChange(event.target.value)}\n placeholder={hasStoredKey ? '•••' : keyPlaceholder}\n autoComplete=\"new-password\"\n hint={\n apiKeyHelp ? (\n <span className=\"inline-flex items-center gap-1\">\n <KeyRound className=\"size-3\" aria-hidden />\n {apiKeyHelp}\n </span>\n ) : undefined\n }\n />\n {children}\n {error ? (\n <p role=\"alert\" className=\"text-sm font-medium text-[var(--as-danger)]\">\n {error}\n </p>\n ) : null}\n </div>\n )\n },\n)\n"]}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { LucideIcon } from 'lucide-react';
|
|
3
|
+
|
|
4
|
+
interface SettingsNavItem {
|
|
5
|
+
id: string;
|
|
6
|
+
label: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
icon?: LucideIcon;
|
|
9
|
+
}
|
|
10
|
+
interface SettingsShellProps {
|
|
11
|
+
nav: SettingsNavItem[];
|
|
12
|
+
active: string;
|
|
13
|
+
onNavigate: (id: string) => void;
|
|
14
|
+
header?: {
|
|
15
|
+
icon?: LucideIcon;
|
|
16
|
+
title: string;
|
|
17
|
+
};
|
|
18
|
+
children: React.ReactNode;
|
|
19
|
+
className?: string;
|
|
20
|
+
navClassName?: string;
|
|
21
|
+
}
|
|
22
|
+
declare const SettingsShell: React.ForwardRefExoticComponent<SettingsShellProps & React.RefAttributes<HTMLDivElement>>;
|
|
23
|
+
|
|
24
|
+
export { type SettingsNavItem, SettingsShell, type SettingsShellProps };
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { cn } from './chunk-BLJWR4ZV.js';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
+
|
|
5
|
+
var SettingsShell = React.forwardRef(
|
|
6
|
+
function SettingsShell2({ nav, active, onNavigate, header, children, className, navClassName }, ref) {
|
|
7
|
+
const HeaderIcon = header?.icon;
|
|
8
|
+
return /* @__PURE__ */ jsxs(
|
|
9
|
+
"div",
|
|
10
|
+
{
|
|
11
|
+
ref,
|
|
12
|
+
"data-as": "settings-shell",
|
|
13
|
+
className: cn("grid grid-cols-1 gap-8 lg:grid-cols-4", className),
|
|
14
|
+
children: [
|
|
15
|
+
/* @__PURE__ */ jsx("nav", { className: "lg:col-span-1", "aria-label": "Settings sections", children: /* @__PURE__ */ jsxs(
|
|
16
|
+
"div",
|
|
17
|
+
{
|
|
18
|
+
className: cn(
|
|
19
|
+
"space-y-1 rounded-[var(--as-radius-lg)] border border-[var(--as-border)] bg-[var(--as-surface-raised)] p-3 lg:sticky lg:top-24",
|
|
20
|
+
navClassName
|
|
21
|
+
),
|
|
22
|
+
children: [
|
|
23
|
+
header ? /* @__PURE__ */ jsxs("div", { className: "mb-2 flex items-center gap-2.5 border-b border-[var(--as-border)] px-3 py-2", children: [
|
|
24
|
+
HeaderIcon ? /* @__PURE__ */ jsx(
|
|
25
|
+
HeaderIcon,
|
|
26
|
+
{
|
|
27
|
+
className: "size-5 shrink-0 text-[var(--as-primary)]",
|
|
28
|
+
"aria-hidden": true
|
|
29
|
+
}
|
|
30
|
+
) : null,
|
|
31
|
+
/* @__PURE__ */ jsx("span", { className: "truncate text-sm font-bold text-[var(--as-fg)]", children: header.title })
|
|
32
|
+
] }) : null,
|
|
33
|
+
nav.map(({ id, label, description, icon: Icon }) => {
|
|
34
|
+
const isActive = id === active;
|
|
35
|
+
return /* @__PURE__ */ jsxs(
|
|
36
|
+
"button",
|
|
37
|
+
{
|
|
38
|
+
type: "button",
|
|
39
|
+
"aria-current": isActive ? "page" : void 0,
|
|
40
|
+
onClick: () => onNavigate(id),
|
|
41
|
+
className: cn(
|
|
42
|
+
"flex w-full cursor-pointer items-start rounded-[var(--as-radius)] px-3 py-2.5 text-left text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]",
|
|
43
|
+
isActive ? "bg-[color-mix(in_srgb,var(--as-primary)_12%,transparent)] font-bold text-[var(--as-primary)]" : "font-medium text-[var(--as-fg)] hover:bg-[var(--as-muted)]"
|
|
44
|
+
),
|
|
45
|
+
children: [
|
|
46
|
+
Icon ? /* @__PURE__ */ jsx(
|
|
47
|
+
Icon,
|
|
48
|
+
{
|
|
49
|
+
className: "mr-3 mt-0.5 size-4 shrink-0",
|
|
50
|
+
"aria-hidden": true
|
|
51
|
+
}
|
|
52
|
+
) : null,
|
|
53
|
+
/* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
|
|
54
|
+
/* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
|
|
55
|
+
description ? /* @__PURE__ */ jsx("span", { className: "text-[11px] font-normal text-[var(--as-muted-fg)]", children: description }) : null
|
|
56
|
+
] })
|
|
57
|
+
]
|
|
58
|
+
},
|
|
59
|
+
id
|
|
60
|
+
);
|
|
61
|
+
})
|
|
62
|
+
]
|
|
63
|
+
}
|
|
64
|
+
) }),
|
|
65
|
+
/* @__PURE__ */ jsx("div", { className: "min-w-0 lg:col-span-3", children })
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
);
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
|
|
72
|
+
export { SettingsShell };
|
|
73
|
+
//# sourceMappingURL=settings-shell.js.map
|
|
74
|
+
//# sourceMappingURL=settings-shell.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/components/settings-shell/SettingsShell.tsx"],"names":["SettingsShell"],"mappings":";;;;AAqBO,IAAM,aAAA,GAAsB,KAAA,CAAA,UAAA;AAAA,EACjC,SAASA,cAAAA,CACP,EAAE,GAAA,EAAK,MAAA,EAAQ,UAAA,EAAY,MAAA,EAAQ,QAAA,EAAU,SAAA,EAAW,YAAA,EAAa,EACrE,GAAA,EACA;AACA,IAAA,MAAM,aAAa,MAAA,EAAQ,IAAA;AAC3B,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAQ,gBAAA;AAAA,QACR,SAAA,EAAW,EAAA,CAAG,uCAAA,EAAyC,SAAS,CAAA;AAAA,QAEhE,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,eAAA,EAAgB,YAAA,EAAW,mBAAA,EACxC,QAAA,kBAAA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,EAAA;AAAA,gBACT,gIAAA;AAAA,gBACA;AAAA,eACF;AAAA,cAEC,QAAA,EAAA;AAAA,gBAAA,MAAA,mBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6EAAA,EACZ,QAAA,EAAA;AAAA,kBAAA,UAAA,mBACC,GAAA;AAAA,oBAAC,UAAA;AAAA,oBAAA;AAAA,sBACC,SAAA,EAAU,0CAAA;AAAA,sBACV,aAAA,EAAW;AAAA;AAAA,mBACb,GACE,IAAA;AAAA,kCACJ,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gDAAA,EACb,iBAAO,KAAA,EACV;AAAA,iBAAA,EACF,CAAA,GACE,IAAA;AAAA,gBACH,GAAA,CAAI,IAAI,CAAC,EAAE,IAAI,KAAA,EAAO,WAAA,EAAa,IAAA,EAAM,IAAA,EAAK,KAAM;AACnD,kBAAA,MAAM,WAAW,EAAA,KAAO,MAAA;AACxB,kBAAA,uBACE,IAAA;AAAA,oBAAC,QAAA;AAAA,oBAAA;AAAA,sBAEC,IAAA,EAAK,QAAA;AAAA,sBACL,cAAA,EAAc,WAAW,MAAA,GAAS,MAAA;AAAA,sBAClC,OAAA,EAAS,MAAM,UAAA,CAAW,EAAE,CAAA;AAAA,sBAC5B,SAAA,EAAW,EAAA;AAAA,wBACT,uNAAA;AAAA,wBACA,WACI,8FAAA,GACA;AAAA,uBACN;AAAA,sBAEC,QAAA,EAAA;AAAA,wBAAA,IAAA,mBACC,GAAA;AAAA,0BAAC,IAAA;AAAA,0BAAA;AAAA,4BACC,SAAA,EAAU,6BAAA;AAAA,4BACV,aAAA,EAAW;AAAA;AAAA,yBACb,GACE,IAAA;AAAA,wCACJ,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EACd,QAAA,EAAA;AAAA,0CAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,0BACjC,8BACC,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mDAAA,EACb,uBACH,CAAA,GACE;AAAA,yBAAA,EACN;AAAA;AAAA,qBAAA;AAAA,oBAxBK;AAAA,mBAyBP;AAAA,gBAEJ,CAAC;AAAA;AAAA;AAAA,WACH,EACF,CAAA;AAAA,0BACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBAAA,EAAyB,QAAA,EAAS;AAAA;AAAA;AAAA,KACnD;AAAA,EAEJ;AACF","file":"settings-shell.js","sourcesContent":["import * as React from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '../../lib/utils'\n\nexport interface SettingsNavItem {\n id: string\n label: string\n description?: string\n icon?: LucideIcon\n}\n\nexport interface SettingsShellProps {\n nav: SettingsNavItem[]\n active: string\n onNavigate: (id: string) => void\n header?: { icon?: LucideIcon; title: string }\n children: React.ReactNode\n className?: string\n navClassName?: string\n}\n\nexport const SettingsShell = React.forwardRef<HTMLDivElement, SettingsShellProps>(\n function SettingsShell(\n { nav, active, onNavigate, header, children, className, navClassName },\n ref,\n ) {\n const HeaderIcon = header?.icon\n return (\n <div\n ref={ref}\n data-as=\"settings-shell\"\n className={cn('grid grid-cols-1 gap-8 lg:grid-cols-4', className)}\n >\n <nav className=\"lg:col-span-1\" aria-label=\"Settings sections\">\n <div\n className={cn(\n 'space-y-1 rounded-[var(--as-radius-lg)] border border-[var(--as-border)] bg-[var(--as-surface-raised)] p-3 lg:sticky lg:top-24',\n navClassName,\n )}\n >\n {header ? (\n <div className=\"mb-2 flex items-center gap-2.5 border-b border-[var(--as-border)] px-3 py-2\">\n {HeaderIcon ? (\n <HeaderIcon\n className=\"size-5 shrink-0 text-[var(--as-primary)]\"\n aria-hidden\n />\n ) : null}\n <span className=\"truncate text-sm font-bold text-[var(--as-fg)]\">\n {header.title}\n </span>\n </div>\n ) : null}\n {nav.map(({ id, label, description, icon: Icon }) => {\n const isActive = id === active\n return (\n <button\n key={id}\n type=\"button\"\n aria-current={isActive ? 'page' : undefined}\n onClick={() => onNavigate(id)}\n className={cn(\n 'flex w-full cursor-pointer items-start rounded-[var(--as-radius)] px-3 py-2.5 text-left text-sm transition-colors focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[var(--as-focus-ring)]',\n isActive\n ? 'bg-[color-mix(in_srgb,var(--as-primary)_12%,transparent)] font-bold text-[var(--as-primary)]'\n : 'font-medium text-[var(--as-fg)] hover:bg-[var(--as-muted)]',\n )}\n >\n {Icon ? (\n <Icon\n className=\"mr-3 mt-0.5 size-4 shrink-0\"\n aria-hidden\n />\n ) : null}\n <span className=\"flex min-w-0 flex-col\">\n <span className=\"truncate\">{label}</span>\n {description ? (\n <span className=\"text-[11px] font-normal text-[var(--as-muted-fg)]\">\n {description}\n </span>\n ) : null}\n </span>\n </button>\n )\n })}\n </div>\n </nav>\n <div className=\"min-w-0 lg:col-span-3\">{children}</div>\n </div>\n )\n },\n)\n"]}
|
package/dist/styles.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
|
|
2
|
-
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}:root,:host{--color-red-500:oklch(63.7% .237 25.331);--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-4xl:56rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-black:900;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-wider:.05em;--leading-tight:1.25;--leading-relaxed:1.625;--ease-out:cubic-bezier(0, 0, .2, 1);--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}:root{--as-tone-0:oklch(100% 0 0);--as-tone-50:oklch(98.5% .003 90);--as-tone-100:oklch(94.8% .005 90);--as-tone-200:oklch(90.2% .005 90);--as-tone-300:oklch(83% .008 90);--as-tone-500:oklch(50% .012 90);--as-tone-700:oklch(37% .014 90);--as-tone-900:oklch(23.5% .012 90);--as-accent:oklch(55% .16 258);--as-accent-strong:oklch(48% .18 258);--as-success:oklch(62% .15 152);--as-warning:oklch(72% .15 78);--as-danger:oklch(58% .19 27);--as-ai:oklch(54.1% .247 293.009);--as-primary:var(--as-accent);--as-primary-fg:var(--as-tone-50);--as-secondary:var(--as-tone-100);--as-secondary-fg:var(--as-tone-900);--as-surface:var(--as-tone-50);--as-surface-raised:var(--as-tone-0);--as-border:var(--as-tone-200);--as-fg:var(--as-tone-900);--as-muted:var(--as-tone-100);--as-muted-fg:var(--as-tone-500);--as-success-fg:var(--as-tone-0);--as-warning-fg:var(--as-tone-900);--as-danger-fg:var(--as-tone-0);--as-ai-fg:var(--as-tone-0);--as-focus-ring:var(--as-accent);--as-overlay:oklch(0% 0 0/.6);--as-z-modal:50;--as-z-popover:50;--as-radius-sm:calc(var(--as-radius) - .25rem);--as-radius:.625rem;--as-radius-lg:calc(var(--as-radius) + .25rem);--as-font-sans:"Inter Variable", ui-sans-serif, system-ui, sans-serif;--as-font-mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;--as-shadow-1:0 1px 2px 0 oklch(0% 0 0/.05);--as-shadow-2:0 4px 6px -1px oklch(0% 0 0/.07), 0 2px 4px -2px oklch(0% 0 0/.05);--as-shadow-3:0 10px 15px -3px oklch(0% 0 0/.08), 0 4px 6px -4px oklch(0% 0 0/.05)}.pointer-events-none{pointer-events:none}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{inset-block:0}.top-1\/2{top:50%}.top-3{top:calc(var(--spacing) * 3)}.top-4{top:calc(var(--spacing) * 4)}.right-0{right:0}.right-2{right:calc(var(--spacing) * 2)}.right-3{right:calc(var(--spacing) * 3)}.right-4{right:calc(var(--spacing) * 4)}.right-7{right:calc(var(--spacing) * 7)}.left-1\/2{left:50%}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.z-\[var\(--as-z-modal\)\]{z-index:var(--as-z-modal)}.z-\[var\(--as-z-popover\)\]{z-index:var(--as-z-popover)}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-mx-1{margin-inline:calc(var(--spacing) * -1)}.my-1{margin-block:var(--spacing)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mb-0\.5{margin-bottom:calc(var(--spacing) * .5)}.mb-1{margin-bottom:var(--spacing)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.ml-1{margin-left:var(--spacing)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-full{height:100%}.h-px{height:1px}.max-h-60{max-height:calc(var(--spacing) * 60)}.max-h-\[85vh\]{max-height:85vh}.max-h-\[92vh\]{max-height:92vh}.min-h-0{min-height:0}.min-h-9{min-height:calc(var(--spacing) * 9)}.w-4\/5{width:80%}.w-9{width:calc(var(--spacing) * 9)}.w-16{width:calc(var(--spacing) * 16)}.w-28{width:calc(var(--spacing) * 28)}.w-52{width:calc(var(--spacing) * 52)}.w-64{width:calc(var(--spacing) * 64)}.w-72{width:calc(var(--spacing) * 72)}.w-80{width:calc(var(--spacing) * 80)}.w-\[280px\]{width:280px}.w-\[calc\(100\%-2rem\)\]{width:calc(100% - 2rem)}.w-\[var\(--radix-popover-trigger-width\)\]{width:var(--radix-popover-trigger-width)}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-64{max-width:calc(var(--spacing) * 64)}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:0}.min-w-24{min-width:calc(var(--spacing) * 24)}.min-w-40{min-width:calc(var(--spacing) * 40)}.min-w-48{min-width:calc(var(--spacing) * 48)}.min-w-full{min-width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-180{rotate:180deg}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-1\.5{column-gap:calc(var(--spacing) * 1.5)}.gap-y-0\.5{row-gap:calc(var(--spacing) * .5)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-\[color-mix\(in_srgb\,var\(--as-border\)_55\%\,transparent\)\]>:not(:last-child)){border-color:var(--as-border)}@supports (color:color-mix(in lab, red, red)){:where(.divide-\[color-mix\(in_srgb\,var\(--as-border\)_55\%\,transparent\)\]>:not(:last-child)){border-color:color-mix(in srgb,var(--as-border) 55%,transparent)}}:where(.divide-\[var\(--as-border\)\]>:not(:last-child)){border-color:var(--as-border)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded-\[calc\(var\(--as-radius\)-2px\)\]{border-radius:calc(var(--as-radius) - 2px)}.rounded-\[calc\(var\(--as-radius-sm\)-2px\)\]{border-radius:calc(var(--as-radius-sm) - 2px)}.rounded-\[var\(--as-radius\)\]{border-radius:var(--as-radius)}.rounded-\[var\(--as-radius-lg\)\]{border-radius:var(--as-radius-lg)}.rounded-\[var\(--as-radius-sm\)\]{border-radius:var(--as-radius-sm)}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[var\(--as-border\)\]{border-color:var(--as-border)}.border-\[var\(--as-danger\)\],.border-\[var\(--as-danger\)\]\/40{border-color:var(--as-danger)}@supports (color:color-mix(in lab, red, red)){.border-\[var\(--as-danger\)\]\/40{border-color:color-mix(in oklab, var(--as-danger) 40%, transparent)}}.border-\[var\(--as-primary\)\],.border-\[var\(--as-primary\)\]\/30{border-color:var(--as-primary)}@supports (color:color-mix(in lab, red, red)){.border-\[var\(--as-primary\)\]\/30{border-color:color-mix(in oklab, var(--as-primary) 30%, transparent)}}.border-\[var\(--as-surface-raised\)\]{border-color:var(--as-surface-raised)}.border-transparent{border-color:#0000}.bg-\[color-mix\(in_srgb\,var\(--as-ai\)_12\%\,transparent\)\]{background-color:var(--as-ai)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_srgb\,var\(--as-ai\)_12\%\,transparent\)\]{background-color:color-mix(in srgb,var(--as-ai) 12%,transparent)}}.bg-\[color-mix\(in_srgb\,var\(--as-danger\)_12\%\,transparent\)\]{background-color:var(--as-danger)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_srgb\,var\(--as-danger\)_12\%\,transparent\)\]{background-color:color-mix(in srgb,var(--as-danger) 12%,transparent)}}.bg-\[color-mix\(in_srgb\,var\(--as-primary\)_12\%\,transparent\)\]{background-color:var(--as-primary)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_srgb\,var\(--as-primary\)_12\%\,transparent\)\]{background-color:color-mix(in srgb,var(--as-primary) 12%,transparent)}}.bg-\[color-mix\(in_srgb\,var\(--as-primary\)_30\%\,transparent\)\]{background-color:var(--as-primary)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_srgb\,var\(--as-primary\)_30\%\,transparent\)\]{background-color:color-mix(in srgb,var(--as-primary) 30%,transparent)}}.bg-\[color-mix\(in_srgb\,var\(--as-success\)_14\%\,transparent\)\]{background-color:var(--as-success)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_srgb\,var\(--as-success\)_14\%\,transparent\)\]{background-color:color-mix(in srgb,var(--as-success) 14%,transparent)}}.bg-\[color-mix\(in_srgb\,var\(--as-warning\)_18\%\,transparent\)\]{background-color:var(--as-warning)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_srgb\,var\(--as-warning\)_18\%\,transparent\)\]{background-color:color-mix(in srgb,var(--as-warning) 18%,transparent)}}.bg-\[var\(--as-ai\)\]{background-color:var(--as-ai)}.bg-\[var\(--as-border\)\]{background-color:var(--as-border)}.bg-\[var\(--as-danger\)\],.bg-\[var\(--as-danger\)\]\/10{background-color:var(--as-danger)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--as-danger\)\]\/10{background-color:color-mix(in oklab, var(--as-danger) 10%, transparent)}}.bg-\[var\(--as-fg\)\]{background-color:var(--as-fg)}.bg-\[var\(--as-muted\)\]{background-color:var(--as-muted)}.bg-\[var\(--as-overlay\)\]{background-color:var(--as-overlay)}.bg-\[var\(--as-primary\)\],.bg-\[var\(--as-primary\)\]\/10{background-color:var(--as-primary)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--as-primary\)\]\/10{background-color:color-mix(in oklab, var(--as-primary) 10%, transparent)}}.bg-\[var\(--as-primary\)\]\/50{background-color:var(--as-primary)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--as-primary\)\]\/50{background-color:color-mix(in oklab, var(--as-primary) 50%, transparent)}}.bg-\[var\(--as-secondary\)\]{background-color:var(--as-secondary)}.bg-\[var\(--as-success\)\]{background-color:var(--as-success)}.bg-\[var\(--as-surface\)\]{background-color:var(--as-surface)}.bg-\[var\(--as-surface-raised\)\]{background-color:var(--as-surface-raised)}.bg-\[var\(--as-warning\)\]{background-color:var(--as-warning)}.bg-red-500{background-color:var(--color-red-500)}.bg-transparent{background-color:#0000}.p-0{padding:0}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.px-1{padding-inline:var(--spacing)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-0{padding-top:0}.pt-1{padding-top:var(--spacing)}.pt-1\.5{padding-top:calc(var(--spacing) * 1.5)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-10{padding-top:calc(var(--spacing) * 10)}.pr-1\.5{padding-right:calc(var(--spacing) * 1.5)}.pr-8{padding-right:calc(var(--spacing) * 8)}.pr-14{padding-right:calc(var(--spacing) * 14)}.pb-0\.5{padding-bottom:calc(var(--spacing) * .5)}.pb-1{padding-bottom:var(--spacing)}.pb-1\.5{padding-bottom:calc(var(--spacing) * 1.5)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pl-2\.5{padding-left:calc(var(--spacing) * 2.5)}.text-center{text-align:center}.text-left{text-align:left}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.whitespace-nowrap{white-space:nowrap}.text-\[color-mix\(in_srgb\,var\(--as-warning\)_72\%\,var\(--as-fg\)\)\]{color:var(--as-warning)}@supports (color:color-mix(in lab, red, red)){.text-\[color-mix\(in_srgb\,var\(--as-warning\)_72\%\,var\(--as-fg\)\)\]{color:color-mix(in srgb,var(--as-warning) 72%,var(--as-fg))}}.text-\[var\(--as-ai\)\]{color:var(--as-ai)}.text-\[var\(--as-ai-fg\)\]{color:var(--as-ai-fg)}.text-\[var\(--as-danger\)\]{color:var(--as-danger)}.text-\[var\(--as-danger-fg\)\]{color:var(--as-danger-fg)}.text-\[var\(--as-fg\)\]{color:var(--as-fg)}.text-\[var\(--as-muted-fg\)\]{color:var(--as-muted-fg)}.text-\[var\(--as-primary\)\]{color:var(--as-primary)}.text-\[var\(--as-primary-fg\)\]{color:var(--as-primary-fg)}.text-\[var\(--as-secondary-fg\)\]{color:var(--as-secondary-fg)}.text-\[var\(--as-success\)\]{color:var(--as-success)}.text-\[var\(--as-success-fg\)\]{color:var(--as-success-fg)}.text-\[var\(--as-surface\)\]{color:var(--as-surface)}.text-\[var\(--as-warning-fg\)\]{color:var(--as-warning-fg)}.text-inherit{color:inherit}.uppercase{text-transform:uppercase}.accent-\[var\(--as-primary\)\]{accent-color:var(--as-primary)}.opacity-0{opacity:0}.opacity-30{opacity:.3}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--as-shadow-1\)\]{--tw-shadow:var(--as-shadow-1);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--as-shadow-2\)\]{--tw-shadow:var(--as-shadow-2);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--as-shadow-3\)\]{--tw-shadow:var(--as-shadow-3);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition-\[filter\]{transition-property:filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.placeholder\:text-\[var\(--as-muted-fg\)\]::placeholder{color:var(--as-muted-fg)}.focus-within\:border-\[var\(--as-focus-ring\)\]:focus-within{border-color:var(--as-focus-ring)}.focus-within\:opacity-100:focus-within{opacity:1}.focus-within\:ring-2:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\:ring-\[var\(--as-focus-ring\)\]:focus-within{--tw-ring-color:var(--as-focus-ring)}@media (hover:hover){.hover\:border-\[var\(--as-fg\)\]\/30:hover{border-color:var(--as-fg)}@supports (color:color-mix(in lab, red, red)){.hover\:border-\[var\(--as-fg\)\]\/30:hover{border-color:color-mix(in oklab, var(--as-fg) 30%, transparent)}}.hover\:border-\[var\(--as-fg\)\]\/40:hover{border-color:var(--as-fg)}@supports (color:color-mix(in lab, red, red)){.hover\:border-\[var\(--as-fg\)\]\/40:hover{border-color:color-mix(in oklab, var(--as-fg) 40%, transparent)}}.hover\:bg-\[color-mix\(in_srgb\,var\(--as-ai\)_14\%\,var\(--as-secondary\)\)\]:hover{background-color:var(--as-ai)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-\[color-mix\(in_srgb\,var\(--as-ai\)_14\%\,var\(--as-secondary\)\)\]:hover{background-color:color-mix(in srgb,var(--as-ai) 14%,var(--as-secondary))}}.hover\:bg-\[color-mix\(in_srgb\,var\(--as-muted\)_60\%\,transparent\)\]:hover{background-color:var(--as-muted)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-\[color-mix\(in_srgb\,var\(--as-muted\)_60\%\,transparent\)\]:hover{background-color:color-mix(in srgb,var(--as-muted) 60%,transparent)}}.hover\:bg-\[var\(--as-muted\)\]:hover{background-color:var(--as-muted)}.hover\:bg-\[var\(--as-secondary\)\]:hover{background-color:var(--as-secondary)}.hover\:bg-transparent:hover{background-color:#0000}.hover\:text-\[var\(--as-danger\)\]:hover{color:var(--as-danger)}.hover\:text-\[var\(--as-fg\)\]:hover{color:var(--as-fg)}.hover\:text-\[var\(--as-primary\)\]:hover{color:var(--as-primary)}.hover\:text-\[var\(--as-success\)\]:hover{color:var(--as-success)}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-90:hover{opacity:.9}.hover\:opacity-100:hover{opacity:1}.hover\:brightness-95:hover{--tw-brightness:brightness(95%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.hover\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.focus\:bg-\[var\(--as-danger\)\]\/10:focus{background-color:var(--as-danger)}@supports (color:color-mix(in lab, red, red)){.focus\:bg-\[var\(--as-danger\)\]\/10:focus{background-color:color-mix(in oklab, var(--as-danger) 10%, transparent)}}.focus\:bg-\[var\(--as-secondary\)\]:focus{background-color:var(--as-secondary)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:border-\[var\(--as-danger\)\]:focus-visible{border-color:var(--as-danger)}.focus-visible\:border-\[var\(--as-focus-ring\)\]:focus-visible{border-color:var(--as-focus-ring)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-\[var\(--as-danger\)\]:focus-visible{--tw-ring-color:var(--as-danger)}.focus-visible\:ring-\[var\(--as-focus-ring\)\]:focus-visible{--tw-ring-color:var(--as-focus-ring)}.focus-visible\:ring-offset-0:focus-visible{--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-1:focus-visible{outline-offset:1px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-offset-\[-2px\]:focus-visible{outline-offset:-2px}.focus-visible\:outline-\[var\(--as-focus-ring\)\]:focus-visible{outline-color:var(--as-focus-ring)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-default:disabled{cursor:default}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}@media (min-width:40rem){.sm\:inset-auto{inset:auto}.sm\:top-1\/2{top:50%}.sm\:left-1\/2{left:50%}.sm\:mr-auto{margin-right:auto}.sm\:h-auto{height:auto}.sm\:max-h-\[90vh\]{max-height:90vh}.sm\:w-auto{width:auto}.sm\:max-w-2xl{max-width:var(--container-2xl)}.sm\:max-w-4xl{max-width:var(--container-4xl)}.sm\:max-w-6xl{max-width:var(--container-6xl)}.sm\:max-w-md{max-width:var(--container-md)}.sm\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.sm\:-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}.sm\:rounded-\[var\(--as-radius-lg\)\]{border-radius:var(--as-radius-lg)}.sm\:border{border-style:var(--tw-border-style);border-width:1px}.sm\:border-\[var\(--as-border\)\]{border-color:var(--as-border)}.sm\:p-6{padding:calc(var(--spacing) * 6)}.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}}@media (min-width:64rem){.lg\:relative{position:relative}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-3 svg{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}@keyframes as-fade-in{0%{opacity:0}to{opacity:1}}@keyframes as-zoom-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.97)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes as-pop-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes as-drawer-in{0%{transform:translate(100%)}to{transform:translate(0)}}.as-anim-fade{animation:.15s ease-out as-fade-in}.as-anim-modal{animation:.15s ease-out as-zoom-in}.as-anim-pop{animation:.12s ease-out as-pop-in}.as-anim-drawer{animation:.2s ease-out as-drawer-in}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
|
|
2
|
+
@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-space-y-reverse:0;--tw-divide-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-ease:initial}}:root,:host{--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-500:oklch(63.7% .237 25.331);--spacing:.25rem;--container-xs:20rem;--container-sm:24rem;--container-md:28rem;--container-lg:32rem;--container-xl:36rem;--container-2xl:42rem;--container-4xl:56rem;--container-6xl:72rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-black:900;--tracking-tight:-.025em;--tracking-wide:.025em;--tracking-wider:.05em;--leading-tight:1.25;--leading-relaxed:1.625;--ease-out:cubic-bezier(0, 0, .2, 1);--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1)}:root{--as-tone-0:oklch(100% 0 0);--as-tone-50:oklch(98.5% .003 90);--as-tone-100:oklch(94.8% .005 90);--as-tone-200:oklch(90.2% .005 90);--as-tone-300:oklch(83% .008 90);--as-tone-500:oklch(50% .012 90);--as-tone-700:oklch(37% .014 90);--as-tone-900:oklch(23.5% .012 90);--as-accent:oklch(55% .16 258);--as-accent-strong:oklch(48% .18 258);--as-success:oklch(62% .15 152);--as-warning:oklch(72% .15 78);--as-danger:oklch(58% .19 27);--as-ai:oklch(54.1% .247 293.009);--as-primary:var(--as-accent);--as-primary-fg:var(--as-tone-50);--as-secondary:var(--as-tone-100);--as-secondary-fg:var(--as-tone-900);--as-surface:var(--as-tone-50);--as-surface-raised:var(--as-tone-0);--as-border:var(--as-tone-200);--as-fg:var(--as-tone-900);--as-muted:var(--as-tone-100);--as-muted-fg:var(--as-tone-500);--as-success-fg:var(--as-tone-0);--as-warning-fg:var(--as-tone-900);--as-danger-fg:var(--as-tone-0);--as-ai-fg:var(--as-tone-0);--as-focus-ring:var(--as-accent);--as-overlay:oklch(0% 0 0/.6);--as-z-modal:50;--as-z-popover:50;--as-radius-sm:calc(var(--as-radius) - .25rem);--as-radius:.625rem;--as-radius-lg:calc(var(--as-radius) + .25rem);--as-font-sans:"Inter Variable", ui-sans-serif, system-ui, sans-serif;--as-font-mono:"JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;--as-shadow-1:0 1px 2px 0 oklch(0% 0 0/.05);--as-shadow-2:0 4px 6px -1px oklch(0% 0 0/.07), 0 2px 4px -2px oklch(0% 0 0/.05);--as-shadow-3:0 10px 15px -3px oklch(0% 0 0/.08), 0 4px 6px -4px oklch(0% 0 0/.05)}.pointer-events-none{pointer-events:none}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-0{inset:0}.inset-y-0{inset-block:0}.top-1\/2{top:50%}.top-3{top:calc(var(--spacing) * 3)}.top-4{top:calc(var(--spacing) * 4)}.right-0{right:0}.right-2{right:calc(var(--spacing) * 2)}.right-3{right:calc(var(--spacing) * 3)}.right-4{right:calc(var(--spacing) * 4)}.right-7{right:calc(var(--spacing) * 7)}.left-1\/2{left:50%}.z-10{z-index:10}.z-40{z-index:40}.z-50{z-index:50}.z-\[var\(--as-z-modal\)\]{z-index:var(--as-z-modal)}.z-\[var\(--as-z-popover\)\]{z-index:var(--as-z-popover)}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.-mx-1{margin-inline:calc(var(--spacing) * -1)}.my-1{margin-block:var(--spacing)}.mt-0\.5{margin-top:calc(var(--spacing) * .5)}.mt-1{margin-top:var(--spacing)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mr-1{margin-right:var(--spacing)}.mr-2{margin-right:calc(var(--spacing) * 2)}.mr-3{margin-right:calc(var(--spacing) * 3)}.mb-0\.5{margin-bottom:calc(var(--spacing) * .5)}.mb-1{margin-bottom:var(--spacing)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.ml-1{margin-left:var(--spacing)}.ml-auto{margin-left:auto}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-flex{display:inline-flex}.table{display:table}.size-2{width:calc(var(--spacing) * 2);height:calc(var(--spacing) * 2)}.size-2\.5{width:calc(var(--spacing) * 2.5);height:calc(var(--spacing) * 2.5)}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-3\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.size-4{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.size-5{width:calc(var(--spacing) * 5);height:calc(var(--spacing) * 5)}.size-6{width:calc(var(--spacing) * 6);height:calc(var(--spacing) * 6)}.size-7{width:calc(var(--spacing) * 7);height:calc(var(--spacing) * 7)}.size-8{width:calc(var(--spacing) * 8);height:calc(var(--spacing) * 8)}.size-9{width:calc(var(--spacing) * 9);height:calc(var(--spacing) * 9)}.size-12{width:calc(var(--spacing) * 12);height:calc(var(--spacing) * 12)}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-3\.5{height:calc(var(--spacing) * 3.5)}.h-7{height:calc(var(--spacing) * 7)}.h-8{height:calc(var(--spacing) * 8)}.h-9{height:calc(var(--spacing) * 9)}.h-10{height:calc(var(--spacing) * 10)}.h-full{height:100%}.h-px{height:1px}.max-h-60{max-height:calc(var(--spacing) * 60)}.max-h-\[85vh\]{max-height:85vh}.max-h-\[92vh\]{max-height:92vh}.min-h-0{min-height:0}.min-h-9{min-height:calc(var(--spacing) * 9)}.min-h-16{min-height:calc(var(--spacing) * 16)}.w-4\/5{width:80%}.w-9{width:calc(var(--spacing) * 9)}.w-16{width:calc(var(--spacing) * 16)}.w-28{width:calc(var(--spacing) * 28)}.w-52{width:calc(var(--spacing) * 52)}.w-64{width:calc(var(--spacing) * 64)}.w-72{width:calc(var(--spacing) * 72)}.w-80{width:calc(var(--spacing) * 80)}.w-\[280px\]{width:280px}.w-\[calc\(100\%-2rem\)\]{width:calc(100% - 2rem)}.w-\[var\(--radix-popover-trigger-width\)\]{width:var(--radix-popover-trigger-width)}.w-full{width:100%}.max-w-2xl{max-width:var(--container-2xl)}.max-w-4xl{max-width:var(--container-4xl)}.max-w-64{max-width:calc(var(--spacing) * 64)}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.max-w-sm{max-width:var(--container-sm)}.max-w-xl{max-width:var(--container-xl)}.max-w-xs{max-width:var(--container-xs)}.min-w-0{min-width:0}.min-w-24{min-width:calc(var(--spacing) * 24)}.min-w-40{min-width:calc(var(--spacing) * 40)}.min-w-48{min-width:calc(var(--spacing) * 48)}.min-w-full{min-width:100%}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.rotate-180{rotate:180deg}.animate-spin{animation:var(--animate-spin)}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.cursor-text{cursor:text}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}.gap-8{gap:calc(var(--spacing) * 8)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(var(--spacing) * var(--tw-space-y-reverse));margin-block-end:calc(var(--spacing) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-1\.5>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1.5) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1.5) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-2>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-3>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)))}.gap-x-1\.5{column-gap:calc(var(--spacing) * 1.5)}.gap-y-0\.5{row-gap:calc(var(--spacing) * .5)}:where(.divide-y>:not(:last-child)){--tw-divide-y-reverse:0;border-bottom-style:var(--tw-border-style);border-top-style:var(--tw-border-style);border-top-width:calc(1px * var(--tw-divide-y-reverse));border-bottom-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)))}:where(.divide-\[color-mix\(in_srgb\,var\(--as-border\)_55\%\,transparent\)\]>:not(:last-child)){border-color:var(--as-border)}@supports (color:color-mix(in lab, red, red)){:where(.divide-\[color-mix\(in_srgb\,var\(--as-border\)_55\%\,transparent\)\]>:not(:last-child)){border-color:color-mix(in srgb,var(--as-border) 55%,transparent)}}:where(.divide-\[var\(--as-border\)\]>:not(:last-child)){border-color:var(--as-border)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.rounded-\[calc\(var\(--as-radius\)-2px\)\]{border-radius:calc(var(--as-radius) - 2px)}.rounded-\[calc\(var\(--as-radius-sm\)-2px\)\]{border-radius:calc(var(--as-radius-sm) - 2px)}.rounded-\[var\(--as-radius\)\]{border-radius:var(--as-radius)}.rounded-\[var\(--as-radius-lg\)\]{border-radius:var(--as-radius-lg)}.rounded-\[var\(--as-radius-sm\)\]{border-radius:var(--as-radius-sm)}.rounded-full{border-radius:3.40282e38px}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-dashed{--tw-border-style:dashed;border-style:dashed}.border-\[color-mix\(in_srgb\,var\(--as-ai\)_25\%\,transparent\)\]{border-color:var(--as-ai)}@supports (color:color-mix(in lab, red, red)){.border-\[color-mix\(in_srgb\,var\(--as-ai\)_25\%\,transparent\)\]{border-color:color-mix(in srgb,var(--as-ai) 25%,transparent)}}.border-\[var\(--as-border\)\]{border-color:var(--as-border)}.border-\[var\(--as-danger\)\],.border-\[var\(--as-danger\)\]\/40{border-color:var(--as-danger)}@supports (color:color-mix(in lab, red, red)){.border-\[var\(--as-danger\)\]\/40{border-color:color-mix(in oklab, var(--as-danger) 40%, transparent)}}.border-\[var\(--as-primary\)\],.border-\[var\(--as-primary\)\]\/30{border-color:var(--as-primary)}@supports (color:color-mix(in lab, red, red)){.border-\[var\(--as-primary\)\]\/30{border-color:color-mix(in oklab, var(--as-primary) 30%, transparent)}}.border-\[var\(--as-surface-raised\)\]{border-color:var(--as-surface-raised)}.border-transparent{border-color:#0000}.bg-\[color-mix\(in_srgb\,var\(--as-ai\)_8\%\,transparent\)\]{background-color:var(--as-ai)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_srgb\,var\(--as-ai\)_8\%\,transparent\)\]{background-color:color-mix(in srgb,var(--as-ai) 8%,transparent)}}.bg-\[color-mix\(in_srgb\,var\(--as-ai\)_12\%\,transparent\)\]{background-color:var(--as-ai)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_srgb\,var\(--as-ai\)_12\%\,transparent\)\]{background-color:color-mix(in srgb,var(--as-ai) 12%,transparent)}}.bg-\[color-mix\(in_srgb\,var\(--as-danger\)_12\%\,transparent\)\]{background-color:var(--as-danger)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_srgb\,var\(--as-danger\)_12\%\,transparent\)\]{background-color:color-mix(in srgb,var(--as-danger) 12%,transparent)}}.bg-\[color-mix\(in_srgb\,var\(--as-primary\)_12\%\,transparent\)\]{background-color:var(--as-primary)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_srgb\,var\(--as-primary\)_12\%\,transparent\)\]{background-color:color-mix(in srgb,var(--as-primary) 12%,transparent)}}.bg-\[color-mix\(in_srgb\,var\(--as-primary\)_30\%\,transparent\)\]{background-color:var(--as-primary)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_srgb\,var\(--as-primary\)_30\%\,transparent\)\]{background-color:color-mix(in srgb,var(--as-primary) 30%,transparent)}}.bg-\[color-mix\(in_srgb\,var\(--as-success\)_14\%\,transparent\)\]{background-color:var(--as-success)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_srgb\,var\(--as-success\)_14\%\,transparent\)\]{background-color:color-mix(in srgb,var(--as-success) 14%,transparent)}}.bg-\[color-mix\(in_srgb\,var\(--as-warning\)_18\%\,transparent\)\]{background-color:var(--as-warning)}@supports (color:color-mix(in lab, red, red)){.bg-\[color-mix\(in_srgb\,var\(--as-warning\)_18\%\,transparent\)\]{background-color:color-mix(in srgb,var(--as-warning) 18%,transparent)}}.bg-\[var\(--as-ai\)\]{background-color:var(--as-ai)}.bg-\[var\(--as-border\)\]{background-color:var(--as-border)}.bg-\[var\(--as-danger\)\],.bg-\[var\(--as-danger\)\]\/10{background-color:var(--as-danger)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--as-danger\)\]\/10{background-color:color-mix(in oklab, var(--as-danger) 10%, transparent)}}.bg-\[var\(--as-fg\)\]{background-color:var(--as-fg)}.bg-\[var\(--as-muted\)\]{background-color:var(--as-muted)}.bg-\[var\(--as-overlay\)\]{background-color:var(--as-overlay)}.bg-\[var\(--as-primary\)\],.bg-\[var\(--as-primary\)\]\/10{background-color:var(--as-primary)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--as-primary\)\]\/10{background-color:color-mix(in oklab, var(--as-primary) 10%, transparent)}}.bg-\[var\(--as-primary\)\]\/50{background-color:var(--as-primary)}@supports (color:color-mix(in lab, red, red)){.bg-\[var\(--as-primary\)\]\/50{background-color:color-mix(in oklab, var(--as-primary) 50%, transparent)}}.bg-\[var\(--as-secondary\)\]{background-color:var(--as-secondary)}.bg-\[var\(--as-success\)\]{background-color:var(--as-success)}.bg-\[var\(--as-surface\)\]{background-color:var(--as-surface)}.bg-\[var\(--as-surface-raised\)\]{background-color:var(--as-surface-raised)}.bg-\[var\(--as-warning\)\]{background-color:var(--as-warning)}.bg-red-500{background-color:var(--color-red-500)}.bg-transparent{background-color:#0000}.p-0{padding:0}.p-0\.5{padding:calc(var(--spacing) * .5)}.p-1{padding:var(--spacing)}.p-1\.5{padding:calc(var(--spacing) * 1.5)}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-5{padding:calc(var(--spacing) * 5)}.p-6{padding:calc(var(--spacing) * 6)}.px-1{padding-inline:var(--spacing)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-5{padding-inline:calc(var(--spacing) * 5)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-1{padding-block:var(--spacing)}.py-1\.5{padding-block:calc(var(--spacing) * 1.5)}.py-2{padding-block:calc(var(--spacing) * 2)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3{padding-block:calc(var(--spacing) * 3)}.py-4{padding-block:calc(var(--spacing) * 4)}.py-6{padding-block:calc(var(--spacing) * 6)}.py-12{padding-block:calc(var(--spacing) * 12)}.pt-0{padding-top:0}.pt-1{padding-top:var(--spacing)}.pt-1\.5{padding-top:calc(var(--spacing) * 1.5)}.pt-2{padding-top:calc(var(--spacing) * 2)}.pt-8{padding-top:calc(var(--spacing) * 8)}.pt-10{padding-top:calc(var(--spacing) * 10)}.pr-1\.5{padding-right:calc(var(--spacing) * 1.5)}.pr-8{padding-right:calc(var(--spacing) * 8)}.pr-14{padding-right:calc(var(--spacing) * 14)}.pb-0\.5{padding-bottom:calc(var(--spacing) * .5)}.pb-1{padding-bottom:var(--spacing)}.pb-1\.5{padding-bottom:calc(var(--spacing) * 1.5)}.pb-2{padding-bottom:calc(var(--spacing) * 2)}.pb-4{padding-bottom:calc(var(--spacing) * 4)}.pl-2\.5{padding-left:calc(var(--spacing) * 2.5)}.text-center{text-align:center}.text-left{text-align:left}.font-mono{font-family:var(--font-mono)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\[9px\]{font-size:9px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.leading-none{--tw-leading:1;line-height:1}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.leading-tight{--tw-leading:var(--leading-tight);line-height:var(--leading-tight)}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.18em\]{--tw-tracking:.18em;letter-spacing:.18em}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wide{--tw-tracking:var(--tracking-wide);letter-spacing:var(--tracking-wide)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.whitespace-nowrap{white-space:nowrap}.text-\[color-mix\(in_srgb\,var\(--as-warning\)_72\%\,var\(--as-fg\)\)\]{color:var(--as-warning)}@supports (color:color-mix(in lab, red, red)){.text-\[color-mix\(in_srgb\,var\(--as-warning\)_72\%\,var\(--as-fg\)\)\]{color:color-mix(in srgb,var(--as-warning) 72%,var(--as-fg))}}.text-\[var\(--as-ai\)\]{color:var(--as-ai)}.text-\[var\(--as-ai-fg\)\]{color:var(--as-ai-fg)}.text-\[var\(--as-danger\)\]{color:var(--as-danger)}.text-\[var\(--as-danger-fg\)\]{color:var(--as-danger-fg)}.text-\[var\(--as-fg\)\]{color:var(--as-fg)}.text-\[var\(--as-muted-fg\)\]{color:var(--as-muted-fg)}.text-\[var\(--as-primary\)\]{color:var(--as-primary)}.text-\[var\(--as-primary-fg\)\]{color:var(--as-primary-fg)}.text-\[var\(--as-secondary-fg\)\]{color:var(--as-secondary-fg)}.text-\[var\(--as-success\)\]{color:var(--as-success)}.text-\[var\(--as-success-fg\)\]{color:var(--as-success-fg)}.text-\[var\(--as-surface\)\]{color:var(--as-surface)}.text-\[var\(--as-warning-fg\)\]{color:var(--as-warning-fg)}.text-inherit{color:inherit}.uppercase{text-transform:uppercase}.accent-\[var\(--as-primary\)\]{accent-color:var(--as-primary)}.opacity-0{opacity:0}.opacity-30{opacity:.3}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-70{opacity:.7}.opacity-100{opacity:1}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--as-shadow-1\)\]{--tw-shadow:var(--as-shadow-1);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--as-shadow-2\)\]{--tw-shadow:var(--as-shadow-2);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-\[var\(--as-shadow-3\)\]{--tw-shadow:var(--as-shadow-3);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition-\[filter\]{transition-property:filter;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-\[width\]{transition-property:width;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.duration-300{--tw-duration:.3s;transition-duration:.3s}.ease-out{--tw-ease:var(--ease-out);transition-timing-function:var(--ease-out)}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;user-select:none}@media (hover:hover){.group-hover\:opacity-100:is(:where(.group):hover *){opacity:1}}.placeholder\:text-\[var\(--as-muted-fg\)\]::placeholder{color:var(--as-muted-fg)}.focus-within\:border-\[var\(--as-focus-ring\)\]:focus-within{border-color:var(--as-focus-ring)}.focus-within\:opacity-100:focus-within{opacity:1}.focus-within\:ring-2:focus-within{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-within\:ring-\[var\(--as-focus-ring\)\]:focus-within{--tw-ring-color:var(--as-focus-ring)}@media (hover:hover){.hover\:border-\[var\(--as-fg\)\]\/30:hover{border-color:var(--as-fg)}@supports (color:color-mix(in lab, red, red)){.hover\:border-\[var\(--as-fg\)\]\/30:hover{border-color:color-mix(in oklab, var(--as-fg) 30%, transparent)}}.hover\:border-\[var\(--as-fg\)\]\/40:hover{border-color:var(--as-fg)}@supports (color:color-mix(in lab, red, red)){.hover\:border-\[var\(--as-fg\)\]\/40:hover{border-color:color-mix(in oklab, var(--as-fg) 40%, transparent)}}.hover\:bg-\[color-mix\(in_srgb\,var\(--as-ai\)_14\%\,var\(--as-secondary\)\)\]:hover{background-color:var(--as-ai)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-\[color-mix\(in_srgb\,var\(--as-ai\)_14\%\,var\(--as-secondary\)\)\]:hover{background-color:color-mix(in srgb,var(--as-ai) 14%,var(--as-secondary))}}.hover\:bg-\[color-mix\(in_srgb\,var\(--as-muted\)_60\%\,transparent\)\]:hover{background-color:var(--as-muted)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-\[color-mix\(in_srgb\,var\(--as-muted\)_60\%\,transparent\)\]:hover{background-color:color-mix(in srgb,var(--as-muted) 60%,transparent)}}.hover\:bg-\[var\(--as-muted\)\]:hover{background-color:var(--as-muted)}.hover\:bg-\[var\(--as-secondary\)\]:hover{background-color:var(--as-secondary)}.hover\:bg-transparent:hover{background-color:#0000}.hover\:text-\[var\(--as-danger\)\]:hover{color:var(--as-danger)}.hover\:text-\[var\(--as-fg\)\]:hover{color:var(--as-fg)}.hover\:text-\[var\(--as-primary\)\]:hover{color:var(--as-primary)}.hover\:text-\[var\(--as-success\)\]:hover{color:var(--as-success)}.hover\:opacity-80:hover{opacity:.8}.hover\:opacity-90:hover{opacity:.9}.hover\:opacity-100:hover{opacity:1}.hover\:brightness-95:hover{--tw-brightness:brightness(95%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.hover\:brightness-110:hover{--tw-brightness:brightness(110%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.focus\:bg-\[var\(--as-danger\)\]\/10:focus{background-color:var(--as-danger)}@supports (color:color-mix(in lab, red, red)){.focus\:bg-\[var\(--as-danger\)\]\/10:focus{background-color:color-mix(in oklab, var(--as-danger) 10%, transparent)}}.focus\:bg-\[var\(--as-secondary\)\]:focus{background-color:var(--as-secondary)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:border-\[var\(--as-danger\)\]:focus-visible{border-color:var(--as-danger)}.focus-visible\:border-\[var\(--as-focus-ring\)\]:focus-visible{border-color:var(--as-focus-ring)}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-\[var\(--as-danger\)\]:focus-visible{--tw-ring-color:var(--as-danger)}.focus-visible\:ring-\[var\(--as-focus-ring\)\]:focus-visible{--tw-ring-color:var(--as-focus-ring)}.focus-visible\:ring-offset-0:focus-visible{--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:outline-2:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}.focus-visible\:outline-offset-1:focus-visible{outline-offset:1px}.focus-visible\:outline-offset-2:focus-visible{outline-offset:2px}.focus-visible\:outline-offset-\[-2px\]:focus-visible{outline-offset:-2px}.focus-visible\:outline-\[var\(--as-focus-ring\)\]:focus-visible{outline-color:var(--as-focus-ring)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-default:disabled{cursor:default}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-40:disabled{opacity:.4}.disabled\:opacity-50:disabled{opacity:.5}.data-\[disabled\]\:pointer-events-none[data-disabled]{pointer-events:none}.data-\[disabled\]\:opacity-50[data-disabled]{opacity:.5}@media (min-width:40rem){.sm\:inset-auto{inset:auto}.sm\:top-1\/2{top:50%}.sm\:left-1\/2{left:50%}.sm\:mr-auto{margin-right:auto}.sm\:h-auto{height:auto}.sm\:max-h-\[90vh\]{max-height:90vh}.sm\:w-auto{width:auto}.sm\:max-w-2xl{max-width:var(--container-2xl)}.sm\:max-w-4xl{max-width:var(--container-4xl)}.sm\:max-w-6xl{max-width:var(--container-6xl)}.sm\:max-w-md{max-width:var(--container-md)}.sm\:-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.sm\:-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.sm\:flex-row{flex-direction:row}.sm\:justify-end{justify-content:flex-end}.sm\:rounded-\[var\(--as-radius-lg\)\]{border-radius:var(--as-radius-lg)}.sm\:border{border-style:var(--tw-border-style);border-width:1px}.sm\:border-\[var\(--as-border\)\]{border-color:var(--as-border)}.sm\:p-6{padding:calc(var(--spacing) * 6)}.sm\:px-6{padding-inline:calc(var(--spacing) * 6)}}@media (min-width:64rem){.lg\:relative{position:relative}.lg\:sticky{position:sticky}.lg\:top-24{top:calc(var(--spacing) * 24)}.lg\:col-span-1{grid-column:span 1/span 1}.lg\:col-span-3{grid-column:span 3/span 3}.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-3 svg{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.\[\&_svg\]\:size-4 svg{width:calc(var(--spacing) * 4);height:calc(var(--spacing) * 4)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}@keyframes as-fade-in{0%{opacity:0}to{opacity:1}}@keyframes as-zoom-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.97)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}@keyframes as-pop-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes as-drawer-in{0%{transform:translate(100%)}to{transform:translate(0)}}.as-anim-fade{animation:.15s ease-out as-fade-in}.as-anim-modal{animation:.15s ease-out as-zoom-in}.as-anim-pop{animation:.12s ease-out as-pop-in}.as-anim-drawer{animation:.2s ease-out as-drawer-in}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-divide-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
interface TextareaProps extends React.ComponentProps<'textarea'> {
|
|
4
|
+
label?: string;
|
|
5
|
+
hint?: string;
|
|
6
|
+
error?: string;
|
|
7
|
+
}
|
|
8
|
+
declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
|
|
9
|
+
|
|
10
|
+
export { Textarea, type TextareaProps };
|
package/dist/textarea.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"textarea.js"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neuronection/assistant-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "Shared React component library for the Assistant family (career-, study-, health-assistant). Family look by default, app-flavored via CSS-variable tokens.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -46,6 +46,10 @@
|
|
|
46
46
|
"types": "./dist/card.d.ts",
|
|
47
47
|
"import": "./dist/card.js"
|
|
48
48
|
},
|
|
49
|
+
"./connection-test-row": {
|
|
50
|
+
"types": "./dist/connection-test-row.d.ts",
|
|
51
|
+
"import": "./dist/connection-test-row.js"
|
|
52
|
+
},
|
|
49
53
|
"./check-indicator": {
|
|
50
54
|
"types": "./dist/check-indicator.d.ts",
|
|
51
55
|
"import": "./dist/check-indicator.js"
|
|
@@ -126,6 +130,10 @@
|
|
|
126
130
|
"types": "./dist/popover-button.d.ts",
|
|
127
131
|
"import": "./dist/popover-button.js"
|
|
128
132
|
},
|
|
133
|
+
"./provider-form": {
|
|
134
|
+
"types": "./dist/provider-form.d.ts",
|
|
135
|
+
"import": "./dist/provider-form.js"
|
|
136
|
+
},
|
|
129
137
|
"./portal": {
|
|
130
138
|
"types": "./dist/portal.d.ts",
|
|
131
139
|
"import": "./dist/portal.js"
|
|
@@ -154,6 +162,14 @@
|
|
|
154
162
|
"types": "./dist/table.d.ts",
|
|
155
163
|
"import": "./dist/table.js"
|
|
156
164
|
},
|
|
165
|
+
"./textarea": {
|
|
166
|
+
"types": "./dist/textarea.d.ts",
|
|
167
|
+
"import": "./dist/textarea.js"
|
|
168
|
+
},
|
|
169
|
+
"./settings-shell": {
|
|
170
|
+
"types": "./dist/settings-shell.d.ts",
|
|
171
|
+
"import": "./dist/settings-shell.js"
|
|
172
|
+
},
|
|
157
173
|
"./theme-scope": {
|
|
158
174
|
"types": "./dist/theme-scope.d.ts",
|
|
159
175
|
"import": "./dist/theme-scope.js"
|
|
@@ -234,7 +250,7 @@
|
|
|
234
250
|
"watch:css": "node scripts/watch-css.mjs",
|
|
235
251
|
"playground": "ladle serve -p 61000",
|
|
236
252
|
"playground:build": "ladle build",
|
|
237
|
-
"build": "pnpm build:ts && pnpm build:css",
|
|
253
|
+
"build": "NODE_OPTIONS=--max-old-space-size=8192 pnpm build:ts && pnpm build:css",
|
|
238
254
|
"build:ts": "node -e \"require('fs').rmSync('dist',{recursive:true,force:true})\" && tsup",
|
|
239
255
|
"build:css": "tailwindcss -i src/tokens/tokens.css -o dist/styles.css --minify && node scripts/unwrap-layers.mjs",
|
|
240
256
|
"test": "vitest run",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/input/Input.tsx"],"names":["Input"],"mappings":";;;;AASO,IAAM,KAAA,GAAc,KAAA,CAAA,UAAA,CAAyC,SAASA,MAAAA,CAC3E,EAAE,SAAA,EAAW,KAAA,EAAO,IAAA,EAAM,KAAA,EAAO,EAAA,EAAI,MAAA,EAAQ,GAAG,KAAA,IAChD,GAAA,EACA;AACA,EAAA,MAAM,SAAe,KAAA,CAAA,KAAA,EAAM;AAC3B,EAAA,MAAM,EAAA,GAAK,MAAA,KAAW,KAAA,IAAS,IAAA,IAAQ,QAAQ,MAAA,GAAS,MAAA,CAAA;AACxD,EAAA,MAAM,WAAA,GAAc,QAAQ,CAAA,EAAG,EAAE,WAAW,IAAA,GAAO,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,GAAU,MAAA;AAElE,EAAA,MAAM,KAAA,mBACJ,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,EAAA;AAAA,MACA,SAAA,EAAQ,OAAA;AAAA,MACR,cAAA,EAAc,QAAQ,IAAA,GAAO,MAAA;AAAA,MAC7B,kBAAA,EAAkB,WAAA;AAAA,MAClB,SAAA,EAAW,EAAA;AAAA,QACT,oZAAA;AAAA,QACA,KAAA,IACE,yGAAA;AAAA,QACF;AAAA,OACF;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAGF,EAAA,IAAI,CAAC,KAAA,IAAS,CAAC,IAAA,IAAQ,CAAC,OAAO,OAAO,KAAA;AAEtC,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EACZ,QAAA,EAAA;AAAA,IAAA,KAAA,uBACE,OAAA,EAAA,EAAM,OAAA,EAAS,IAAI,SAAA,EAAU,sDAAA,EAC3B,iBACH,CAAA,GACE,IAAA;AAAA,IACH,KAAA;AAAA,IACA,IAAA,IAAQ,CAAC,KAAA,mBACR,GAAA,CAAC,GAAA,EAAA,EAAE,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,KAAA,CAAA,EAAS,SAAA,EAAU,mCAAA,EAC5B,QAAA,EAAA,IAAA,EACH,CAAA,GACE,IAAA;AAAA,IACH,KAAA,mBACC,GAAA,CAAC,GAAA,EAAA,EAAE,EAAA,EAAI,CAAA,EAAG,EAAE,CAAA,MAAA,CAAA,EAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,6CAAA,EAC1C,QAAA,EAAA,KAAA,EACH,CAAA,GACE;AAAA,GAAA,EACN,CAAA;AAEJ,CAAC","file":"chunk-COPPAHR5.js","sourcesContent":["import * as React from 'react'\nimport { cn } from '../../lib/utils'\n\nexport interface InputProps extends React.ComponentProps<'input'> {\n label?: string\n hint?: string\n error?: string\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(\n { className, label, hint, error, id: idProp, ...props },\n ref,\n) {\n const autoId = React.useId()\n const id = idProp ?? (label || hint || error ? autoId : undefined)\n const describedBy = error ? `${id}-error` : hint ? `${id}-hint` : undefined\n\n const input = (\n <input\n ref={ref}\n id={id}\n data-as=\"input\"\n aria-invalid={error ? true : undefined}\n aria-describedby={describedBy}\n className={cn(\n 'flex h-9 w-full rounded-[var(--as-radius)] border border-[var(--as-border)] bg-[var(--as-surface)] px-3 py-1 text-sm text-[var(--as-fg)] transition-colors placeholder:text-[var(--as-muted-fg)] focus-visible:border-[var(--as-focus-ring)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--as-focus-ring)] focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50',\n error &&\n 'border-[var(--as-danger)] focus-visible:border-[var(--as-danger)] focus-visible:ring-[var(--as-danger)]',\n className,\n )}\n {...props}\n />\n )\n\n if (!label && !hint && !error) return input\n\n return (\n <div className=\"flex w-full flex-col gap-1.5\">\n {label ? (\n <label htmlFor={id} className=\"text-sm font-medium leading-none text-[var(--as-fg)]\">\n {label}\n </label>\n ) : null}\n {input}\n {hint && !error ? (\n <p id={`${id}-hint`} className=\"text-xs text-[var(--as-muted-fg)]\">\n {hint}\n </p>\n ) : null}\n {error ? (\n <p id={`${id}-error`} role=\"alert\" className=\"text-xs font-medium text-[var(--as-danger)]\">\n {error}\n </p>\n ) : null}\n </div>\n )\n})\n"]}
|