@petrarca/sonnet-playground 0.3.0 → 0.4.1
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/README.md +142 -0
- package/dist/{PlayCoreComponents-F2OFSQZK.js → PlayCoreComponents-GXFMB24T.js} +2 -2
- package/dist/{PlayDataComponents-BA3NA225.js → PlayDataComponents-W44OITT5.js} +2 -2
- package/dist/{PlayFormComponents-MZC7CNES.js → PlayFormComponents-4E2A2Y2W.js} +2 -2
- package/dist/PlayGraph-ADRTDRA7.js +7 -0
- package/dist/{PlayShellApi-3T4FZPEV.js → PlayShellApi-5O6VYR2X.js} +2 -2
- package/dist/{chunk-MT4ILA37.js → chunk-32DDRRWU.js} +63 -9
- package/dist/chunk-32DDRRWU.js.map +1 -0
- package/dist/{chunk-SBKZRIJC.js → chunk-4ORSUS65.js} +49 -6
- package/dist/chunk-4ORSUS65.js.map +1 -0
- package/dist/{chunk-4S2ITDB3.js → chunk-CQ6PGFRV.js} +21 -2
- package/dist/chunk-CQ6PGFRV.js.map +1 -0
- package/dist/{chunk-DKLALDHR.js → chunk-O2QMWJZI.js} +53 -3
- package/dist/chunk-O2QMWJZI.js.map +1 -0
- package/dist/{chunk-QCK2M4KD.js → chunk-YOOWJORD.js} +28 -1
- package/dist/chunk-YOOWJORD.js.map +1 -0
- package/dist/index.js +5 -5
- package/dist/pages/index.js +5 -5
- package/package.json +6 -6
- package/dist/PlayGraph-RHFIDAS3.js +0 -7
- package/dist/chunk-4S2ITDB3.js.map +0 -1
- package/dist/chunk-DKLALDHR.js.map +0 -1
- package/dist/chunk-MT4ILA37.js.map +0 -1
- package/dist/chunk-QCK2M4KD.js.map +0 -1
- package/dist/chunk-SBKZRIJC.js.map +0 -1
- /package/dist/{PlayCoreComponents-F2OFSQZK.js.map → PlayCoreComponents-GXFMB24T.js.map} +0 -0
- /package/dist/{PlayDataComponents-BA3NA225.js.map → PlayDataComponents-W44OITT5.js.map} +0 -0
- /package/dist/{PlayFormComponents-MZC7CNES.js.map → PlayFormComponents-4E2A2Y2W.js.map} +0 -0
- /package/dist/{PlayGraph-RHFIDAS3.js.map → PlayGraph-ADRTDRA7.js.map} +0 -0
- /package/dist/{PlayShellApi-3T4FZPEV.js.map → PlayShellApi-5O6VYR2X.js.map} +0 -0
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/pages/PlayShellApi.tsx"],"sourcesContent":["import { Button, Separator } from \"@petrarca/sonnet-ui\";\nimport {\n notification,\n dialog,\n navigation,\n panel,\n sidePane,\n} from \"@petrarca/sonnet-shell\";\nimport { PlaygroundSection } from \"../PlaygroundSection\";\n\n/**\n * PlayShellApi -- playground page that exercises the shell API surface.\n *\n * Covers: notification, dialog, navigation, panel, sidePane,\n * and the command menu (Cmd+K).\n */\nexport default function PlayShellApi() {\n return (\n <div className=\"space-y-6\">\n {/* ── notification ─────────────────────────────────────────── */}\n <PlaygroundSection\n title=\"notification\"\n description=\"Toasts via the shell notification API — wraps Sonner.\"\n variant=\"card\"\n >\n <div className=\"flex flex-wrap gap-2\">\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => notification.success(\"Operation completed.\")}\n >\n success()\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => notification.error(\"Something went wrong.\")}\n >\n error()\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => notification.warning(\"Proceed with caution.\")}\n >\n warning()\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => notification.info(\"Here is some information.\")}\n >\n info()\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() =>\n notification.promise(\n new Promise((resolve) => setTimeout(resolve, 2000)),\n {\n loading: \"Loading...\",\n success: \"Done!\",\n error: \"Failed.\",\n },\n )\n }\n >\n promise()\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => notification.dismiss()}\n >\n dismiss()\n </Button>\n </div>\n </PlaygroundSection>\n\n {/* ── dialog ───────────────────────────────────────────────── */}\n <PlaygroundSection\n title=\"dialog\"\n description=\"Confirmation dialog via the shell dialog API.\"\n variant=\"card\"\n >\n <div className=\"flex flex-wrap gap-2\">\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={async () => {\n const confirmed = await dialog.confirm({\n title: \"Delete Resource\",\n description:\n \"This will permanently delete the resource. Are you sure?\",\n confirmLabel: \"Delete\",\n variant: \"destructive\",\n });\n notification.info(\n confirmed ? \"User confirmed.\" : \"User cancelled.\",\n );\n }}\n >\n confirm() — destructive\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={async () => {\n const confirmed = await dialog.confirm({\n title: \"Save Changes\",\n description: \"Do you want to save your changes?\",\n });\n notification.info(\n confirmed ? \"User confirmed.\" : \"User cancelled.\",\n );\n }}\n >\n confirm() — default\n </Button>\n </div>\n </PlaygroundSection>\n\n {/* ── navigation ───────────────────────────────────────────── */}\n <PlaygroundSection\n title=\"navigation\"\n description=\"Programmatic navigation via the shell navigation API.\"\n variant=\"card\"\n >\n <div className=\"flex flex-wrap gap-2\">\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => navigation.goTo(\"/home\")}\n >\n goTo(\"/home\")\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => navigation.goTo(\"/playground\")}\n >\n goTo(\"/playground\")\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => navigation.openCommandMenu()}\n >\n openCommandMenu()\n </Button>\n <Button variant=\"outline\" size=\"sm\" onClick={() => navigation.back()}>\n back()\n </Button>\n </div>\n </PlaygroundSection>\n\n {/* ── panel ────────────────────────────────────────────────── */}\n <PlaygroundSection\n title=\"panel\"\n description=\"Shell-managed slide-over panel — renders content inside a Sheet owned by the shell.\"\n variant=\"card\"\n >\n <div className=\"flex flex-wrap gap-2\">\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() =>\n panel.open({\n title: \"Panel Demo\",\n description: \"This is a shell-managed slide-over panel.\",\n content: (\n <div className=\"p-4 space-y-3\">\n <p className=\"text-sm\">\n This content is rendered inside the shell's Sheet\n component.\n </p>\n <p className=\"text-xs text-muted-foreground\">\n Use <code>panel.open()</code> to show any React content in\n a slide-over panel.\n </p>\n </div>\n ),\n })\n }\n >\n open() — narrow\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() =>\n panel.open({\n title: \"Wide Panel\",\n content: (\n <div className=\"p-4 space-y-3\">\n <p className=\"text-sm font-medium\">Wide panel (default)</p>\n <p className=\"text-xs text-muted-foreground\">\n width=\"default\" gives a wider panel for more complex\n content.\n </p>\n </div>\n ),\n width: \"default\",\n })\n }\n >\n open() — default width\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() =>\n panel.open({\n title: \"Full Coverage\",\n content: (\n <div className=\"p-4 space-y-3\">\n <p className=\"text-sm font-medium\">Full coverage panel</p>\n <p className=\"text-xs text-muted-foreground\">\n coverage=\"full\" overlays the entire content area.\n </p>\n </div>\n ),\n width: \"default\",\n coverage: \"full\",\n })\n }\n >\n open() — full coverage\n </Button>\n <Button variant=\"outline\" size=\"sm\" onClick={() => panel.close()}>\n close()\n </Button>\n </div>\n </PlaygroundSection>\n\n {/* ── sidePane ─────────────────────────────────────────────── */}\n <PlaygroundSection\n title=\"sidePane\"\n description=\"Persistent inline resizable panel. Sits beside the content area — the main view shrinks rather than being overlaid. Drag the edge to resize; double-click to reset.\"\n variant=\"card\"\n >\n <div className=\"flex flex-wrap gap-2\">\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() =>\n sidePane.open({\n moduleId: \"shell-demo-narrow\",\n defaultWidth: 240,\n minWidth: 180,\n maxWidth: 400,\n content: (\n <div className=\"p-4 space-y-3\">\n <p className=\"text-sm font-medium\">Narrow pane (240px)</p>\n <p className=\"text-xs text-muted-foreground\">\n defaultWidth=240 minWidth=180 maxWidth=400\n </p>\n </div>\n ),\n })\n }\n >\n open() — narrow\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() =>\n sidePane.open({\n moduleId: \"shell-demo-wide\",\n defaultWidth: 480,\n minWidth: 320,\n maxWidth: 800,\n content: (\n <div className=\"p-4 space-y-3\">\n <p className=\"text-sm font-medium\">Wide pane (480px)</p>\n <p className=\"text-xs text-muted-foreground\">\n defaultWidth=480 minWidth=320 maxWidth=800\n </p>\n </div>\n ),\n })\n }\n >\n open() — wide\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() =>\n sidePane.toggle({\n moduleId: \"shell-demo-toggle\",\n defaultWidth: 320,\n content: (\n <div className=\"p-4 space-y-3\">\n <p className=\"text-sm font-medium\">Toggle pane</p>\n <p className=\"text-xs text-muted-foreground\">\n Click again to close. Same moduleId toggles.\n </p>\n </div>\n ),\n })\n }\n >\n toggle()\n </Button>\n <Button variant=\"outline\" size=\"sm\" onClick={() => sidePane.close()}>\n close()\n </Button>\n </div>\n </PlaygroundSection>\n\n {/* ── CommandMenu (Cmd+K) ──────────────────────────────────── */}\n <PlaygroundSection\n title=\"CommandMenu (Cmd+K)\"\n description=\"Open the command palette programmatically. Modules can register commands that appear here via the commands array in their ShellModule definition.\"\n variant=\"card\"\n >\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => navigation.openCommandMenu()}\n >\n Open CommandMenu\n </Button>\n </PlaygroundSection>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/pages/PlayDataComponents.tsx"],"sourcesContent":["/**\n * Playground page for SearchInput, EntitySelect, EntityTable, and EntityTree.\n * Accessible at /playground/data-components\n *\n * Six sections:\n * 1. Simple mode -- single freetext search, no field picker\n * 2. Faceted mode -- two-column: schema editor left, live search + output right\n * 3. EntityTable -- static sample data wired to faceted SearchInput\n * 4. Local renderers -- same data with x- prefixed custom cell renderers\n * 5. EntitySelect -- async searchable select backed by a static mock fetcher\n * 6. EntityTree -- schema-driven tree with static nested data\n */\n\nimport React, { useState, useMemo, useCallback } from \"react\";\nimport { ArrowRight, ArrowUp } from \"lucide-react\";\nimport {\n Badge,\n Button,\n Card,\n SimpleTooltip,\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n SearchInput,\n type SearchMode,\n EntitySelect,\n EntityTable,\n createRenderer,\n EntityTree,\n type TreeNode,\n type TableUiSchema,\n} from \"@petrarca/sonnet-ui\";\nimport { FormTextarea } from \"@petrarca/sonnet-forms\";\nimport { JsonEditor } from \"@petrarca/sonnet-ui/json-editor\";\nimport { PlaygroundSection } from \"../PlaygroundSection\";\nimport {\n EMPTY_FILTER,\n flattenFilterExpr,\n isEmptyFilterExpr,\n serializeFilterExpr,\n type FilterExpr,\n} from \"@petrarca/sonnet-core/search\";\nimport { toJsonSchema, type JsonSchema } from \"@petrarca/sonnet-core/schema\";\nimport { useTreeExpansion } from \"@petrarca/sonnet-core/hooks\";\nimport type { EntityOptionFetcher } from \"@petrarca/sonnet-core/entityOptions\";\nimport { z } from \"zod/v4\";\n\n// Static mock patient data for the EntitySelect playground demo.\n// Uses a local fetcher so the playground has no dependency on a live API.\nconst MOCK_PATIENTS = [\n { value: \"pat_001\", label: \"Alice Hartmann\" },\n { value: \"pat_002\", label: \"Bob Nguyen\" },\n { value: \"pat_003\", label: \"Carol Smith\" },\n { value: \"pat_004\", label: \"David Okafor\" },\n { value: \"pat_005\", label: \"Eva Larsson\" },\n { value: \"pat_006\", label: \"Frank Torres\" },\n { value: \"pat_007\", label: \"Grace Kim\" },\n { value: \"pat_008\", label: \"Henry Bauer\" },\n];\n\nconst patientFetcher: EntityOptionFetcher = ({ search } = {}) => {\n const q = search?.toLowerCase() ?? \"\";\n const results = q\n ? MOCK_PATIENTS.filter((p) => p.label.toLowerCase().includes(q))\n : MOCK_PATIENTS;\n return Promise.resolve(results);\n};\n\ninterface SampleRow {\n id: string;\n name: string;\n status: \"active\" | \"inactive\" | \"pending\";\n role: string;\n joined: string;\n}\n\nconst ALL_ROWS: SampleRow[] = [\n {\n id: \"u-001\",\n name: \"Alice Hartmann\",\n status: \"active\",\n role: \"admin\",\n joined: \"2024-01-15\",\n },\n {\n id: \"u-002\",\n name: \"Bob Nguyen\",\n status: \"active\",\n role: \"editor\",\n joined: \"2024-02-03\",\n },\n {\n id: \"u-003\",\n name: \"Carol Smith\",\n status: \"inactive\",\n role: \"viewer\",\n joined: \"2024-03-20\",\n },\n {\n id: \"u-004\",\n name: \"David Okafor\",\n status: \"pending\",\n role: \"editor\",\n joined: \"2024-04-11\",\n },\n {\n id: \"u-005\",\n name: \"Eva Larsson\",\n status: \"active\",\n role: \"admin\",\n joined: \"2024-05-08\",\n },\n {\n id: \"u-006\",\n name: \"Frank Torres\",\n status: \"inactive\",\n role: \"viewer\",\n joined: \"2024-06-22\",\n },\n {\n id: \"u-007\",\n name: \"Grace Kim\",\n status: \"active\",\n role: \"editor\",\n joined: \"2024-07-14\",\n },\n {\n id: \"u-008\",\n name: \"Henry Bauer\",\n status: \"pending\",\n role: \"viewer\",\n joined: \"2024-08-30\",\n },\n];\n\nconst STATUS_COLOR = {\n active: \"green\",\n inactive: \"violet\",\n pending: \"yellow\",\n} as const;\n\nconst PlaygroundFacets = z.object({\n search: z.string().meta({ \"x-ui-title\": \"Name\" }),\n status: z\n .enum([\"active\", \"inactive\", \"pending\"])\n .optional()\n .meta({\n \"x-ui-title\": \"Status\",\n \"x-ui-options\": {\n enumNames: {\n active: \"Active\",\n inactive: \"Inactive\",\n pending: \"Pending\",\n },\n },\n }),\n role: z.string().optional().meta({ \"x-ui-title\": \"Role\" }),\n});\n\nconst SEARCH_FACET_SCHEMA = toJsonSchema(PlaygroundFacets);\n\nconst SAMPLE_SCHEMA: JsonSchema = {\n title: \"User\",\n type: \"object\",\n properties: {\n name: {\n type: \"string\",\n title: \"Name\",\n \"x-ui-column\": { order: 0 },\n \"x-ui-cell\": \"bold\",\n },\n status: {\n type: \"string\",\n title: \"Status\",\n \"x-ui-column\": { order: 1 },\n \"x-ui-cell\": \"badge\",\n \"x-ui-cell-options\": { colors: STATUS_COLOR },\n },\n role: {\n type: \"string\",\n title: \"Role\",\n \"x-ui-column\": { order: 2 },\n \"x-ui-cell\": \"muted\",\n },\n id: {\n type: \"string\",\n title: \"ID\",\n \"x-ui-column\": { order: 3 },\n \"x-ui-cell\": \"code\",\n },\n joined: {\n type: \"string\",\n format: \"date\",\n title: \"Joined\",\n \"x-ui-column\": { order: 4 },\n },\n },\n};\n\nconst SAMPLE_UI_SCHEMA: TableUiSchema = {}; // mutable via the live schema editor below\n\n// Local renderer demo: three x- prefixed renderers using the same SampleRow data.\nconst ROLE_ICONS: Record<string, string> = {\n admin: \"A\",\n editor: \"E\",\n viewer: \"V\",\n};\n\nconst CUSTOM_RENDERERS = {\n // Extract initials from the name, display as avatar circle + name.\n \"x-play-initials\": createRenderer<SampleRow>((row) => {\n const initials = row.name\n .split(\" \")\n .map((w) => w[0])\n .join(\"\");\n return (\n <span className=\"inline-flex items-center gap-2\">\n <span className=\"inline-flex items-center justify-center h-7 w-7 rounded-full bg-muted text-xs font-medium shrink-0\">\n {initials}\n </span>\n <span className=\"font-medium\">{row.name}</span>\n </span>\n );\n }),\n\n // Role with a letter prefix read from options.icons.\n \"x-play-role-icon\": createRenderer<SampleRow>((row, options) => {\n const icons = (options.icons as Record<string, string>) ?? {};\n const icon = icons[row.role] ?? \"?\";\n return (\n <span>\n <span className=\"inline-flex items-center justify-center h-5 w-5 rounded bg-muted text-xs font-mono mr-1.5\">\n {icon}\n </span>\n {row.role}\n </span>\n );\n }),\n\n // Compute days since joined, color-coded by threshold from options.\n \"x-play-tenure\": createRenderer<SampleRow>((row, options) => {\n const threshold = (options.recentDays as number) ?? 365;\n const days = Math.floor(\n (Date.now() - new Date(row.joined).getTime()) / 86_400_000,\n );\n const isRecent = days < threshold;\n return (\n <span className={isRecent ? \"text-primary\" : \"text-muted-foreground\"}>\n {days}d\n </span>\n );\n }),\n};\n\nconst CUSTOM_RENDERER_SCHEMA: JsonSchema = {\n title: \"User (custom renderers)\",\n type: \"object\",\n properties: {\n name: {\n type: \"string\",\n title: \"Name\",\n \"x-ui-column\": { order: 0 },\n \"x-ui-cell\": \"x-play-initials\",\n },\n role: {\n type: \"string\",\n title: \"Role\",\n \"x-ui-column\": { order: 1 },\n \"x-ui-cell\": \"x-play-role-icon\",\n \"x-ui-cell-options\": { icons: ROLE_ICONS },\n },\n status: {\n type: \"string\",\n title: \"Status\",\n \"x-ui-column\": { order: 2 },\n \"x-ui-cell\": \"badge\",\n \"x-ui-cell-options\": { colors: STATUS_COLOR },\n },\n joined: {\n type: \"string\",\n title: \"Tenure\",\n \"x-ui-column\": { order: 3 },\n \"x-ui-cell\": \"x-play-tenure\",\n \"x-ui-cell-options\": { recentDays: 500 },\n },\n id: {\n type: \"string\",\n title: \"ID\",\n \"x-ui-column\": { order: 4 },\n \"x-ui-cell\": \"code\",\n },\n },\n};\n\n// Sentinel value meaning \"schema was reloaded, next submit resets the counter to 0\".\nconst SUBMIT_COUNT_RESET = -1;\n\n// Presets for the searchFields demo (Section 1b). Uses the same user domain\n// as the rest of the playground (name, role, status).\nconst SEARCH_FIELD_PRESETS: { label: string; fields: string[] }[] = [\n { label: \"name, role\", fields: [\"name\", \"role\"] },\n { label: \"name (single)\", fields: [\"name\"] },\n { label: \"name, role, status\", fields: [\"name\", \"role\", \"status\"] },\n];\n\n// Reusable toggle-button strip for playground controls.\n// Renders a label followed by a set of pill buttons. className applies to\n// the wrapping fragment's implicit container -- callers place it inside a\n// flex row, so use ml-* on the caller side via the containerClassName prop.\nfunction ToggleStrip<T extends string | number>({\n label,\n options,\n value,\n onChange,\n format,\n containerClassName,\n}: {\n label: string;\n options: readonly T[];\n value: T;\n onChange: (v: T) => void;\n format?: (v: T) => string;\n containerClassName?: string;\n}) {\n const fmt = format ?? String;\n return (\n <div className={`flex items-center gap-3 ${containerClassName ?? \"\"}`}>\n <span className=\"text-xs text-muted-foreground\">{label}:</span>\n {options.map((opt) => (\n <button\n key={String(opt)}\n type=\"button\"\n onClick={() => onChange(opt)}\n className={[\n \"px-3 py-1 rounded-full text-xs font-medium transition-colors\",\n value === opt\n ? \"bg-primary text-primary-foreground\"\n : \"bg-muted text-muted-foreground hover:text-foreground\",\n ].join(\" \")}\n >\n {fmt(opt)}\n </button>\n ))}\n </div>\n );\n}\n\nconst MODE_OPTIONS = [\"explicit\", \"debounce\"] as const;\nconst MODE_LABELS: Record<string, string> = {\n explicit: \"Explicit (Enter)\",\n debounce: \"Debounce (300 ms)\",\n};\nconst MIN_CHARS_OPTIONS = [0, 1, 2, 3] as const;\nconst FIELD_PRESET_INDICES = SEARCH_FIELD_PRESETS.map(\n (_, i) => i,\n) as readonly number[];\n\nfunction FilterExprInspector({ expr }: { expr: FilterExpr }) {\n return (\n <pre className=\"mt-3 rounded-md bg-muted px-4 py-3 text-xs overflow-auto max-h-40\">\n {JSON.stringify(expr, null, 2)}\n </pre>\n );\n}\n\nfunction FlatTermsInspector({ expr }: { expr: FilterExpr }) {\n const terms = flattenFilterExpr(expr);\n return (\n <pre className=\"mt-3 rounded-md bg-muted px-4 py-3 text-xs overflow-auto max-h-40\">\n {JSON.stringify(terms, null, 2)}\n </pre>\n );\n}\n\n/** Playground sandbox for SearchInput, EntitySelect, and EntityTable. */\nexport default function PlayDataComponents(): React.ReactElement {\n // Section 1: simple mode\n const [simpleExpr, setSimpleExpr] = useState<FilterExpr>(EMPTY_FILTER);\n const [simpleMode, setSimpleMode] = useState<SearchMode>(\"explicit\");\n const [simpleMinChars, setSimpleMinChars] = useState(0);\n\n // Section 1b: searchFields mode (multi-field OR)\n const [fieldsExpr, setFieldsExpr] = useState<FilterExpr>(EMPTY_FILTER);\n const [fieldsMode, setFieldsMode] = useState<SearchMode>(\"explicit\");\n const [fieldsMinChars, setFieldsMinChars] = useState(0);\n const [fieldsPresetIdx, setFieldsPresetIdx] = useState(0);\n const activeSearchFields = SEARCH_FIELD_PRESETS[fieldsPresetIdx].fields;\n\n // Section 2: faceted mode with live schema editor\n const [facetedExpr, setFacetedExpr] = useState<FilterExpr>(EMPTY_FILTER);\n const [facetedSubmitCount, setFacetedSubmitCount] = useState(0);\n const handleFacetedChange = useCallback((expr: FilterExpr) => {\n setFacetedExpr(expr);\n setFacetedSubmitCount((n) => n + 1);\n }, []);\n const [schemaText, setSchemaText] = useState(() =>\n JSON.stringify(toJsonSchema(PlaygroundFacets), null, 2),\n );\n const [schemaError, setSchemaError] = useState(\"\");\n const [activeSchema, setActiveSchema] =\n useState<JsonSchema>(SEARCH_FACET_SCHEMA);\n\n const handleSchemaTextChange = useCallback((value: string) => {\n setSchemaText(value);\n try {\n JSON.parse(value);\n setSchemaError(\"\");\n } catch {\n setSchemaError(\"Invalid JSON\");\n }\n }, []);\n\n const handleLoadSchema = useCallback(() => {\n try {\n const parsed = JSON.parse(schemaText) as JsonSchema;\n setActiveSchema(parsed);\n setFacetedExpr(EMPTY_FILTER);\n setFacetedSubmitCount(SUBMIT_COUNT_RESET);\n setSchemaError(\"\");\n } catch {\n setSchemaError(\"Invalid JSON -- cannot load\");\n }\n }, [schemaText]);\n\n // Section 3: schema + UI schema editors for the table.\n const [tableSchemaText, setTableSchemaText] = useState(() =>\n JSON.stringify(SAMPLE_SCHEMA, null, 2),\n );\n const [tableUiSchemaText, setTableUiSchemaText] = useState(() =>\n JSON.stringify(SAMPLE_UI_SCHEMA, null, 2),\n );\n const [tableSchemaError, setTableSchemaError] = useState(\"\");\n const [activeTableSchema, setActiveTableSchema] =\n useState<JsonSchema>(SAMPLE_SCHEMA);\n const [activeTableUiSchema, setActiveTableUiSchema] =\n useState<TableUiSchema>(SAMPLE_UI_SCHEMA);\n const [tableSchemaTab, setTableSchemaTab] = useState(\"schema\");\n\n const handleTableSchemaTextChange = useCallback((value: string) => {\n setTableSchemaText(value);\n try {\n JSON.parse(value);\n setTableSchemaError(\"\");\n } catch {\n setTableSchemaError(\"Invalid JSON\");\n }\n }, []);\n\n const handleTableUiSchemaTextChange = useCallback((value: string) => {\n setTableUiSchemaText(value);\n try {\n JSON.parse(value);\n setTableSchemaError(\"\");\n } catch {\n setTableSchemaError(\"Invalid JSON\");\n }\n }, []);\n\n const handleApplyTableSchema = useCallback(() => {\n try {\n const schema = JSON.parse(tableSchemaText) as JsonSchema;\n const uiSchema = JSON.parse(tableUiSchemaText) as TableUiSchema;\n setActiveTableSchema(schema);\n setActiveTableUiSchema(uiSchema);\n setTableSchemaError(\"\");\n } catch {\n setTableSchemaError(\"Invalid JSON -- cannot apply\");\n }\n }, [tableSchemaText, tableUiSchemaText]);\n\n // Section 3: faceted mode wired to EntityTable.\n // onChange fires only on submit -- filteredRows updates when the user presses Enter.\n const [tableExpr, setTableExpr] = useState<FilterExpr>(EMPTY_FILTER);\n\n const filteredRows = useMemo(() => {\n const terms = flattenFilterExpr(tableExpr);\n if (terms.length === 0) return ALL_ROWS;\n\n return ALL_ROWS.filter((row) =>\n terms.every(({ key, value }) => {\n const v = value.toLowerCase();\n if (key === \"status\") return row.status.toLowerCase().includes(v);\n if (key === \"role\") return row.role.toLowerCase().includes(v);\n // default: search by name\n return row.name.toLowerCase().includes(v);\n }),\n );\n }, [tableExpr]);\n\n const tableData = useMemo(\n () => ({\n data: filteredRows,\n meta: {\n total: filteredRows.length,\n limit: filteredRows.length,\n offset: 0,\n has_next: false,\n has_prev: false,\n },\n }),\n [filteredRows],\n );\n\n // Section 5: EntitySelect\n const [selectedPatient, setSelectedPatient] = useState<string | null>(null);\n\n return (\n <div className=\"w-full max-w-4xl space-y-6\">\n <div>\n <h1>Data Components</h1>\n <p className=\"text-sm text-muted-foreground mt-1\">\n Interactive sandbox for SearchInput, EntitySelect, and EntityTable.\n </p>\n </div>\n\n {/* Section 1: simple mode */}\n <PlaygroundSection\n title=\"SearchInput — simple mode\"\n description=\"No fields prop. Produces a single search term under the key 'search'.\"\n variant=\"card\"\n >\n <div className=\"flex flex-wrap gap-4 mb-3\">\n <ToggleStrip\n label=\"Mode\"\n options={MODE_OPTIONS}\n value={simpleMode}\n onChange={(m) => {\n setSimpleMode(m);\n setSimpleExpr(EMPTY_FILTER);\n }}\n format={(m) => MODE_LABELS[m]}\n />\n <ToggleStrip\n label=\"Min chars\"\n options={MIN_CHARS_OPTIONS}\n value={simpleMinChars}\n onChange={setSimpleMinChars}\n format={(n) => (n === 0 ? \"off\" : String(n))}\n />\n </div>\n <SearchInput\n value={simpleExpr}\n onChange={setSimpleExpr}\n mode={simpleMode}\n minChars={simpleMinChars}\n placeholder=\"Search...\"\n className=\"max-w-sm\"\n />\n <FlatTermsInspector expr={simpleExpr} />\n </PlaygroundSection>\n\n {/* Section 1b: searchFields mode */}\n <PlaygroundSection\n title=\"SearchInput — searchFields (multi-field OR)\"\n description=\"Produces a FilterOr with one term per field. Toggle field sets, mode, and minChars to explore different behaviours.\"\n variant=\"card\"\n >\n <div className=\"flex flex-wrap gap-4 mb-3\">\n <ToggleStrip\n label=\"Fields\"\n options={FIELD_PRESET_INDICES}\n value={fieldsPresetIdx}\n onChange={(idx) => {\n setFieldsPresetIdx(idx);\n setFieldsExpr(EMPTY_FILTER);\n }}\n format={(idx) => SEARCH_FIELD_PRESETS[idx].label}\n />\n <ToggleStrip\n label=\"Mode\"\n options={MODE_OPTIONS}\n value={fieldsMode}\n onChange={(m) => {\n setFieldsMode(m);\n setFieldsExpr(EMPTY_FILTER);\n }}\n format={(m) => MODE_LABELS[m]}\n />\n <ToggleStrip\n label=\"Min chars\"\n options={MIN_CHARS_OPTIONS}\n value={fieldsMinChars}\n onChange={setFieldsMinChars}\n format={(n) => (n === 0 ? \"off\" : String(n))}\n />\n </div>\n <SearchInput\n value={fieldsExpr}\n onChange={setFieldsExpr}\n searchFields={activeSearchFields}\n mode={fieldsMode}\n minChars={fieldsMinChars}\n placeholder={`Search by ${activeSearchFields.join(\" or \")}...`}\n className=\"max-w-sm\"\n />\n <div className=\"mt-3 space-y-2\">\n <p className=\"text-xs text-muted-foreground\">\n searchFields: [{activeSearchFields.map((f) => `\"${f}\"`).join(\", \")}]\n </p>\n <p className=\"text-xs text-muted-foreground\">FilterExpr AST:</p>\n <FilterExprInspector expr={fieldsExpr} />\n {!isEmptyFilterExpr(fieldsExpr) && (\n <>\n <p className=\"text-xs text-muted-foreground\">\n Serialized q= string:\n </p>\n <pre className=\"rounded-md bg-muted px-4 py-3 text-xs overflow-auto\">\n {serializeFilterExpr(fieldsExpr)}\n </pre>\n </>\n )}\n </div>\n </PlaygroundSection>\n\n {/* Section 2: faceted mode -- two-column schema editor */}\n <PlaygroundSection\n title=\"SearchInput — faceted mode\"\n description=\"Edit the JSON Schema on the left and load it into the search input. Add chips by picking a field and typing a value. Press Enter on empty input to fire onChange.\"\n variant=\"card\"\n >\n <div className=\"flex gap-4 items-start\">\n {/* Left: schema editor */}\n <Card className=\"flex-1 min-w-0 p-3 flex flex-col gap-2\">\n <p className=\"text-xs font-medium text-muted-foreground\">\n JSON Schema\n </p>\n {schemaError && (\n <Badge variant=\"destructive\" className=\"text-xs self-start\">\n {schemaError}\n </Badge>\n )}\n <FormTextarea\n value={schemaText}\n onChange={(e) => handleSchemaTextChange(e.target.value)}\n className=\"font-mono text-xs\"\n rows={18}\n />\n </Card>\n\n {/* Load button */}\n <div className=\"flex items-center self-center\">\n <SimpleTooltip label=\"Load schema into search\">\n <Button\n variant=\"default\"\n size=\"icon\"\n onClick={handleLoadSchema}\n disabled={!!schemaError}\n >\n <ArrowRight size={18} />\n </Button>\n </SimpleTooltip>\n </div>\n\n {/* Right: live search + output */}\n <Card className=\"flex-1 min-w-0 p-3 flex flex-col gap-3\">\n <p className=\"text-xs font-medium text-muted-foreground\">\n Live search\n </p>\n <SearchInput\n value={facetedExpr}\n onChange={handleFacetedChange}\n schema={activeSchema}\n mode=\"explicit\"\n placeholder=\"Add filter...\"\n />\n <div className=\"flex items-center gap-2 text-xs text-muted-foreground\">\n <span>onChange fired:</span>\n <span className=\"font-mono font-medium text-foreground\">\n {facetedSubmitCount}x\n </span>\n </div>\n <FilterExprInspector expr={facetedExpr} />\n </Card>\n </div>\n </PlaygroundSection>\n\n {/* Section 3: faceted mode + EntityTable wired together */}\n <PlaygroundSection\n title=\"EntityTable with SearchInput\"\n description=\"Faceted search wired to EntityTable. onChange fires only on submit (Enter on empty input) -- table filters when the user presses Enter. Edit the JSON Schema or UI Schema below and press Apply to see column changes live.\"\n variant=\"card\"\n >\n <SearchInput\n value={tableExpr}\n onChange={setTableExpr}\n schema={SEARCH_FACET_SCHEMA}\n mode=\"explicit\"\n placeholder=\"Filter users... (press Enter to apply)\"\n className=\"mb-4 max-w-sm\"\n />\n <EntityTable<SampleRow>\n schema={activeTableSchema}\n uiSchema={activeTableUiSchema}\n data={tableData}\n isLoading={false}\n isError={false}\n entityLabel=\"users\"\n isFiltered={!isEmptyFilterExpr(tableExpr)}\n />\n\n {/* Schema editor below the table */}\n <div className=\"mt-4\">\n <Card className=\"border shadow-sm p-4 flex flex-col\">\n <div className=\"flex items-center justify-between mb-2\">\n <Tabs\n value={tableSchemaTab}\n onValueChange={setTableSchemaTab}\n className=\"flex flex-col flex-1\"\n >\n <div className=\"flex items-center justify-between\">\n <TabsList>\n <TabsTrigger value=\"schema\">JSON Schema</TabsTrigger>\n <TabsTrigger value=\"uischema\">UI Schema</TabsTrigger>\n </TabsList>\n <div className=\"flex items-center gap-2\">\n {tableSchemaError && (\n <Badge variant=\"destructive\" className=\"text-xs\">\n {tableSchemaError}\n </Badge>\n )}\n <SimpleTooltip label=\"Apply schema to table above\">\n <Button\n variant=\"default\"\n size=\"icon\"\n onClick={handleApplyTableSchema}\n disabled={!!tableSchemaError}\n >\n <ArrowUp size={18} />\n </Button>\n </SimpleTooltip>\n </div>\n </div>\n <TabsContent value=\"schema\" className=\"mt-2\">\n <JsonEditor\n value={tableSchemaText}\n editablePaths={[\"/\"]}\n onChange={handleTableSchemaTextChange}\n height=\"280px\"\n className=\"rounded-md border overflow-hidden\"\n />\n </TabsContent>\n <TabsContent value=\"uischema\" className=\"mt-2\">\n <JsonEditor\n value={tableUiSchemaText}\n editablePaths={[\"/\"]}\n onChange={handleTableUiSchemaTextChange}\n height=\"280px\"\n className=\"rounded-md border overflow-hidden\"\n />\n </TabsContent>\n </Tabs>\n </div>\n </Card>\n </div>\n </PlaygroundSection>\n\n {/* Section 4: Local renderers demo */}\n <PlaygroundSection\n title=\"EntityTable with Local Renderers\"\n description=\"Same sample data rendered with x- prefixed local renderers passed via the renderers prop. The schema is pure data -- renderer functions live in code and are resolved by name. Three custom renderers: x-play-initials (avatar from name), x-play-role-icon (letter prefix from options), x-play-tenure (computed days with threshold).\"\n variant=\"card\"\n >\n <EntityTable<SampleRow>\n schema={CUSTOM_RENDERER_SCHEMA}\n renderers={CUSTOM_RENDERERS}\n data={{\n data: ALL_ROWS,\n meta: {\n total: ALL_ROWS.length,\n limit: ALL_ROWS.length,\n offset: 0,\n has_next: false,\n has_prev: false,\n },\n }}\n isLoading={false}\n isError={false}\n entityLabel=\"users\"\n />\n </PlaygroundSection>\n\n {/* Section 5: EntitySelect -- searchable select with mock fetcher */}\n <PlaygroundSection\n title=\"EntitySelect\"\n description=\"Searchable single-select backed by a static mock patient fetcher. Search text is filtered client-side. Available as a form widget via x-ui-widget: 'entity-select'.\"\n variant=\"card\"\n >\n <div className=\"flex gap-6 items-start\">\n <EntitySelect\n fetcher={patientFetcher}\n queryKey=\"playground-patients\"\n value={selectedPatient}\n onChange={setSelectedPatient}\n label=\"Patient\"\n placeholder=\"Select patient...\"\n searchPlaceholder=\"Search patients...\"\n className=\"max-w-xs\"\n />\n <Card className=\"flex-1 min-w-0 p-3\">\n <p className=\"text-xs font-medium text-muted-foreground mb-2\">\n Selected value\n </p>\n <pre className=\"rounded-md bg-muted px-4 py-3 text-xs overflow-auto\">\n {JSON.stringify(selectedPatient, null, 2)}\n </pre>\n </Card>\n </div>\n </PlaygroundSection>\n\n {/* Section 6: EntityTree -- schema-driven tree with static nested data */}\n <PlaygroundSection\n title=\"EntityTree\"\n description=\"Schema-driven tree component built on TreeView. Columns are resolved from a JSON Schema using the same resolveColumns pipeline as EntityTable. Supports expand/collapse, row selection, loading/error/empty states, and custom cell renderers.\"\n variant=\"card\"\n >\n <EntityTreeDemo />\n </PlaygroundSection>\n </div>\n );\n}\n\n// ---------------------------------------------------------------------------\n// EntityTree demo\n// ---------------------------------------------------------------------------\n\ninterface OrgRow extends Record<string, unknown> {\n name: string;\n type: string;\n headcount: number;\n}\n\nconst OrgSchema = z.object({\n name: z.string().meta({ title: \"Name\", \"x-ui-column\": { order: 0 } }),\n type: z.string().meta({ title: \"Type\", \"x-ui-column\": { order: 1 } }),\n headcount: z\n .number()\n .meta({ title: \"Headcount\", \"x-ui-column\": { order: 2 } }),\n});\n\nconst ORG_TREE_SCHEMA = toJsonSchema(OrgSchema);\n\nconst ORG_NODES: TreeNode<OrgRow>[] = [\n {\n id: \"eng\",\n data: { name: \"Engineering\", type: \"Division\", headcount: 120 },\n hasChildren: true,\n children: [\n {\n id: \"frontend\",\n data: { name: \"Frontend\", type: \"Team\", headcount: 18 },\n hasChildren: true,\n children: [\n {\n id: \"design-sys\",\n data: { name: \"Design System\", type: \"Squad\", headcount: 5 },\n hasChildren: false,\n },\n ],\n },\n {\n id: \"backend\",\n data: { name: \"Backend\", type: \"Team\", headcount: 32 },\n hasChildren: false,\n },\n {\n id: \"infra\",\n data: { name: \"Infrastructure\", type: \"Team\", headcount: 14 },\n hasChildren: false,\n },\n ],\n },\n {\n id: \"product\",\n data: { name: \"Product\", type: \"Division\", headcount: 45 },\n hasChildren: true,\n children: [\n {\n id: \"research\",\n data: { name: \"Research\", type: \"Team\", headcount: 8 },\n hasChildren: false,\n },\n {\n id: \"pm\",\n data: { name: \"Product Management\", type: \"Team\", headcount: 12 },\n hasChildren: false,\n },\n ],\n },\n {\n id: \"ops\",\n data: { name: \"Operations\", type: \"Division\", headcount: 30 },\n hasChildren: false,\n },\n];\n\nfunction EntityTreeDemo() {\n const {\n expandedIds: treeExpandedIds,\n onExpand: onTreeExpand,\n onCollapse: onTreeCollapse,\n } = useTreeExpansion();\n const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());\n const [activeId, setActiveId] = useState<string | null>(null);\n\n return (\n <div className=\"space-y-4\">\n <EntityTree<OrgRow>\n schema={ORG_TREE_SCHEMA}\n nodes={ORG_NODES}\n expandedIds={treeExpandedIds}\n onExpand={onTreeExpand}\n onCollapse={onTreeCollapse}\n onNodeSelect={(node) => setActiveId(node.id)}\n onNodeEdit={(node) => setActiveId(node.id)}\n activeNodeId={activeId ?? undefined}\n selectedIds={selectedIds}\n onSelectionChange={(id, selected) =>\n setSelectedIds((prev) => {\n const next = new Set(prev);\n if (selected) next.add(id);\n else next.delete(id);\n return next;\n })\n }\n entityLabel=\"departments\"\n />\n <div className=\"flex gap-6 text-xs text-muted-foreground\">\n {activeId && (\n <span>\n Active: <span className=\"font-mono\">{activeId}</span>\n </span>\n )}\n {selectedIds.size > 0 && (\n <span>\n Selected:{\" \"}\n <span className=\"font-mono\">{[...selectedIds].join(\", \")}</span>\n </span>\n )}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;AAaA,SAAgB,UAAU,SAAS,mBAAmB;AACtD,SAAS,YAAY,eAAe;AACpC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP,SAAS,oBAAoB;AAC7B,SAAS,kBAAkB;AAE3B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,oBAAqC;AAC9C,SAAS,wBAAwB;AAEjC,SAAS,SAAS;AA2KZ,SAkYM,UAjYJ,KADF;AAvKN,IAAM,gBAAgB;AAAA,EACpB,EAAE,OAAO,WAAW,OAAO,iBAAiB;AAAA,EAC5C,EAAE,OAAO,WAAW,OAAO,aAAa;AAAA,EACxC,EAAE,OAAO,WAAW,OAAO,cAAc;AAAA,EACzC,EAAE,OAAO,WAAW,OAAO,eAAe;AAAA,EAC1C,EAAE,OAAO,WAAW,OAAO,cAAc;AAAA,EACzC,EAAE,OAAO,WAAW,OAAO,eAAe;AAAA,EAC1C,EAAE,OAAO,WAAW,OAAO,YAAY;AAAA,EACvC,EAAE,OAAO,WAAW,OAAO,cAAc;AAC3C;AAEA,IAAM,iBAAsC,CAAC,EAAE,OAAO,IAAI,CAAC,MAAM;AAC/D,QAAM,IAAI,QAAQ,YAAY,KAAK;AACnC,QAAM,UAAU,IACZ,cAAc,OAAO,CAAC,MAAM,EAAE,MAAM,YAAY,EAAE,SAAS,CAAC,CAAC,IAC7D;AACJ,SAAO,QAAQ,QAAQ,OAAO;AAChC;AAUA,IAAM,WAAwB;AAAA,EAC5B;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AACF;AAEA,IAAM,eAAe;AAAA,EACnB,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AACX;AAEA,IAAM,mBAAmB,EAAE,OAAO;AAAA,EAChC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,OAAO,CAAC;AAAA,EAChD,QAAQ,EACL,KAAK,CAAC,UAAU,YAAY,SAAS,CAAC,EACtC,SAAS,EACT,KAAK;AAAA,IACJ,cAAc;AAAA,IACd,gBAAgB;AAAA,MACd,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,SAAS;AAAA,MACX;AAAA,IACF;AAAA,EACF,CAAC;AAAA,EACH,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,OAAO,CAAC;AAC3D,CAAC;AAED,IAAM,sBAAsB,aAAa,gBAAgB;AAEzD,IAAM,gBAA4B;AAAA,EAChC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,eAAe,EAAE,OAAO,EAAE;AAAA,MAC1B,aAAa;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,eAAe,EAAE,OAAO,EAAE;AAAA,MAC1B,aAAa;AAAA,MACb,qBAAqB,EAAE,QAAQ,aAAa;AAAA,IAC9C;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,eAAe,EAAE,OAAO,EAAE;AAAA,MAC1B,aAAa;AAAA,IACf;AAAA,IACA,IAAI;AAAA,MACF,MAAM;AAAA,MACN,OAAO;AAAA,MACP,eAAe,EAAE,OAAO,EAAE;AAAA,MAC1B,aAAa;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,eAAe,EAAE,OAAO,EAAE;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,IAAM,mBAAkC,CAAC;AAGzC,IAAM,aAAqC;AAAA,EACzC,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AACV;AAEA,IAAM,mBAAmB;AAAA;AAAA,EAEvB,mBAAmB,eAA0B,CAAC,QAAQ;AACpD,UAAM,WAAW,IAAI,KAClB,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,EACf,KAAK,EAAE;AACV,WACE,qBAAC,UAAK,WAAU,kCACd;AAAA,0BAAC,UAAK,WAAU,sGACb,oBACH;AAAA,MACA,oBAAC,UAAK,WAAU,eAAe,cAAI,MAAK;AAAA,OAC1C;AAAA,EAEJ,CAAC;AAAA;AAAA,EAGD,oBAAoB,eAA0B,CAAC,KAAK,YAAY;AAC9D,UAAM,QAAS,QAAQ,SAAoC,CAAC;AAC5D,UAAM,OAAO,MAAM,IAAI,IAAI,KAAK;AAChC,WACE,qBAAC,UACC;AAAA,0BAAC,UAAK,WAAU,6FACb,gBACH;AAAA,MACC,IAAI;AAAA,OACP;AAAA,EAEJ,CAAC;AAAA;AAAA,EAGD,iBAAiB,eAA0B,CAAC,KAAK,YAAY;AAC3D,UAAM,YAAa,QAAQ,cAAyB;AACpD,UAAM,OAAO,KAAK;AAAA,OACf,KAAK,IAAI,IAAI,IAAI,KAAK,IAAI,MAAM,EAAE,QAAQ,KAAK;AAAA,IAClD;AACA,UAAM,WAAW,OAAO;AACxB,WACE,qBAAC,UAAK,WAAW,WAAW,iBAAiB,yBAC1C;AAAA;AAAA,MAAK;AAAA,OACR;AAAA,EAEJ,CAAC;AACH;AAEA,IAAM,yBAAqC;AAAA,EACzC,OAAO;AAAA,EACP,MAAM;AAAA,EACN,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,eAAe,EAAE,OAAO,EAAE;AAAA,MAC1B,aAAa;AAAA,IACf;AAAA,IACA,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,OAAO;AAAA,MACP,eAAe,EAAE,OAAO,EAAE;AAAA,MAC1B,aAAa;AAAA,MACb,qBAAqB,EAAE,OAAO,WAAW;AAAA,IAC3C;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,eAAe,EAAE,OAAO,EAAE;AAAA,MAC1B,aAAa;AAAA,MACb,qBAAqB,EAAE,QAAQ,aAAa;AAAA,IAC9C;AAAA,IACA,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,eAAe,EAAE,OAAO,EAAE;AAAA,MAC1B,aAAa;AAAA,MACb,qBAAqB,EAAE,YAAY,IAAI;AAAA,IACzC;AAAA,IACA,IAAI;AAAA,MACF,MAAM;AAAA,MACN,OAAO;AAAA,MACP,eAAe,EAAE,OAAO,EAAE;AAAA,MAC1B,aAAa;AAAA,IACf;AAAA,EACF;AACF;AAGA,IAAM,qBAAqB;AAI3B,IAAM,uBAA8D;AAAA,EAClE,EAAE,OAAO,cAAc,QAAQ,CAAC,QAAQ,MAAM,EAAE;AAAA,EAChD,EAAE,OAAO,iBAAiB,QAAQ,CAAC,MAAM,EAAE;AAAA,EAC3C,EAAE,OAAO,sBAAsB,QAAQ,CAAC,QAAQ,QAAQ,QAAQ,EAAE;AACpE;AAMA,SAAS,YAAuC;AAAA,EAC9C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,MAAM,UAAU;AACtB,SACE,qBAAC,SAAI,WAAW,2BAA2B,sBAAsB,EAAE,IACjE;AAAA,yBAAC,UAAK,WAAU,iCAAiC;AAAA;AAAA,MAAM;AAAA,OAAC;AAAA,IACvD,QAAQ,IAAI,CAAC,QACZ;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,SAAS,MAAM,SAAS,GAAG;AAAA,QAC3B,WAAW;AAAA,UACT;AAAA,UACA,UAAU,MACN,uCACA;AAAA,QACN,EAAE,KAAK,GAAG;AAAA,QAET,cAAI,GAAG;AAAA;AAAA,MAVH,OAAO,GAAG;AAAA,IAWjB,CACD;AAAA,KACH;AAEJ;AAEA,IAAM,eAAe,CAAC,YAAY,UAAU;AAC5C,IAAM,cAAsC;AAAA,EAC1C,UAAU;AAAA,EACV,UAAU;AACZ;AACA,IAAM,oBAAoB,CAAC,GAAG,GAAG,GAAG,CAAC;AACrC,IAAM,uBAAuB,qBAAqB;AAAA,EAChD,CAAC,GAAG,MAAM;AACZ;AAEA,SAAS,oBAAoB,EAAE,KAAK,GAAyB;AAC3D,SACE,oBAAC,SAAI,WAAU,qEACZ,eAAK,UAAU,MAAM,MAAM,CAAC,GAC/B;AAEJ;AAEA,SAAS,mBAAmB,EAAE,KAAK,GAAyB;AAC1D,QAAM,QAAQ,kBAAkB,IAAI;AACpC,SACE,oBAAC,SAAI,WAAU,qEACZ,eAAK,UAAU,OAAO,MAAM,CAAC,GAChC;AAEJ;AAGe,SAAR,qBAA0D;AAE/D,QAAM,CAAC,YAAY,aAAa,IAAI,SAAqB,YAAY;AACrE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAqB,UAAU;AACnE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AAGtD,QAAM,CAAC,YAAY,aAAa,IAAI,SAAqB,YAAY;AACrE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAqB,UAAU;AACnE,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,CAAC;AACtD,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,CAAC;AACxD,QAAM,qBAAqB,qBAAqB,eAAe,EAAE;AAGjE,QAAM,CAAC,aAAa,cAAc,IAAI,SAAqB,YAAY;AACvE,QAAM,CAAC,oBAAoB,qBAAqB,IAAI,SAAS,CAAC;AAC9D,QAAM,sBAAsB,YAAY,CAAC,SAAqB;AAC5D,mBAAe,IAAI;AACnB,0BAAsB,CAAC,MAAM,IAAI,CAAC;AAAA,EACpC,GAAG,CAAC,CAAC;AACL,QAAM,CAAC,YAAY,aAAa,IAAI;AAAA,IAAS,MAC3C,KAAK,UAAU,aAAa,gBAAgB,GAAG,MAAM,CAAC;AAAA,EACxD;AACA,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AACjD,QAAM,CAAC,cAAc,eAAe,IAClC,SAAqB,mBAAmB;AAE1C,QAAM,yBAAyB,YAAY,CAAC,UAAkB;AAC5D,kBAAc,KAAK;AACnB,QAAI;AACF,WAAK,MAAM,KAAK;AAChB,qBAAe,EAAE;AAAA,IACnB,QAAQ;AACN,qBAAe,cAAc;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,mBAAmB,YAAY,MAAM;AACzC,QAAI;AACF,YAAM,SAAS,KAAK,MAAM,UAAU;AACpC,sBAAgB,MAAM;AACtB,qBAAe,YAAY;AAC3B,4BAAsB,kBAAkB;AACxC,qBAAe,EAAE;AAAA,IACnB,QAAQ;AACN,qBAAe,6BAA6B;AAAA,IAC9C;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAGf,QAAM,CAAC,iBAAiB,kBAAkB,IAAI;AAAA,IAAS,MACrD,KAAK,UAAU,eAAe,MAAM,CAAC;AAAA,EACvC;AACA,QAAM,CAAC,mBAAmB,oBAAoB,IAAI;AAAA,IAAS,MACzD,KAAK,UAAU,kBAAkB,MAAM,CAAC;AAAA,EAC1C;AACA,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAS,EAAE;AAC3D,QAAM,CAAC,mBAAmB,oBAAoB,IAC5C,SAAqB,aAAa;AACpC,QAAM,CAAC,qBAAqB,sBAAsB,IAChD,SAAwB,gBAAgB;AAC1C,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,QAAQ;AAE7D,QAAM,8BAA8B,YAAY,CAAC,UAAkB;AACjE,uBAAmB,KAAK;AACxB,QAAI;AACF,WAAK,MAAM,KAAK;AAChB,0BAAoB,EAAE;AAAA,IACxB,QAAQ;AACN,0BAAoB,cAAc;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,gCAAgC,YAAY,CAAC,UAAkB;AACnE,yBAAqB,KAAK;AAC1B,QAAI;AACF,WAAK,MAAM,KAAK;AAChB,0BAAoB,EAAE;AAAA,IACxB,QAAQ;AACN,0BAAoB,cAAc;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,yBAAyB,YAAY,MAAM;AAC/C,QAAI;AACF,YAAM,SAAS,KAAK,MAAM,eAAe;AACzC,YAAM,WAAW,KAAK,MAAM,iBAAiB;AAC7C,2BAAqB,MAAM;AAC3B,6BAAuB,QAAQ;AAC/B,0BAAoB,EAAE;AAAA,IACxB,QAAQ;AACN,0BAAoB,8BAA8B;AAAA,IACpD;AAAA,EACF,GAAG,CAAC,iBAAiB,iBAAiB,CAAC;AAIvC,QAAM,CAAC,WAAW,YAAY,IAAI,SAAqB,YAAY;AAEnE,QAAM,eAAe,QAAQ,MAAM;AACjC,UAAM,QAAQ,kBAAkB,SAAS;AACzC,QAAI,MAAM,WAAW,EAAG,QAAO;AAE/B,WAAO,SAAS;AAAA,MAAO,CAAC,QACtB,MAAM,MAAM,CAAC,EAAE,KAAK,MAAM,MAAM;AAC9B,cAAM,IAAI,MAAM,YAAY;AAC5B,YAAI,QAAQ,SAAU,QAAO,IAAI,OAAO,YAAY,EAAE,SAAS,CAAC;AAChE,YAAI,QAAQ,OAAQ,QAAO,IAAI,KAAK,YAAY,EAAE,SAAS,CAAC;AAE5D,eAAO,IAAI,KAAK,YAAY,EAAE,SAAS,CAAC;AAAA,MAC1C,CAAC;AAAA,IACH;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,MACL,MAAM;AAAA,MACN,MAAM;AAAA,QACJ,OAAO,aAAa;AAAA,QACpB,OAAO,aAAa;AAAA,QACpB,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EACf;AAGA,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAwB,IAAI;AAE1E,SACE,qBAAC,SAAI,WAAU,8BACb;AAAA,yBAAC,SACC;AAAA,0BAAC,QAAG,6BAAe;AAAA,MACnB,oBAAC,OAAE,WAAU,sCAAqC,iFAElD;AAAA,OACF;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,SAAQ;AAAA,QAER;AAAA,+BAAC,SAAI,WAAU,6BACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,SAAS;AAAA,gBACT,OAAO;AAAA,gBACP,UAAU,CAAC,MAAM;AACf,gCAAc,CAAC;AACf,gCAAc,YAAY;AAAA,gBAC5B;AAAA,gBACA,QAAQ,CAAC,MAAM,YAAY,CAAC;AAAA;AAAA,YAC9B;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,SAAS;AAAA,gBACT,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,QAAQ,CAAC,MAAO,MAAM,IAAI,QAAQ,OAAO,CAAC;AAAA;AAAA,YAC5C;AAAA,aACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,UAAU;AAAA,cACV,MAAM;AAAA,cACN,UAAU;AAAA,cACV,aAAY;AAAA,cACZ,WAAU;AAAA;AAAA,UACZ;AAAA,UACA,oBAAC,sBAAmB,MAAM,YAAY;AAAA;AAAA;AAAA,IACxC;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,SAAQ;AAAA,QAER;AAAA,+BAAC,SAAI,WAAU,6BACb;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,SAAS;AAAA,gBACT,OAAO;AAAA,gBACP,UAAU,CAAC,QAAQ;AACjB,qCAAmB,GAAG;AACtB,gCAAc,YAAY;AAAA,gBAC5B;AAAA,gBACA,QAAQ,CAAC,QAAQ,qBAAqB,GAAG,EAAE;AAAA;AAAA,YAC7C;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,SAAS;AAAA,gBACT,OAAO;AAAA,gBACP,UAAU,CAAC,MAAM;AACf,gCAAc,CAAC;AACf,gCAAc,YAAY;AAAA,gBAC5B;AAAA,gBACA,QAAQ,CAAC,MAAM,YAAY,CAAC;AAAA;AAAA,YAC9B;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAM;AAAA,gBACN,SAAS;AAAA,gBACT,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,QAAQ,CAAC,MAAO,MAAM,IAAI,QAAQ,OAAO,CAAC;AAAA;AAAA,YAC5C;AAAA,aACF;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,UAAU;AAAA,cACV,cAAc;AAAA,cACd,MAAM;AAAA,cACN,UAAU;AAAA,cACV,aAAa,aAAa,mBAAmB,KAAK,MAAM,CAAC;AAAA,cACzD,WAAU;AAAA;AAAA,UACZ;AAAA,UACA,qBAAC,SAAI,WAAU,kBACb;AAAA,iCAAC,OAAE,WAAU,iCAAgC;AAAA;AAAA,cAC3B,mBAAmB,IAAI,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,KAAK,IAAI;AAAA,cAAE;AAAA,eACrE;AAAA,YACA,oBAAC,OAAE,WAAU,iCAAgC,6BAAe;AAAA,YAC5D,oBAAC,uBAAoB,MAAM,YAAY;AAAA,YACtC,CAAC,kBAAkB,UAAU,KAC5B,iCACE;AAAA,kCAAC,OAAE,WAAU,iCAAgC,mCAE7C;AAAA,cACA,oBAAC,SAAI,WAAU,uDACZ,8BAAoB,UAAU,GACjC;AAAA,eACF;AAAA,aAEJ;AAAA;AAAA;AAAA,IACF;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,SAAQ;AAAA,QAER,+BAAC,SAAI,WAAU,0BAEb;AAAA,+BAAC,QAAK,WAAU,0CACd;AAAA,gCAAC,OAAE,WAAU,6CAA4C,yBAEzD;AAAA,YACC,eACC,oBAAC,SAAM,SAAQ,eAAc,WAAU,sBACpC,uBACH;AAAA,YAEF;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP,UAAU,CAAC,MAAM,uBAAuB,EAAE,OAAO,KAAK;AAAA,gBACtD,WAAU;AAAA,gBACV,MAAM;AAAA;AAAA,YACR;AAAA,aACF;AAAA,UAGA,oBAAC,SAAI,WAAU,iCACb,8BAAC,iBAAc,OAAM,2BACnB;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS;AAAA,cACT,UAAU,CAAC,CAAC;AAAA,cAEZ,8BAAC,cAAW,MAAM,IAAI;AAAA;AAAA,UACxB,GACF,GACF;AAAA,UAGA,qBAAC,QAAK,WAAU,0CACd;AAAA,gCAAC,OAAE,WAAU,6CAA4C,yBAEzD;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,QAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,aAAY;AAAA;AAAA,YACd;AAAA,YACA,qBAAC,SAAI,WAAU,yDACb;AAAA,kCAAC,UAAK,6BAAe;AAAA,cACrB,qBAAC,UAAK,WAAU,yCACb;AAAA;AAAA,gBAAmB;AAAA,iBACtB;AAAA,eACF;AAAA,YACA,oBAAC,uBAAoB,MAAM,aAAa;AAAA,aAC1C;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,SAAQ;AAAA,QAER;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,UAAU;AAAA,cACV,QAAQ;AAAA,cACR,MAAK;AAAA,cACL,aAAY;AAAA,cACZ,WAAU;AAAA;AAAA,UACZ;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,QAAQ;AAAA,cACR,UAAU;AAAA,cACV,MAAM;AAAA,cACN,WAAW;AAAA,cACX,SAAS;AAAA,cACT,aAAY;AAAA,cACZ,YAAY,CAAC,kBAAkB,SAAS;AAAA;AAAA,UAC1C;AAAA,UAGA,oBAAC,SAAI,WAAU,QACb,8BAAC,QAAK,WAAU,sCACd,8BAAC,SAAI,WAAU,0CACb;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,eAAe;AAAA,cACf,WAAU;AAAA,cAEV;AAAA,qCAAC,SAAI,WAAU,qCACb;AAAA,uCAAC,YACC;AAAA,wCAAC,eAAY,OAAM,UAAS,yBAAW;AAAA,oBACvC,oBAAC,eAAY,OAAM,YAAW,uBAAS;AAAA,qBACzC;AAAA,kBACA,qBAAC,SAAI,WAAU,2BACZ;AAAA,wCACC,oBAAC,SAAM,SAAQ,eAAc,WAAU,WACpC,4BACH;AAAA,oBAEF,oBAAC,iBAAc,OAAM,+BACnB;AAAA,sBAAC;AAAA;AAAA,wBACC,SAAQ;AAAA,wBACR,MAAK;AAAA,wBACL,SAAS;AAAA,wBACT,UAAU,CAAC,CAAC;AAAA,wBAEZ,8BAAC,WAAQ,MAAM,IAAI;AAAA;AAAA,oBACrB,GACF;AAAA,qBACF;AAAA,mBACF;AAAA,gBACA,oBAAC,eAAY,OAAM,UAAS,WAAU,QACpC;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO;AAAA,oBACP,eAAe,CAAC,GAAG;AAAA,oBACnB,UAAU;AAAA,oBACV,QAAO;AAAA,oBACP,WAAU;AAAA;AAAA,gBACZ,GACF;AAAA,gBACA,oBAAC,eAAY,OAAM,YAAW,WAAU,QACtC;AAAA,kBAAC;AAAA;AAAA,oBACC,OAAO;AAAA,oBACP,eAAe,CAAC,GAAG;AAAA,oBACnB,UAAU;AAAA,oBACV,QAAO;AAAA,oBACP,WAAU;AAAA;AAAA,gBACZ,GACF;AAAA;AAAA;AAAA,UACF,GACF,GACF,GACF;AAAA;AAAA;AAAA,IACF;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,SAAQ;AAAA,QAER;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ;AAAA,YACR,WAAW;AAAA,YACX,MAAM;AAAA,cACJ,MAAM;AAAA,cACN,MAAM;AAAA,gBACJ,OAAO,SAAS;AAAA,gBAChB,OAAO,SAAS;AAAA,gBAChB,QAAQ;AAAA,gBACR,UAAU;AAAA,gBACV,UAAU;AAAA,cACZ;AAAA,YACF;AAAA,YACA,WAAW;AAAA,YACX,SAAS;AAAA,YACT,aAAY;AAAA;AAAA,QACd;AAAA;AAAA,IACF;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,SAAQ;AAAA,QAER,+BAAC,SAAI,WAAU,0BACb;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,SAAS;AAAA,cACT,UAAS;AAAA,cACT,OAAO;AAAA,cACP,UAAU;AAAA,cACV,OAAM;AAAA,cACN,aAAY;AAAA,cACZ,mBAAkB;AAAA,cAClB,WAAU;AAAA;AAAA,UACZ;AAAA,UACA,qBAAC,QAAK,WAAU,sBACd;AAAA,gCAAC,OAAE,WAAU,kDAAiD,4BAE9D;AAAA,YACA,oBAAC,SAAI,WAAU,uDACZ,eAAK,UAAU,iBAAiB,MAAM,CAAC,GAC1C;AAAA,aACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IAGA;AAAA,MAAC;AAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,SAAQ;AAAA,QAER,8BAAC,kBAAe;AAAA;AAAA,IAClB;AAAA,KACF;AAEJ;AAYA,IAAM,YAAY,EAAE,OAAO;AAAA,EACzB,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,QAAQ,eAAe,EAAE,OAAO,EAAE,EAAE,CAAC;AAAA,EACpE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,QAAQ,eAAe,EAAE,OAAO,EAAE,EAAE,CAAC;AAAA,EACpE,WAAW,EACR,OAAO,EACP,KAAK,EAAE,OAAO,aAAa,eAAe,EAAE,OAAO,EAAE,EAAE,CAAC;AAC7D,CAAC;AAED,IAAM,kBAAkB,aAAa,SAAS;AAE9C,IAAM,YAAgC;AAAA,EACpC;AAAA,IACE,IAAI;AAAA,IACJ,MAAM,EAAE,MAAM,eAAe,MAAM,YAAY,WAAW,IAAI;AAAA,IAC9D,aAAa;AAAA,IACb,UAAU;AAAA,MACR;AAAA,QACE,IAAI;AAAA,QACJ,MAAM,EAAE,MAAM,YAAY,MAAM,QAAQ,WAAW,GAAG;AAAA,QACtD,aAAa;AAAA,QACb,UAAU;AAAA,UACR;AAAA,YACE,IAAI;AAAA,YACJ,MAAM,EAAE,MAAM,iBAAiB,MAAM,SAAS,WAAW,EAAE;AAAA,YAC3D,aAAa;AAAA,UACf;AAAA,QACF;AAAA,MACF;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,MAAM,EAAE,MAAM,WAAW,MAAM,QAAQ,WAAW,GAAG;AAAA,QACrD,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,MAAM,EAAE,MAAM,kBAAkB,MAAM,QAAQ,WAAW,GAAG;AAAA,QAC5D,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM,EAAE,MAAM,WAAW,MAAM,YAAY,WAAW,GAAG;AAAA,IACzD,aAAa;AAAA,IACb,UAAU;AAAA,MACR;AAAA,QACE,IAAI;AAAA,QACJ,MAAM,EAAE,MAAM,YAAY,MAAM,QAAQ,WAAW,EAAE;AAAA,QACrD,aAAa;AAAA,MACf;AAAA,MACA;AAAA,QACE,IAAI;AAAA,QACJ,MAAM,EAAE,MAAM,sBAAsB,MAAM,QAAQ,WAAW,GAAG;AAAA,QAChE,aAAa;AAAA,MACf;AAAA,IACF;AAAA,EACF;AAAA,EACA;AAAA,IACE,IAAI;AAAA,IACJ,MAAM,EAAE,MAAM,cAAc,MAAM,YAAY,WAAW,GAAG;AAAA,IAC5D,aAAa;AAAA,EACf;AACF;AAEA,SAAS,iBAAiB;AACxB,QAAM;AAAA,IACJ,aAAa;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,EACd,IAAI,iBAAiB;AACrB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAsB,oBAAI,IAAI,CAAC;AACrE,QAAM,CAAC,UAAU,WAAW,IAAI,SAAwB,IAAI;AAE5D,SACE,qBAAC,SAAI,WAAU,aACb;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,aAAa;AAAA,QACb,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,cAAc,CAAC,SAAS,YAAY,KAAK,EAAE;AAAA,QAC3C,YAAY,CAAC,SAAS,YAAY,KAAK,EAAE;AAAA,QACzC,cAAc,YAAY;AAAA,QAC1B;AAAA,QACA,mBAAmB,CAAC,IAAI,aACtB,eAAe,CAAC,SAAS;AACvB,gBAAM,OAAO,IAAI,IAAI,IAAI;AACzB,cAAI,SAAU,MAAK,IAAI,EAAE;AAAA,cACpB,MAAK,OAAO,EAAE;AACnB,iBAAO;AAAA,QACT,CAAC;AAAA,QAEH,aAAY;AAAA;AAAA,IACd;AAAA,IACA,qBAAC,SAAI,WAAU,4CACZ;AAAA,kBACC,qBAAC,UAAK;AAAA;AAAA,QACI,oBAAC,UAAK,WAAU,aAAa,oBAAS;AAAA,SAChD;AAAA,MAED,YAAY,OAAO,KAClB,qBAAC,UAAK;AAAA;AAAA,QACM;AAAA,QACV,oBAAC,UAAK,WAAU,aAAa,WAAC,GAAG,WAAW,EAAE,KAAK,IAAI,GAAE;AAAA,SAC3D;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/pages/PlayFormComponents.tsx"],"sourcesContent":["/**\n * Playground page for testing Form components\n * Accessible at /playground/form-components\n *\n * Tests all custom Form wrapper components that provide consistent\n * label, description, and error handling around base UI components.\n */\n\nimport { useState } from \"react\";\nimport { SimpleStack, Card } from \"@petrarca/sonnet-ui\";\nimport { ExampleBlock } from \"../PlaygroundSection\";\nimport {\n FormInput,\n FormTextarea,\n FormNumberInput,\n FormCheckbox,\n FormSelect,\n FormMultiSelect,\n FormTagsInput,\n} from \"@petrarca/sonnet-forms\";\n\nexport default function PlayFormComponents() {\n // FormInput states\n const [textValue, setTextValue] = useState(\"\");\n const [emailValue, setEmailValue] = useState(\"\");\n const [passwordValue, setPasswordValue] = useState(\"\");\n const [urlValue, setUrlValue] = useState(\"\");\n\n // FormTextarea states\n const [textareaValue, setTextareaValue] = useState(\"\");\n const [textareaError, setTextareaError] = useState(\"\");\n\n // FormNumberInput states\n const [numberValue, setNumberValue] = useState<number | undefined>(undefined);\n const [rangeValue, setRangeValue] = useState<number | undefined>(5);\n const [decimalValue, setDecimalValue] = useState<number | undefined>(\n undefined,\n );\n\n // FormCheckbox states\n const [checkboxValue, setCheckboxValue] = useState(false);\n const [checkboxIndeterminate, setCheckboxIndeterminate] = useState<\n boolean | \"indeterminate\"\n >(\"indeterminate\");\n\n // FormSelect states\n const [selectValue, setSelectValue] = useState(\"\");\n const [selectRequired, setSelectRequired] = useState(\"\");\n\n // FormMultiSelect states\n const [multiSelectValue, setMultiSelectValue] = useState<string[]>([]);\n\n // FormTagsInput states\n const [tagsValue, setTagsValue] = useState<string[]>([\"react\", \"typescript\"]);\n\n // Options for selects\n const colorOptions = [\n { label: \"Red\", value: \"red\" },\n { label: \"Green\", value: \"green\" },\n { label: \"Blue\", value: \"blue\" },\n { label: \"Yellow\", value: \"yellow\" },\n { label: \"Purple\", value: \"purple\" },\n ];\n\n const countryOptions = [\n { label: \"United States\", value: \"us\" },\n { label: \"Canada\", value: \"ca\" },\n { label: \"United Kingdom\", value: \"uk\" },\n { label: \"Germany\", value: \"de\" },\n { label: \"France\", value: \"fr\" },\n { label: \"Japan\", value: \"jp\" },\n { label: \"Australia\", value: \"au\" },\n ];\n\n return (\n <div className=\"w-full max-w-4xl space-y-6\">\n <div>\n <h1>Form Components Playground</h1>\n <p className=\"text-sm text-muted-foreground mb-3\">\n Test all custom Form wrapper components with labels, descriptions, and\n error states\n </p>\n </div>\n\n <div>\n <SimpleStack gap=\"md\" style={{ maxWidth: \"900px\" }}>\n {/* FormInput */}\n <Card className=\"border shadow-sm p-4\">\n <SimpleStack gap=\"sm\">\n <h2>FormInput</h2>\n <p className=\"text-sm text-muted-foreground\">\n Text input wrapper with label, description, and error support.\n Supports all HTML input types.\n </p>\n\n <div className=\"grid grid-cols-2 gap-3 pt-2\">\n <ExampleBlock label=\"Basic\">\n <FormInput\n label=\"Username\"\n value={textValue}\n onChange={(e) => setTextValue(e.target.value)}\n placeholder=\"Enter username\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"With description\">\n <FormInput\n label=\"Full Name\"\n description=\"Your first and last name\"\n value={textValue}\n onChange={(e) => setTextValue(e.target.value)}\n placeholder=\"John Doe\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"Required\">\n <FormInput\n label=\"Email\"\n required\n value={emailValue}\n onChange={(e) => setEmailValue(e.target.value)}\n placeholder=\"john@example.com\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"With error\">\n <FormInput\n label=\"Email\"\n value={emailValue}\n onChange={(e) => setEmailValue(e.target.value)}\n error=\"Invalid email format\"\n placeholder=\"john@example.com\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"Password\">\n <FormInput\n label=\"Password\"\n type=\"password\"\n value={passwordValue}\n onChange={(e) => setPasswordValue(e.target.value)}\n placeholder=\"••••••••\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"Disabled\">\n <FormInput\n label=\"Readonly Field\"\n value=\"Cannot edit this\"\n onChange={() => {}}\n disabled\n />\n </ExampleBlock>\n </div>\n\n <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n <code>{`<FormInput\n label=\"Username\"\n value={textValue}\n onChange={(e) => setTextValue(e.target.value)}\n placeholder=\"Enter username\"\n description=\"Optional description\"\n error=\"Optional error message\"\n required={false}\n disabled={false}\n/>`}</code>\n </pre>\n\n <p className=\"text-xs text-muted-foreground\">\n Current value: {textValue || \"(empty)\"}\n </p>\n </SimpleStack>\n </Card>\n\n {/* FormTextarea */}\n <Card className=\"border shadow-sm p-4\">\n <SimpleStack gap=\"sm\">\n <h2>FormTextarea</h2>\n <p className=\"text-sm text-muted-foreground\">\n Multi-line text input with label, description, and error\n support.\n </p>\n\n <div className=\"grid grid-cols-2 gap-3 pt-2\">\n <ExampleBlock label=\"Basic\">\n <FormTextarea\n label=\"Description\"\n value={textareaValue}\n onChange={(e) => setTextareaValue(e.target.value)}\n placeholder=\"Enter a detailed description...\"\n rows={4}\n />\n </ExampleBlock>\n <ExampleBlock label=\"With description\">\n <FormTextarea\n label=\"Bio\"\n description=\"Tell us about yourself (max 500 characters)\"\n value={textareaValue}\n onChange={(e) => setTextareaValue(e.target.value)}\n placeholder=\"I am a...\"\n rows={3}\n />\n </ExampleBlock>\n <ExampleBlock label=\"With error validation\">\n <FormTextarea\n label=\"Comments\"\n value={textareaValue}\n onChange={(e) => {\n setTextareaValue(e.target.value);\n setTextareaError(\n e.target.value.length > 100\n ? \"Maximum 100 characters allowed\"\n : \"\",\n );\n }}\n error={textareaError}\n placeholder=\"Enter your comments...\"\n rows={3}\n />\n </ExampleBlock>\n <ExampleBlock label=\"Disabled\">\n <FormTextarea\n label=\"Readonly Text\"\n value=\"This cannot be edited\"\n onChange={() => {}}\n disabled\n rows={2}\n />\n </ExampleBlock>\n </div>\n\n <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n <code>{`<FormTextarea\n label=\"Description\"\n value={textareaValue}\n onChange={(e) => setTextareaValue(e.target.value)}\n placeholder=\"Enter text...\"\n rows={4}\n description=\"Optional description\"\n error=\"Optional error message\"\n/>`}</code>\n </pre>\n\n <p className=\"text-xs text-muted-foreground\">\n Current value: {textareaValue || \"(empty)\"}\n </p>\n </SimpleStack>\n </Card>\n\n {/* FormNumberInput */}\n <Card className=\"border shadow-sm p-4\">\n <SimpleStack gap=\"sm\">\n <h2>FormNumberInput</h2>\n <p className=\"text-sm text-muted-foreground\">\n Number input with min/max validation and step control.\n </p>\n\n <div className=\"grid grid-cols-2 gap-3 pt-2\">\n <ExampleBlock label=\"Basic\">\n <FormNumberInput\n label=\"Age\"\n value={numberValue}\n onChange={setNumberValue}\n placeholder=\"Enter age\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"With min/max/step\">\n <FormNumberInput\n label=\"Rating (1-10)\"\n value={rangeValue}\n onChange={setRangeValue}\n min={1}\n max={10}\n step={1}\n description=\"Rate from 1 to 10\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"Decimal\">\n <FormNumberInput\n label=\"Price\"\n value={decimalValue}\n onChange={setDecimalValue}\n allowDecimal={true}\n step={0.01}\n placeholder=\"0.00\"\n description=\"Enter price with cents\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"Required\">\n <FormNumberInput\n label=\"Quantity\"\n required\n value={numberValue}\n onChange={setNumberValue}\n min={0}\n placeholder=\"0\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"With error\">\n <FormNumberInput\n label=\"Invalid Input\"\n value={numberValue}\n onChange={setNumberValue}\n error=\"Value must be greater than 0\"\n />\n </ExampleBlock>\n </div>\n\n <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n <code>{`<FormNumberInput\n label=\"Age\"\n value={numberValue}\n onChange={setNumberValue}\n min={0}\n max={120}\n step={1}\n allowDecimal={false}\n/>`}</code>\n </pre>\n\n <p className=\"text-xs text-muted-foreground\">\n Current value: {numberValue ?? \"(empty)\"}\n </p>\n </SimpleStack>\n </Card>\n\n {/* FormCheckbox */}\n <Card className=\"border shadow-sm p-4\">\n <SimpleStack gap=\"sm\">\n <h2>FormCheckbox</h2>\n <p className=\"text-sm text-muted-foreground\">\n Checkbox with label, description, and indeterminate state\n support.\n </p>\n\n <div className=\"grid grid-cols-2 gap-3 pt-2\">\n <ExampleBlock label=\"Basic\">\n <FormCheckbox\n label=\"Accept terms and conditions\"\n checked={checkboxValue}\n onChange={(checked) => setCheckboxValue(checked === true)}\n />\n </ExampleBlock>\n <ExampleBlock label=\"With description\">\n <FormCheckbox\n label=\"Subscribe to newsletter\"\n description=\"Receive weekly updates about new features\"\n checked={checkboxValue}\n onChange={(checked) => setCheckboxValue(checked === true)}\n />\n </ExampleBlock>\n <ExampleBlock label=\"Required\">\n <FormCheckbox\n label=\"I agree to the privacy policy\"\n required\n checked={checkboxValue}\n onChange={(checked) => setCheckboxValue(checked === true)}\n />\n </ExampleBlock>\n <ExampleBlock label=\"Indeterminate\">\n <FormCheckbox\n label=\"Select all items\"\n description=\"Some items are selected\"\n checked={checkboxIndeterminate}\n onChange={setCheckboxIndeterminate}\n />\n </ExampleBlock>\n <ExampleBlock label=\"Disabled\">\n <FormCheckbox\n label=\"Cannot change this\"\n checked={true}\n onChange={() => {}}\n disabled\n />\n </ExampleBlock>\n <ExampleBlock label=\"With error\">\n <FormCheckbox\n label=\"Required checkbox\"\n checked={checkboxValue}\n onChange={(checked) => setCheckboxValue(checked === true)}\n error=\"You must accept to continue\"\n />\n </ExampleBlock>\n </div>\n\n <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n <code>{`<FormCheckbox\n label=\"Accept terms\"\n checked={checkboxValue}\n onChange={(checked) => setCheckboxValue(checked === true)}\n description=\"Optional description\"\n required={false}\n/>`}</code>\n </pre>\n\n <p className=\"text-xs text-muted-foreground\">\n Current value: {String(checkboxValue)}\n </p>\n </SimpleStack>\n </Card>\n\n {/* FormSelect */}\n <Card className=\"border shadow-sm p-4\">\n <SimpleStack gap=\"sm\">\n <h2>FormSelect</h2>\n <p className=\"text-sm text-muted-foreground\">\n Searchable single-select dropdown with label and error support.\n </p>\n\n <div className=\"grid grid-cols-2 gap-3 pt-2\">\n <ExampleBlock label=\"Basic\">\n <FormSelect\n label=\"Favorite Color\"\n value={selectValue}\n onChange={(value) => setSelectValue(value || \"\")}\n options={colorOptions}\n placeholder=\"Choose a color\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"With description\">\n <FormSelect\n label=\"Country\"\n description=\"Select your country of residence\"\n value={selectValue}\n onChange={(value) => setSelectValue(value || \"\")}\n options={countryOptions}\n placeholder=\"Select country\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"Required\">\n <FormSelect\n label=\"Required Selection\"\n required\n value={selectRequired}\n onChange={(value) => setSelectRequired(value || \"\")}\n options={colorOptions}\n placeholder=\"Must select one\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"Disabled\">\n <FormSelect\n label=\"Disabled Select\"\n value=\"blue\"\n onChange={() => {}}\n options={colorOptions}\n disabled\n placeholder=\"Cannot change\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"With error\">\n <FormSelect\n label=\"Invalid Selection\"\n value={selectValue}\n onChange={(value) => setSelectValue(value || \"\")}\n options={colorOptions}\n error=\"This field is required\"\n placeholder=\"Select option\"\n />\n </ExampleBlock>\n </div>\n\n <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n <code>{`<FormSelect\n label=\"Country\"\n value={selectValue}\n onChange={(value) => setSelectValue(value || '')}\n options={[\n { label: 'USA', value: 'us' },\n { label: 'UK', value: 'uk' }\n ]}\n placeholder=\"Select...\"\n/>`}</code>\n </pre>\n\n <p className=\"text-xs text-muted-foreground\">\n Current value: {selectValue || \"(none selected)\"}\n </p>\n </SimpleStack>\n </Card>\n\n {/* FormMultiSelect */}\n <Card className=\"border shadow-sm p-4\">\n <SimpleStack gap=\"sm\">\n <h2>FormMultiSelect</h2>\n <p className=\"text-sm text-muted-foreground\">\n Searchable multi-select dropdown with badges.\n </p>\n\n <div className=\"grid grid-cols-2 gap-3 pt-2\">\n <ExampleBlock label=\"Basic\">\n <FormMultiSelect\n label=\"Favorite Colors\"\n value={multiSelectValue}\n onChange={setMultiSelectValue}\n options={colorOptions}\n placeholder=\"Select multiple colors\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"With description\">\n <FormMultiSelect\n label=\"Visited Countries\"\n description=\"Select all countries you've visited\"\n value={multiSelectValue}\n onChange={setMultiSelectValue}\n options={countryOptions}\n placeholder=\"Select countries\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"Required\">\n <FormMultiSelect\n label=\"Skills\"\n required\n value={multiSelectValue}\n onChange={setMultiSelectValue}\n options={[\n { label: \"JavaScript\", value: \"js\" },\n { label: \"TypeScript\", value: \"ts\" },\n { label: \"Python\", value: \"py\" },\n { label: \"Java\", value: \"java\" },\n ]}\n placeholder=\"Select at least one skill\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"With error\">\n <FormMultiSelect\n label=\"Categories\"\n value={multiSelectValue}\n onChange={setMultiSelectValue}\n options={colorOptions}\n error=\"Please select at least 2 categories\"\n placeholder=\"Select categories\"\n />\n </ExampleBlock>\n </div>\n\n <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n <code>{`<FormMultiSelect\n label=\"Skills\"\n value={multiSelectValue}\n onChange={setMultiSelectValue}\n options={skillOptions}\n placeholder=\"Select skills\"\n/>`}</code>\n </pre>\n\n <p className=\"text-xs text-muted-foreground\">\n Current value:{\" \"}\n {multiSelectValue.length > 0\n ? multiSelectValue.join(\", \")\n : \"(none selected)\"}\n </p>\n </SimpleStack>\n </Card>\n\n {/* FormTagsInput */}\n <Card className=\"border shadow-sm p-4\">\n <SimpleStack gap=\"sm\">\n <h2>FormTagsInput</h2>\n <p className=\"text-sm text-muted-foreground\">\n Free-text tag input with creation and deletion.\n </p>\n\n <div className=\"grid grid-cols-2 gap-3 pt-2\">\n <ExampleBlock label=\"Basic\">\n <FormTagsInput\n label=\"Technologies\"\n value={tagsValue}\n onChange={setTagsValue}\n placeholder=\"Type and press Enter to add tags\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"With description\">\n <FormTagsInput\n label=\"Skills\"\n description=\"Add your programming skills (press Enter after each)\"\n value={tagsValue}\n onChange={setTagsValue}\n placeholder=\"e.g., React, Node.js\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"Required\">\n <FormTagsInput\n label=\"Keywords\"\n required\n value={tagsValue}\n onChange={setTagsValue}\n placeholder=\"Add at least one keyword\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"With error\">\n <FormTagsInput\n label=\"Tags\"\n value={tagsValue}\n onChange={setTagsValue}\n error=\"Maximum 5 tags allowed\"\n placeholder=\"Add tags\"\n />\n </ExampleBlock>\n <ExampleBlock label=\"Disabled\">\n <FormTagsInput\n label=\"Fixed Tags\"\n value={[\"readonly\", \"tags\"]}\n onChange={() => {}}\n disabled\n placeholder=\"Cannot edit\"\n />\n </ExampleBlock>\n </div>\n\n <pre className=\"text-xs bg-muted p-2 rounded overflow-x-auto\">\n <code>{`<FormTagsInput\n label=\"Technologies\"\n value={tagsValue}\n onChange={setTagsValue}\n placeholder=\"Type and press Enter\"\n description=\"Optional description\"\n/>`}</code>\n </pre>\n\n <p className=\"text-xs text-muted-foreground\">\n Current tags:{\" \"}\n {tagsValue.length > 0 ? tagsValue.join(\", \") : \"(none)\"}\n </p>\n </SimpleStack>\n </Card>\n </SimpleStack>\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;AAQA,SAAS,gBAAgB;AACzB,SAAS,aAAa,YAAY;AAElC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAyDD,SACE,KADF;AAvDS,SAAR,qBAAsC;AAE3C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,EAAE;AAC7C,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,EAAE;AAC/C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE;AACrD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAG3C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE;AACrD,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE;AAGrD,QAAM,CAAC,aAAa,cAAc,IAAI,SAA6B,MAAS;AAC5E,QAAM,CAAC,YAAY,aAAa,IAAI,SAA6B,CAAC;AAClE,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IACtC;AAAA,EACF;AAGA,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AACxD,QAAM,CAAC,uBAAuB,wBAAwB,IAAI,SAExD,eAAe;AAGjB,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,EAAE;AACjD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,EAAE;AAGvD,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAmB,CAAC,CAAC;AAGrE,QAAM,CAAC,WAAW,YAAY,IAAI,SAAmB,CAAC,SAAS,YAAY,CAAC;AAG5E,QAAM,eAAe;AAAA,IACnB,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,IAC7B,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,IACjC,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,IAC/B,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,IACnC,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,EACrC;AAEA,QAAM,iBAAiB;AAAA,IACrB,EAAE,OAAO,iBAAiB,OAAO,KAAK;AAAA,IACtC,EAAE,OAAO,UAAU,OAAO,KAAK;AAAA,IAC/B,EAAE,OAAO,kBAAkB,OAAO,KAAK;AAAA,IACvC,EAAE,OAAO,WAAW,OAAO,KAAK;AAAA,IAChC,EAAE,OAAO,UAAU,OAAO,KAAK;AAAA,IAC/B,EAAE,OAAO,SAAS,OAAO,KAAK;AAAA,IAC9B,EAAE,OAAO,aAAa,OAAO,KAAK;AAAA,EACpC;AAEA,SACE,qBAAC,SAAI,WAAU,8BACb;AAAA,yBAAC,SACC;AAAA,0BAAC,QAAG,wCAA0B;AAAA,MAC9B,oBAAC,OAAE,WAAU,sCAAqC,iGAGlD;AAAA,OACF;AAAA,IAEA,oBAAC,SACC,+BAAC,eAAY,KAAI,MAAK,OAAO,EAAE,UAAU,QAAQ,GAE/C;AAAA,0BAAC,QAAK,WAAU,wBACd,+BAAC,eAAY,KAAI,MACf;AAAA,4BAAC,QAAG,uBAAS;AAAA,QACb,oBAAC,OAAE,WAAU,iCAAgC,2GAG7C;AAAA,QAEA,qBAAC,SAAI,WAAU,+BACb;AAAA,8BAAC,gBAAa,OAAM,SAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,aAAa,EAAE,OAAO,KAAK;AAAA,cAC5C,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,oBAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,aAAY;AAAA,cACZ,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,aAAa,EAAE,OAAO,KAAK;AAAA,cAC5C,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,YAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,UAAQ;AAAA,cACR,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK;AAAA,cAC7C,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,cAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK;AAAA,cAC7C,OAAM;AAAA,cACN,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,YAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,MAAK;AAAA,cACL,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,iBAAiB,EAAE,OAAO,KAAK;AAAA,cAChD,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,YAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAM;AAAA,cACN,UAAU,MAAM;AAAA,cAAC;AAAA,cACjB,UAAQ;AAAA;AAAA,UACV,GACF;AAAA,WACF;AAAA,QAEA,oBAAC,SAAI,WAAU,gDACb,8BAAC,UAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KASnB,GACU;AAAA,QAEA,qBAAC,OAAE,WAAU,iCAAgC;AAAA;AAAA,UAC3B,aAAa;AAAA,WAC/B;AAAA,SACF,GACF;AAAA,MAGA,oBAAC,QAAK,WAAU,wBACd,+BAAC,eAAY,KAAI,MACf;AAAA,4BAAC,QAAG,0BAAY;AAAA,QAChB,oBAAC,OAAE,WAAU,iCAAgC,+EAG7C;AAAA,QAEA,qBAAC,SAAI,WAAU,+BACb;AAAA,8BAAC,gBAAa,OAAM,SAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,iBAAiB,EAAE,OAAO,KAAK;AAAA,cAChD,aAAY;AAAA,cACZ,MAAM;AAAA;AAAA,UACR,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,oBAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,aAAY;AAAA,cACZ,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,iBAAiB,EAAE,OAAO,KAAK;AAAA,cAChD,aAAY;AAAA,cACZ,MAAM;AAAA;AAAA,UACR,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,yBAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO;AAAA,cACP,UAAU,CAAC,MAAM;AACf,iCAAiB,EAAE,OAAO,KAAK;AAC/B;AAAA,kBACE,EAAE,OAAO,MAAM,SAAS,MACpB,mCACA;AAAA,gBACN;AAAA,cACF;AAAA,cACA,OAAO;AAAA,cACP,aAAY;AAAA,cACZ,MAAM;AAAA;AAAA,UACR,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,YAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAM;AAAA,cACN,UAAU,MAAM;AAAA,cAAC;AAAA,cACjB,UAAQ;AAAA,cACR,MAAM;AAAA;AAAA,UACR,GACF;AAAA,WACF;AAAA,QAEA,oBAAC,SAAI,WAAU,gDACb,8BAAC,UAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAQnB,GACU;AAAA,QAEA,qBAAC,OAAE,WAAU,iCAAgC;AAAA;AAAA,UAC3B,iBAAiB;AAAA,WACnC;AAAA,SACF,GACF;AAAA,MAGA,oBAAC,QAAK,WAAU,wBACd,+BAAC,eAAY,KAAI,MACf;AAAA,4BAAC,QAAG,6BAAe;AAAA,QACnB,oBAAC,OAAE,WAAU,iCAAgC,oEAE7C;AAAA,QAEA,qBAAC,SAAI,WAAU,+BACb;AAAA,8BAAC,gBAAa,OAAM,SAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO;AAAA,cACP,UAAU;AAAA,cACV,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,qBAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO;AAAA,cACP,UAAU;AAAA,cACV,KAAK;AAAA,cACL,KAAK;AAAA,cACL,MAAM;AAAA,cACN,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,WAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO;AAAA,cACP,UAAU;AAAA,cACV,cAAc;AAAA,cACd,MAAM;AAAA,cACN,aAAY;AAAA,cACZ,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,YAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,UAAQ;AAAA,cACR,OAAO;AAAA,cACP,UAAU;AAAA,cACV,KAAK;AAAA,cACL,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,cAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO;AAAA,cACP,UAAU;AAAA,cACV,OAAM;AAAA;AAAA,UACR,GACF;AAAA,WACF;AAAA,QAEA,oBAAC,SAAI,WAAU,gDACb,8BAAC,UAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAQnB,GACU;AAAA,QAEA,qBAAC,OAAE,WAAU,iCAAgC;AAAA;AAAA,UAC3B,eAAe;AAAA,WACjC;AAAA,SACF,GACF;AAAA,MAGA,oBAAC,QAAK,WAAU,wBACd,+BAAC,eAAY,KAAI,MACf;AAAA,4BAAC,QAAG,0BAAY;AAAA,QAChB,oBAAC,OAAE,WAAU,iCAAgC,gFAG7C;AAAA,QAEA,qBAAC,SAAI,WAAU,+BACb;AAAA,8BAAC,gBAAa,OAAM,SAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,SAAS;AAAA,cACT,UAAU,CAAC,YAAY,iBAAiB,YAAY,IAAI;AAAA;AAAA,UAC1D,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,oBAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,aAAY;AAAA,cACZ,SAAS;AAAA,cACT,UAAU,CAAC,YAAY,iBAAiB,YAAY,IAAI;AAAA;AAAA,UAC1D,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,YAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,UAAQ;AAAA,cACR,SAAS;AAAA,cACT,UAAU,CAAC,YAAY,iBAAiB,YAAY,IAAI;AAAA;AAAA,UAC1D,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,iBAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,aAAY;AAAA,cACZ,SAAS;AAAA,cACT,UAAU;AAAA;AAAA,UACZ,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,YAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,SAAS;AAAA,cACT,UAAU,MAAM;AAAA,cAAC;AAAA,cACjB,UAAQ;AAAA;AAAA,UACV,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,cAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,SAAS;AAAA,cACT,UAAU,CAAC,YAAY,iBAAiB,YAAY,IAAI;AAAA,cACxD,OAAM;AAAA;AAAA,UACR,GACF;AAAA,WACF;AAAA,QAEA,oBAAC,SAAI,WAAU,gDACb,8BAAC,UAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMnB,GACU;AAAA,QAEA,qBAAC,OAAE,WAAU,iCAAgC;AAAA;AAAA,UAC3B,OAAO,aAAa;AAAA,WACtC;AAAA,SACF,GACF;AAAA,MAGA,oBAAC,QAAK,WAAU,wBACd,+BAAC,eAAY,KAAI,MACf;AAAA,4BAAC,QAAG,wBAAU;AAAA,QACd,oBAAC,OAAE,WAAU,iCAAgC,6EAE7C;AAAA,QAEA,qBAAC,SAAI,WAAU,+BACb;AAAA,8BAAC,gBAAa,OAAM,SAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO;AAAA,cACP,UAAU,CAAC,UAAU,eAAe,SAAS,EAAE;AAAA,cAC/C,SAAS;AAAA,cACT,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,oBAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,aAAY;AAAA,cACZ,OAAO;AAAA,cACP,UAAU,CAAC,UAAU,eAAe,SAAS,EAAE;AAAA,cAC/C,SAAS;AAAA,cACT,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,YAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,UAAQ;AAAA,cACR,OAAO;AAAA,cACP,UAAU,CAAC,UAAU,kBAAkB,SAAS,EAAE;AAAA,cAClD,SAAS;AAAA,cACT,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,YAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAM;AAAA,cACN,UAAU,MAAM;AAAA,cAAC;AAAA,cACjB,SAAS;AAAA,cACT,UAAQ;AAAA,cACR,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,cAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO;AAAA,cACP,UAAU,CAAC,UAAU,eAAe,SAAS,EAAE;AAAA,cAC/C,SAAS;AAAA,cACT,OAAM;AAAA,cACN,aAAY;AAAA;AAAA,UACd,GACF;AAAA,WACF;AAAA,QAEA,oBAAC,SAAI,WAAU,gDACb,8BAAC,UAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KASnB,GACU;AAAA,QAEA,qBAAC,OAAE,WAAU,iCAAgC;AAAA;AAAA,UAC3B,eAAe;AAAA,WACjC;AAAA,SACF,GACF;AAAA,MAGA,oBAAC,QAAK,WAAU,wBACd,+BAAC,eAAY,KAAI,MACf;AAAA,4BAAC,QAAG,6BAAe;AAAA,QACnB,oBAAC,OAAE,WAAU,iCAAgC,2DAE7C;AAAA,QAEA,qBAAC,SAAI,WAAU,+BACb;AAAA,8BAAC,gBAAa,OAAM,SAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO;AAAA,cACP,UAAU;AAAA,cACV,SAAS;AAAA,cACT,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,oBAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,aAAY;AAAA,cACZ,OAAO;AAAA,cACP,UAAU;AAAA,cACV,SAAS;AAAA,cACT,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,YAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,UAAQ;AAAA,cACR,OAAO;AAAA,cACP,UAAU;AAAA,cACV,SAAS;AAAA,gBACP,EAAE,OAAO,cAAc,OAAO,KAAK;AAAA,gBACnC,EAAE,OAAO,cAAc,OAAO,KAAK;AAAA,gBACnC,EAAE,OAAO,UAAU,OAAO,KAAK;AAAA,gBAC/B,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,cACjC;AAAA,cACA,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,cAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO;AAAA,cACP,UAAU;AAAA,cACV,SAAS;AAAA,cACT,OAAM;AAAA,cACN,aAAY;AAAA;AAAA,UACd,GACF;AAAA,WACF;AAAA,QAEA,oBAAC,SAAI,WAAU,gDACb,8BAAC,UAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMnB,GACU;AAAA,QAEA,qBAAC,OAAE,WAAU,iCAAgC;AAAA;AAAA,UAC5B;AAAA,UACd,iBAAiB,SAAS,IACvB,iBAAiB,KAAK,IAAI,IAC1B;AAAA,WACN;AAAA,SACF,GACF;AAAA,MAGA,oBAAC,QAAK,WAAU,wBACd,+BAAC,eAAY,KAAI,MACf;AAAA,4BAAC,QAAG,2BAAa;AAAA,QACjB,oBAAC,OAAE,WAAU,iCAAgC,6DAE7C;AAAA,QAEA,qBAAC,SAAI,WAAU,+BACb;AAAA,8BAAC,gBAAa,OAAM,SAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO;AAAA,cACP,UAAU;AAAA,cACV,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,oBAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,aAAY;AAAA,cACZ,OAAO;AAAA,cACP,UAAU;AAAA,cACV,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,YAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,UAAQ;AAAA,cACR,OAAO;AAAA,cACP,UAAU;AAAA,cACV,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,cAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO;AAAA,cACP,UAAU;AAAA,cACV,OAAM;AAAA,cACN,aAAY;AAAA;AAAA,UACd,GACF;AAAA,UACA,oBAAC,gBAAa,OAAM,YAClB;AAAA,YAAC;AAAA;AAAA,cACC,OAAM;AAAA,cACN,OAAO,CAAC,YAAY,MAAM;AAAA,cAC1B,UAAU,MAAM;AAAA,cAAC;AAAA,cACjB,UAAQ;AAAA,cACR,aAAY;AAAA;AAAA,UACd,GACF;AAAA,WACF;AAAA,QAEA,oBAAC,SAAI,WAAU,gDACb,8BAAC,UAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMnB,GACU;AAAA,QAEA,qBAAC,OAAE,WAAU,iCAAgC;AAAA;AAAA,UAC7B;AAAA,UACb,UAAU,SAAS,IAAI,UAAU,KAAK,IAAI,IAAI;AAAA,WACjD;AAAA,SACF,GACF;AAAA,OACF,GACF;AAAA,KACF;AAEJ;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/pages/PlayCoreComponents.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport { toast } from \"sonner\";\nimport { PlaygroundSection } from \"../PlaygroundSection\";\nimport {\n Spinner,\n Button,\n Badge,\n Alert,\n AlertDescription,\n AlertTitle,\n Separator,\n Input,\n Textarea,\n Checkbox,\n Label,\n Avatar,\n AvatarImage,\n AvatarFallback,\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n Dialog,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@petrarca/sonnet-ui\";\nimport { useClipboard, useDisclosure } from \"@petrarca/sonnet-core/hooks\";\nimport { Info, AlertTriangle, CheckCircle } from \"lucide-react\";\n\n/** PlayCoreComponents — showcase for all core UI primitives. */\nexport default function PlayCoreComponents() {\n const [spinnerSize, setSpinnerSize] = useState<\"sm\" | \"md\" | \"lg\">(\"md\");\n const clipboard = useClipboard({ timeout: 2000 });\n const [disclosureOpened, disclosureHandlers] = useDisclosure(false);\n\n return (\n <div className=\"space-y-6\">\n {/* Header */}\n <div>\n <h1>Core UI Components</h1>\n <p className=\"text-sm text-muted-foreground mt-1\">\n Test all core UI components in isolation before production deployment.\n Each component is verified here first.\n </p>\n </div>\n\n {/* Components Grid */}\n <div className=\"space-y-6\">\n {/* Buttons */}\n <PlaygroundSection\n title=\"Buttons\"\n description=\"shadcn/ui Button component with all variants and sizes.\"\n variant=\"card\"\n >\n <div className=\"space-y-6\">\n {/* Variants */}\n <div>\n <h4 className=\"mb-3\">Variants</h4>\n <div className=\"flex flex-wrap gap-3\">\n <Button>Default</Button>\n <Button variant=\"secondary\">Secondary</Button>\n <Button variant=\"destructive\">Destructive</Button>\n <Button variant=\"outline\">Outline</Button>\n <Button variant=\"ghost\">Ghost</Button>\n <Button variant=\"link\">Link</Button>\n </div>\n </div>\n\n <Separator />\n\n {/* Sizes */}\n <div>\n <h4 className=\"mb-3\">Sizes</h4>\n <div className=\"flex flex-wrap items-center gap-3\">\n <Button size=\"sm\">Small</Button>\n <Button size=\"default\">Default</Button>\n <Button size=\"lg\">Large</Button>\n <Button size=\"icon\">🔍</Button>\n </div>\n </div>\n\n <Separator />\n\n {/* States */}\n <div>\n <h4 className=\"mb-3\">States</h4>\n <div className=\"flex flex-wrap gap-3\">\n <Button disabled>Disabled</Button>\n <Button variant=\"outline\" disabled>\n Disabled Outline\n </Button>\n </div>\n </div>\n </div>\n </PlaygroundSection>\n\n {/* Badges */}\n <PlaygroundSection\n title=\"Badges\"\n description=\"Badge component with different variants.\"\n variant=\"card\"\n >\n <div className=\"space-y-4\">\n <div className=\"flex flex-wrap items-center gap-3\">\n <Badge>Default</Badge>\n <Badge variant=\"secondary\">Secondary</Badge>\n <Badge variant=\"destructive\">Destructive</Badge>\n <Badge variant=\"outline\">Outline</Badge>\n </div>\n\n <div className=\"flex flex-wrap items-center gap-3\">\n <span className=\"text-sm text-muted-foreground\">Status:</span>\n <Badge variant=\"default\">Active</Badge>\n <Badge variant=\"secondary\">Pending</Badge>\n <Badge variant=\"destructive\">Error</Badge>\n </div>\n </div>\n </PlaygroundSection>\n\n {/* Alerts */}\n <PlaygroundSection\n title=\"Alerts\"\n description=\"Alert component for important messages.\"\n variant=\"card\"\n >\n <div className=\"space-y-4\">\n <Alert>\n <Info className=\"h-4 w-4\" />\n <AlertTitle>Info</AlertTitle>\n <AlertDescription>\n This is an informational message.\n </AlertDescription>\n </Alert>\n\n <Alert variant=\"default\">\n <CheckCircle className=\"h-4 w-4\" />\n <AlertTitle>Success</AlertTitle>\n <AlertDescription>\n Your operation completed successfully.\n </AlertDescription>\n </Alert>\n\n <Alert variant=\"destructive\">\n <AlertTriangle className=\"h-4 w-4\" />\n <AlertTitle>Error</AlertTitle>\n <AlertDescription>\n There was a problem with your request.\n </AlertDescription>\n </Alert>\n </div>\n </PlaygroundSection>\n\n {/* Cards */}\n <PlaygroundSection\n title=\"Cards\"\n description=\"Card component for content containers.\"\n variant=\"card\"\n >\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n <Card>\n <CardHeader>\n <CardTitle>Simple Card</CardTitle>\n <CardDescription>\n Basic card with header and content\n </CardDescription>\n </CardHeader>\n <CardContent>\n <p className=\"text-sm text-muted-foreground\">\n This is a simple card component with header and content\n sections.\n </p>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Card with Footer</CardTitle>\n <CardDescription>Includes footer with actions</CardDescription>\n </CardHeader>\n <CardContent>\n <p className=\"text-sm text-muted-foreground\">\n This card has a footer section for actions.\n </p>\n </CardContent>\n <CardFooter className=\"flex gap-2\">\n <Button variant=\"outline\" size=\"sm\">\n Cancel\n </Button>\n <Button size=\"sm\">Save</Button>\n </CardFooter>\n </Card>\n\n <Card className=\"col-span-1 md:col-span-2\">\n <CardHeader>\n <CardTitle>Full Width Card</CardTitle>\n <CardDescription>\n This card spans the full width\n </CardDescription>\n </CardHeader>\n <CardContent>\n <div className=\"space-y-2\">\n <p className=\"text-sm text-muted-foreground\">\n Cards can be combined with other components for rich\n layouts.\n </p>\n <div className=\"flex gap-2\">\n <Badge>Feature</Badge>\n <Badge variant=\"secondary\">New</Badge>\n </div>\n </div>\n </CardContent>\n </Card>\n </div>\n </PlaygroundSection>\n\n {/* Separator */}\n <PlaygroundSection\n title=\"Separator\"\n description=\"Visual separator for content sections.\"\n variant=\"card\"\n >\n <div className=\"space-y-4\">\n <div>\n <p className=\"text-sm\">Content above separator</p>\n <Separator className=\"my-4\" />\n <p className=\"text-sm\">Content below separator</p>\n </div>\n\n <div className=\"flex items-center gap-4\">\n <p className=\"text-sm\">Vertical separator</p>\n <Separator orientation=\"vertical\" className=\"h-6\" />\n <p className=\"text-sm\">Between items</p>\n </div>\n </div>\n </PlaygroundSection>\n\n {/* Tooltips */}\n <PlaygroundSection\n title=\"Tooltips\"\n description=\"Tooltip component for additional information on hover.\"\n variant=\"card\"\n >\n <TooltipProvider>\n <div className=\"flex flex-wrap gap-6\">\n <Tooltip>\n <TooltipTrigger asChild>\n <Button variant=\"outline\">Hover me</Button>\n </TooltipTrigger>\n <TooltipContent>\n <p>This is a tooltip</p>\n </TooltipContent>\n </Tooltip>\n\n <Tooltip>\n <TooltipTrigger asChild>\n <Button>Top (default)</Button>\n </TooltipTrigger>\n <TooltipContent>\n <p>Tooltip positioned at top</p>\n </TooltipContent>\n </Tooltip>\n\n <Tooltip>\n <TooltipTrigger asChild>\n <Button variant=\"secondary\">With icon 🎯</Button>\n </TooltipTrigger>\n <TooltipContent>\n <p>Tooltips work with any trigger element</p>\n </TooltipContent>\n </Tooltip>\n </div>\n </TooltipProvider>\n </PlaygroundSection>\n\n {/* Dialogs & Modals */}\n <PlaygroundSection\n title=\"Dialogs\"\n description=\"shadcn/ui Dialog component for modal interactions.\"\n variant=\"card\"\n >\n <div className=\"space-y-6\">\n {/* Basic Dialog */}\n <div>\n <h4 className=\"mb-3\">Basic Dialog</h4>\n <Dialog>\n <DialogTrigger asChild>\n <Button variant=\"outline\">Open Dialog</Button>\n </DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Dialog Title</DialogTitle>\n <DialogDescription>\n This is a basic dialog with a title and description.\n </DialogDescription>\n </DialogHeader>\n <div className=\"py-4\">\n <p className=\"text-sm text-muted-foreground\">\n Dialog content goes here. You can add any components or\n text you need.\n </p>\n </div>\n <DialogFooter>\n <Button variant=\"outline\">Cancel</Button>\n <Button>Confirm</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </div>\n\n <Separator />\n\n {/* Confirmation Dialog */}\n <div>\n <h4 className=\"mb-3\">Confirmation Dialog</h4>\n <Dialog>\n <DialogTrigger asChild>\n <Button variant=\"destructive\">Delete Item</Button>\n </DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Are you absolutely sure?</DialogTitle>\n <DialogDescription>\n This action cannot be undone. This will permanently delete\n your data from our servers.\n </DialogDescription>\n </DialogHeader>\n <DialogFooter>\n <Button variant=\"outline\">Cancel</Button>\n <Button\n variant=\"destructive\"\n onClick={() => {\n toast.success(\"Item deleted\");\n }}\n >\n Delete\n </Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </div>\n\n <Separator />\n\n {/* Dialog with Form */}\n <div>\n <h4 className=\"mb-3\">Dialog with Form</h4>\n <Dialog>\n <DialogTrigger asChild>\n <Button>Add New Item</Button>\n </DialogTrigger>\n <DialogContent>\n <DialogHeader>\n <DialogTitle>Add New Item</DialogTitle>\n <DialogDescription>\n Fill in the details below to add a new item.\n </DialogDescription>\n </DialogHeader>\n <div className=\"grid gap-4 py-4\">\n <div className=\"grid gap-2\">\n <Label htmlFor=\"name\">Name</Label>\n <Input\n id=\"name\"\n type=\"text\"\n placeholder=\"Enter name...\"\n />\n </div>\n <div className=\"grid gap-2\">\n <Label htmlFor=\"description\">Description</Label>\n <Textarea\n id=\"description\"\n placeholder=\"Enter description...\"\n rows={3}\n />\n </div>\n </div>\n <DialogFooter>\n <Button variant=\"outline\">Cancel</Button>\n <Button\n onClick={() => {\n toast.success(\"Item added\");\n }}\n >\n Add Item\n </Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </div>\n\n <Separator />\n\n {/* Information Dialog */}\n <div>\n <h4 className=\"mb-3\">Information Dialog</h4>\n <Dialog>\n <DialogTrigger asChild>\n <Button variant=\"secondary\">View Details</Button>\n </DialogTrigger>\n <DialogContent className=\"max-w-2xl\">\n <DialogHeader>\n <DialogTitle>System Information</DialogTitle>\n <DialogDescription>\n Detailed information about the current system status.\n </DialogDescription>\n </DialogHeader>\n <div className=\"space-y-4 py-4\">\n <div className=\"grid grid-cols-2 gap-4\">\n <div>\n <p className=\"text-sm font-medium text-foreground\">\n Status\n </p>\n <Badge variant=\"default\" className=\"mt-1\">\n Active\n </Badge>\n </div>\n <div>\n <p className=\"text-sm font-medium text-foreground\">\n Version\n </p>\n <p className=\"text-sm text-muted-foreground mt-1\">\n 1.0.0\n </p>\n </div>\n <div>\n <p className=\"text-sm font-medium text-foreground\">\n Environment\n </p>\n <p className=\"text-sm text-muted-foreground mt-1\">\n Production\n </p>\n </div>\n <div>\n <p className=\"text-sm font-medium text-foreground\">\n Region\n </p>\n <p className=\"text-sm text-muted-foreground mt-1\">\n US-East\n </p>\n </div>\n </div>\n <Separator />\n <div>\n <p className=\"text-sm font-medium text-foreground mb-2\">\n Description\n </p>\n <p className=\"text-sm text-muted-foreground\">\n This is an example of an information dialog that\n displays system details. It can contain various types of\n content including badges, separators, and structured\n data.\n </p>\n </div>\n </div>\n <DialogFooter>\n <Button>Close</Button>\n </DialogFooter>\n </DialogContent>\n </Dialog>\n </div>\n </div>\n </PlaygroundSection>\n\n {/* Form Inputs */}\n <PlaygroundSection\n title=\"Form Inputs\"\n description=\"shadcn/ui Input, Textarea, and Checkbox components.\"\n variant=\"card\"\n >\n <div className=\"space-y-6\">\n {/* Input */}\n <div>\n <h4 className=\"mb-3\">Input</h4>\n <div className=\"space-y-4 max-w-md\">\n <div>\n <Label htmlFor=\"input-default\">Default Input</Label>\n <Input\n id=\"input-default\"\n type=\"text\"\n placeholder=\"Enter text...\"\n />\n </div>\n\n <div>\n <Label htmlFor=\"input-email\">Email Input</Label>\n <Input\n id=\"input-email\"\n type=\"email\"\n placeholder=\"email@example.com\"\n />\n </div>\n\n <div>\n <Label htmlFor=\"input-password\">Password Input</Label>\n <Input\n id=\"input-password\"\n type=\"password\"\n placeholder=\"Enter password...\"\n />\n </div>\n\n <div>\n <Label htmlFor=\"input-disabled\">Disabled Input</Label>\n <Input\n id=\"input-disabled\"\n type=\"text\"\n placeholder=\"Disabled...\"\n disabled\n />\n </div>\n\n <div>\n <Label htmlFor=\"input-readonly\">Read-only Input</Label>\n <Input\n id=\"input-readonly\"\n type=\"text\"\n value=\"Read-only value\"\n readOnly\n />\n </div>\n </div>\n </div>\n\n <Separator />\n\n {/* Textarea */}\n <div>\n <h4 className=\"mb-3\">Textarea</h4>\n <div className=\"space-y-4 max-w-md\">\n <div>\n <Label htmlFor=\"textarea-default\">Default Textarea</Label>\n <Textarea\n id=\"textarea-default\"\n placeholder=\"Enter multi-line text...\"\n />\n </div>\n\n <div>\n <Label htmlFor=\"textarea-rows\">\n Textarea with Custom Rows\n </Label>\n <Textarea\n id=\"textarea-rows\"\n placeholder=\"This has 5 rows...\"\n rows={5}\n />\n </div>\n\n <div>\n <Label htmlFor=\"textarea-disabled\">Disabled Textarea</Label>\n <Textarea\n id=\"textarea-disabled\"\n placeholder=\"Disabled...\"\n disabled\n />\n </div>\n\n <div>\n <Label htmlFor=\"textarea-value\">Textarea with Value</Label>\n <Textarea\n id=\"textarea-value\"\n value=\"This is some pre-filled text in the textarea.\"\n readOnly\n />\n </div>\n </div>\n </div>\n\n <Separator />\n\n {/* Checkbox */}\n <div>\n <h4 className=\"mb-3\">Checkbox</h4>\n <div className=\"space-y-4\">\n <div className=\"flex items-center space-x-2\">\n <Checkbox id=\"checkbox-default\" />\n <Label htmlFor=\"checkbox-default\">Default Checkbox</Label>\n </div>\n\n <div className=\"flex items-center space-x-2\">\n <Checkbox id=\"checkbox-checked\" defaultChecked />\n <Label htmlFor=\"checkbox-checked\">Checked by Default</Label>\n </div>\n\n <div className=\"flex items-center space-x-2\">\n <Checkbox id=\"checkbox-disabled\" disabled />\n <Label htmlFor=\"checkbox-disabled\">Disabled Checkbox</Label>\n </div>\n\n <div className=\"flex items-center space-x-2\">\n <Checkbox id=\"checkbox-disabled-checked\" disabled checked />\n <Label htmlFor=\"checkbox-disabled-checked\">\n Disabled & Checked\n </Label>\n </div>\n\n <Separator className=\"my-4\" />\n\n <div className=\"space-y-3\">\n <p className=\"text-sm font-medium\">\n Multiple Checkboxes Example:\n </p>\n <div className=\"flex items-center space-x-2\">\n <Checkbox id=\"terms\" />\n <Label htmlFor=\"terms\">Accept terms and conditions</Label>\n </div>\n <div className=\"flex items-center space-x-2\">\n <Checkbox id=\"marketing\" />\n <Label htmlFor=\"marketing\">Send me marketing emails</Label>\n </div>\n <div className=\"flex items-center space-x-2\">\n <Checkbox id=\"newsletter\" defaultChecked />\n <Label htmlFor=\"newsletter\">Subscribe to newsletter</Label>\n </div>\n </div>\n </div>\n </div>\n </div>\n </PlaygroundSection>\n\n {/* Label Component */}\n <PlaygroundSection\n title=\"Label\"\n description=\"Label component for form fields with proper accessibility.\"\n variant=\"card\"\n >\n <div className=\"space-y-6\">\n {/* Basic Label */}\n <div>\n <h4 className=\"mb-3\">Basic Usage</h4>\n <div className=\"space-y-4\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"Enter your email\"\n />\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"username\">Username</Label>\n <Input id=\"username\" placeholder=\"Choose a username\" />\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"bio\">Bio</Label>\n <Textarea id=\"bio\" placeholder=\"Tell us about yourself\" />\n </div>\n </div>\n </div>\n\n <Separator />\n\n {/* Label with Checkbox */}\n <div>\n <h4 className=\"mb-3\">With Checkbox</h4>\n <div className=\"space-y-3\">\n <div className=\"flex items-center space-x-2\">\n <Checkbox id=\"terms-label\" />\n <Label htmlFor=\"terms-label\">\n Accept terms and conditions\n </Label>\n </div>\n\n <div className=\"flex items-center space-x-2\">\n <Checkbox id=\"newsletter-label\" />\n <Label htmlFor=\"newsletter-label\">\n Subscribe to newsletter\n </Label>\n </div>\n </div>\n </div>\n\n <Separator />\n\n {/* Disabled State */}\n <div>\n <h4 className=\"mb-3\">Disabled State</h4>\n <div className=\"space-y-2\">\n <Label htmlFor=\"disabled-input\" className=\"opacity-50\">\n Disabled Field\n </Label>\n <Input\n id=\"disabled-input\"\n disabled\n placeholder=\"This field is disabled\"\n />\n </div>\n </div>\n </div>\n </PlaygroundSection>\n\n {/* Avatar Component */}\n <PlaygroundSection\n title=\"Avatar\"\n description=\"Avatar component for displaying user profile images with fallback support.\"\n variant=\"card\"\n >\n <div className=\"space-y-6\">\n {/* Basic Avatars */}\n <div>\n <h4 className=\"mb-3\">Basic Avatars</h4>\n <div className=\"flex items-center gap-4\">\n <Avatar>\n <AvatarImage\n src=\"https://github.com/shadcn.png\"\n alt=\"@shadcn\"\n />\n <AvatarFallback>CN</AvatarFallback>\n </Avatar>\n\n <Avatar>\n <AvatarImage\n src=\"https://github.com/vercel.png\"\n alt=\"@vercel\"\n />\n <AvatarFallback>VC</AvatarFallback>\n </Avatar>\n\n <Avatar>\n <AvatarImage\n src=\"https://github.com/react.png\"\n alt=\"@react\"\n />\n <AvatarFallback>RC</AvatarFallback>\n </Avatar>\n </div>\n </div>\n\n <Separator />\n\n {/* Fallback Only */}\n <div>\n <h4 className=\"mb-3\">Fallback Only (No Image)</h4>\n <div className=\"flex items-center gap-4\">\n <Avatar>\n <AvatarFallback>JD</AvatarFallback>\n </Avatar>\n\n <Avatar>\n <AvatarFallback>AB</AvatarFallback>\n </Avatar>\n\n <Avatar>\n <AvatarFallback>XY</AvatarFallback>\n </Avatar>\n\n <Avatar>\n <AvatarFallback className=\"bg-primary text-primary-foreground\">\n DB\n </AvatarFallback>\n </Avatar>\n\n <Avatar>\n <AvatarFallback className=\"bg-secondary text-secondary-foreground\">\n GH\n </AvatarFallback>\n </Avatar>\n </div>\n </div>\n\n <Separator />\n\n {/* With User Info */}\n <div>\n <h4 className=\"mb-3\">With User Information</h4>\n <div className=\"space-y-4\">\n <div className=\"flex items-center gap-3\">\n <Avatar>\n <AvatarImage\n src=\"https://github.com/shadcn.png\"\n alt=\"@shadcn\"\n />\n <AvatarFallback>CN</AvatarFallback>\n </Avatar>\n <div>\n <p className=\"text-sm font-medium text-foreground\">\n John Doe\n </p>\n <p className=\"text-xs text-faint-foreground\">\n john.doe@example.com\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-3\">\n <Avatar>\n <AvatarFallback className=\"bg-primary text-primary-foreground\">\n JD\n </AvatarFallback>\n </Avatar>\n <div>\n <p className=\"text-sm font-medium text-foreground\">\n Jane Smith\n </p>\n <p className=\"text-xs text-faint-foreground\">\n jane.smith@example.com\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-3\">\n <Avatar>\n <AvatarFallback className=\"bg-destructive text-destructive-foreground\">\n AS\n </AvatarFallback>\n </Avatar>\n <div>\n <p className=\"text-sm font-medium text-foreground\">\n Alex Johnson\n </p>\n <p className=\"text-xs text-faint-foreground\">\n alex.j@example.com\n </p>\n </div>\n </div>\n </div>\n </div>\n\n <Separator />\n\n {/* Different Sizes */}\n <div>\n <h4 className=\"mb-3\">Custom Sizes</h4>\n <div className=\"flex items-end gap-4\">\n <div className=\"flex flex-col items-center gap-2\">\n <Avatar className=\"h-8 w-8\">\n <AvatarFallback className=\"text-xs\">SM</AvatarFallback>\n </Avatar>\n <span className=\"text-xs text-muted-foreground\">Small</span>\n </div>\n\n <div className=\"flex flex-col items-center gap-2\">\n <Avatar>\n <AvatarFallback>MD</AvatarFallback>\n </Avatar>\n <span className=\"text-xs text-muted-foreground\">Default</span>\n </div>\n\n <div className=\"flex flex-col items-center gap-2\">\n <Avatar className=\"h-16 w-16\">\n <AvatarFallback className=\"text-lg\">LG</AvatarFallback>\n </Avatar>\n <span className=\"text-xs text-muted-foreground\">Large</span>\n </div>\n\n <div className=\"flex flex-col items-center gap-2\">\n <Avatar className=\"h-20 w-20\">\n <AvatarFallback className=\"text-xl\">XL</AvatarFallback>\n </Avatar>\n <span className=\"text-xs text-muted-foreground\">\n Extra Large\n </span>\n </div>\n </div>\n </div>\n </div>\n </PlaygroundSection>\n\n {/* Notifications */}\n <PlaygroundSection\n title=\"Notifications\"\n description=\"Toast notifications using Sonner. Test all variants and behaviors.\"\n variant=\"card\"\n >\n <div className=\"flex flex-wrap gap-3\">\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => toast.success(\"Success! Operation completed.\")}\n >\n Success\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => toast.error(\"Error! Something went wrong.\")}\n >\n Error\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => toast.warning(\"Warning! Please be careful.\")}\n >\n Warning\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => toast.info(\"Info: Here is some information.\")}\n >\n Info\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => {\n toast.success(\"First notification\");\n setTimeout(() => toast.info(\"Second notification\"), 500);\n setTimeout(() => toast.warning(\"Third notification\"), 1000);\n }}\n >\n Multiple\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() =>\n toast(\"Custom message\", {\n description: \"This is a custom notification with description\",\n duration: 5000,\n })\n }\n >\n Custom\n </Button>\n </div>\n </PlaygroundSection>\n\n {/* Spinner */}\n <PlaygroundSection\n title=\"Spinner Component\"\n description=\"Loading spinner with different sizes.\"\n variant=\"card\"\n >\n <div className=\"space-y-4\">\n <div className=\"flex items-center gap-2\">\n <span className=\"text-sm font-medium text-muted-foreground\">\n Size:\n </span>\n <Button\n variant={spinnerSize === \"sm\" ? \"default\" : \"outline\"}\n size=\"sm\"\n onClick={() => setSpinnerSize(\"sm\")}\n >\n Small\n </Button>\n <Button\n variant={spinnerSize === \"md\" ? \"default\" : \"outline\"}\n size=\"sm\"\n onClick={() => setSpinnerSize(\"md\")}\n >\n Medium\n </Button>\n <Button\n variant={spinnerSize === \"lg\" ? \"default\" : \"outline\"}\n size=\"sm\"\n onClick={() => setSpinnerSize(\"lg\")}\n >\n Large\n </Button>\n </div>\n\n <div className=\"flex items-center gap-8 p-6 bg-muted/50 rounded-md\">\n <div className=\"flex flex-col items-center gap-2\">\n <Spinner size=\"sm\" />\n <span className=\"text-xs text-muted-foreground\">\n Small (16px)\n </span>\n </div>\n\n <div className=\"flex flex-col items-center gap-2\">\n <Spinner size=\"md\" />\n <span className=\"text-xs text-muted-foreground\">\n Medium (24px)\n </span>\n </div>\n\n <div className=\"flex flex-col items-center gap-2\">\n <Spinner size=\"lg\" />\n <span className=\"text-xs text-muted-foreground\">\n Large (32px)\n </span>\n </div>\n\n <div className=\"flex flex-col items-center gap-2\">\n <Spinner size={spinnerSize} />\n <span className=\"text-xs text-muted-foreground\">\n Selected: {spinnerSize}\n </span>\n </div>\n </div>\n </div>\n </PlaygroundSection>\n\n {/* Custom Hooks */}\n <PlaygroundSection\n title=\"Custom Hooks\"\n description=\"Test custom hooks from @petrarca/sonnet-core.\"\n variant=\"card\"\n >\n {/* useClipboard */}\n <div className=\"mb-6\">\n <h4 className=\"mb-3\">useClipboard Hook</h4>\n <div className=\"flex items-center gap-3\">\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() => clipboard.copy(\"Hello from clipboard!\")}\n >\n {clipboard.copied ? \"✓ Copied!\" : \"Copy Text\"}\n </Button>\n <span className=\"text-sm text-muted-foreground\">\n State: {clipboard.copied ? \"Copied\" : \"Ready\"}\n {clipboard.error && ` (Error: ${clipboard.error.message})`}\n </span>\n </div>\n </div>\n\n {/* useDisclosure */}\n <div>\n <h4 className=\"mb-3\">useDisclosure Hook</h4>\n <div className=\"space-y-3\">\n <div className=\"flex items-center gap-3\">\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={disclosureHandlers.open}\n >\n Open\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={disclosureHandlers.close}\n >\n Close\n </Button>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={disclosureHandlers.toggle}\n >\n Toggle\n </Button>\n <span className=\"text-sm text-muted-foreground\">\n State: {disclosureOpened ? \"Open\" : \"Closed\"}\n </span>\n </div>\n\n {disclosureOpened && (\n <div className=\"p-4 bg-muted border rounded-md\">\n <p className=\"text-sm\">\n This content is visible when disclosure is open!\n </p>\n </div>\n )}\n </div>\n </div>\n </PlaygroundSection>\n </div>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/pages/PlayGraph.tsx"],"sourcesContent":["/**\n * Playground page for @petrarca/sonnet-graph.\n * Accessible at /playground/graph\n *\n * Demonstrates graph visualization with static mock data -- no backend required.\n * Uses the GraphStoresContext provider pattern that consumers like explorer\n * and Atlas would use to wire their own stores.\n */\n\nimport React, { useCallback, useState } from \"react\";\nimport {\n GraphVisualizer,\n ActionPanel,\n GraphRendererProvider,\n GraphStoresContext,\n createGraphDataStore,\n createGraphFilterStore,\n createGraphExplorationStore,\n createSelectionStore,\n createGraphFocusStore,\n enrichNodes,\n enrichEdges,\n buildColorPalette,\n type RawGraphNode,\n type RawGraphEdge,\n type WorkspaceStores,\n} from \"@petrarca/sonnet-graph\";\nimport {\n Button,\n Alert,\n AlertDescription,\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@petrarca/sonnet-ui\";\nimport { Play, RotateCcw } from \"lucide-react\";\n\n// ---------------------------------------------------------------------------\n// Mock data -- a small org hierarchy\n// ---------------------------------------------------------------------------\n\nconst MOCK_NODES: RawGraphNode[] = [\n {\n id_: 1,\n label_: \"Company\",\n properties_: { name: \"Acme Corp\", founded: 1985, industry: \"Technology\" },\n },\n {\n id_: 2,\n label_: \"Department\",\n properties_: { name: \"Engineering\", headcount: 42 },\n },\n {\n id_: 3,\n label_: \"Department\",\n properties_: { name: \"Marketing\", headcount: 18 },\n },\n {\n id_: 4,\n label_: \"Department\",\n properties_: { name: \"Sales\", headcount: 25 },\n },\n {\n id_: 5,\n label_: \"Person\",\n properties_: { name: \"Alice Chen\", role: \"CTO\" },\n },\n {\n id_: 6,\n label_: \"Person\",\n properties_: { name: \"Bob Smith\", role: \"VP Engineering\" },\n },\n {\n id_: 7,\n label_: \"Person\",\n properties_: { name: \"Carol Davis\", role: \"CMO\" },\n },\n {\n id_: 8,\n label_: \"Person\",\n properties_: { name: \"Dave Wilson\", role: \"VP Sales\" },\n },\n {\n id_: 9,\n label_: \"Person\",\n properties_: { name: \"Eve Johnson\", role: \"Senior Engineer\" },\n },\n {\n id_: 10,\n label_: \"Person\",\n properties_: { name: \"Frank Brown\", role: \"Product Manager\" },\n },\n {\n id_: 11,\n label_: \"Product\",\n properties_: { name: \"CloudSuite\", version: \"3.2\", status: \"GA\" },\n },\n {\n id_: 12,\n label_: \"Product\",\n properties_: { name: \"DataPipeline\", version: \"1.0\", status: \"Beta\" },\n },\n];\n\nconst MOCK_EDGES: RawGraphEdge[] = [\n {\n id_: 101,\n label_: \"HAS_DEPARTMENT\",\n start_id_: 1,\n end_id_: 2,\n properties_: {},\n },\n {\n id_: 102,\n label_: \"HAS_DEPARTMENT\",\n start_id_: 1,\n end_id_: 3,\n properties_: {},\n },\n {\n id_: 103,\n label_: \"HAS_DEPARTMENT\",\n start_id_: 1,\n end_id_: 4,\n properties_: {},\n },\n {\n id_: 104,\n label_: \"LEADS\",\n start_id_: 5,\n end_id_: 2,\n properties_: { since: 2019 },\n },\n {\n id_: 105,\n label_: \"WORKS_IN\",\n start_id_: 6,\n end_id_: 2,\n properties_: { since: 2020 },\n },\n {\n id_: 106,\n label_: \"LEADS\",\n start_id_: 7,\n end_id_: 3,\n properties_: { since: 2021 },\n },\n {\n id_: 107,\n label_: \"LEADS\",\n start_id_: 8,\n end_id_: 4,\n properties_: { since: 2018 },\n },\n {\n id_: 108,\n label_: \"WORKS_IN\",\n start_id_: 9,\n end_id_: 2,\n properties_: { since: 2022 },\n },\n {\n id_: 109,\n label_: \"WORKS_IN\",\n start_id_: 10,\n end_id_: 2,\n properties_: { since: 2021 },\n },\n { id_: 110, label_: \"REPORTS_TO\", start_id_: 6, end_id_: 5, properties_: {} },\n { id_: 111, label_: \"REPORTS_TO\", start_id_: 9, end_id_: 6, properties_: {} },\n {\n id_: 112,\n label_: \"REPORTS_TO\",\n start_id_: 10,\n end_id_: 6,\n properties_: {},\n },\n { id_: 113, label_: \"OWNS\", start_id_: 2, end_id_: 11, properties_: {} },\n { id_: 114, label_: \"OWNS\", start_id_: 2, end_id_: 12, properties_: {} },\n];\n\n// ---------------------------------------------------------------------------\n// Store setup\n//\n// Stores are created once at module load, not inside the component.\n// This avoids re-creation on re-render and removes the need for useMemo.\n// ---------------------------------------------------------------------------\n\nfunction createPlaygroundStores(): WorkspaceStores {\n const graphFilter = createGraphFilterStore();\n const graphData = createGraphDataStore();\n const selection = createSelectionStore();\n const graphFocus = createGraphFocusStore();\n const graphExploration = createGraphExplorationStore({\n graphData,\n selection,\n graphFocus,\n graphFilter,\n // Static data -- no server expansion available in the playground\n expandNode: async () => ({ nodes: [], edges: [] }),\n getNodes: async () => [],\n });\n return { graphFilter, graphData, graphExploration, selection };\n}\n\nconst PLAYGROUND_STORES = createPlaygroundStores();\n\n// ---------------------------------------------------------------------------\n// Data helpers\n// ---------------------------------------------------------------------------\n\ninterface GraphInput {\n nodes: RawGraphNode[];\n edges: RawGraphEdge[];\n}\n\nconst INITIAL_DATA: GraphInput = { nodes: MOCK_NODES, edges: MOCK_EDGES };\n\nfunction serializeGraphData(data: GraphInput): string {\n return JSON.stringify(data, null, 2);\n}\n\nfunction validateNode(n: unknown, i: number): string | null {\n if (!n || typeof n !== \"object\") return `nodes[${i}] must be an object`;\n const node = n as Record<string, unknown>;\n if (node.id_ === undefined) return `nodes[${i}] is missing id_`;\n if (typeof node.label_ !== \"string\") return `nodes[${i}] is missing label_`;\n return null;\n}\n\nfunction validateEdge(e: unknown, i: number): string | null {\n if (!e || typeof e !== \"object\") return `edges[${i}] must be an object`;\n const edge = e as Record<string, unknown>;\n if (edge.id_ === undefined) return `edges[${i}] is missing id_`;\n if (typeof edge.label_ !== \"string\") return `edges[${i}] is missing label_`;\n if (edge.start_id_ === undefined) return `edges[${i}] is missing start_id_`;\n if (edge.end_id_ === undefined) return `edges[${i}] is missing end_id_`;\n return null;\n}\n\n/** Validates that parsed JSON is a usable GraphInput. Returns an error string or null. */\nfunction validateGraphInput(value: unknown): string | null {\n if (!value || typeof value !== \"object\" || Array.isArray(value)) {\n return \"JSON must be an object with nodes and edges arrays\";\n }\n const obj = value as Record<string, unknown>;\n if (!Array.isArray(obj.nodes)) return '\"nodes\" must be an array';\n if (!Array.isArray(obj.edges)) return '\"edges\" must be an array';\n for (const [i, n] of (obj.nodes as unknown[]).entries()) {\n const err = validateNode(n, i);\n if (err) return err;\n }\n for (const [i, e] of (obj.edges as unknown[]).entries()) {\n const err = validateEdge(e, i);\n if (err) return err;\n }\n return null;\n}\n\nfunction loadIntoStore(stores: WorkspaceStores, data: GraphInput) {\n const labelCounts: Record<string, number> = {};\n for (const n of data.nodes) {\n labelCounts[n.label_] = (labelCounts[n.label_] ?? 0) + 1;\n }\n const palette = buildColorPalette(labelCounts);\n const nodes = enrichNodes(data.nodes, palette);\n const edges = enrichEdges(data.edges, palette);\n stores.graphFilter.getState().resetFilters();\n stores.graphData.getState().setQueryData(nodes, edges, {\n nodes: nodes.length,\n edges: edges.length,\n });\n // Signal renderers to re-fit layout after data change\n stores.graphFilter.getState().notifyDataChange();\n}\n\n// Load initial data immediately -- no effect needed, no empty render cycle\nloadIntoStore(PLAYGROUND_STORES, INITIAL_DATA);\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport default function PlayGraph(): React.ReactElement {\n const [jsonText, setJsonText] = useState(() =>\n serializeGraphData(INITIAL_DATA),\n );\n const [parseError, setParseError] = useState<string | null>(null);\n\n const handleApply = useCallback(() => {\n let parsed: unknown;\n try {\n parsed = JSON.parse(jsonText);\n } catch (e) {\n setParseError(e instanceof Error ? e.message : \"Invalid JSON\");\n return;\n }\n const validationError = validateGraphInput(parsed);\n if (validationError) {\n setParseError(validationError);\n return;\n }\n setParseError(null);\n loadIntoStore(PLAYGROUND_STORES, parsed as GraphInput);\n }, [jsonText]);\n\n const handleReset = useCallback(() => {\n setJsonText(serializeGraphData(INITIAL_DATA));\n setParseError(null);\n loadIntoStore(PLAYGROUND_STORES, INITIAL_DATA);\n }, []);\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if ((e.metaKey || e.ctrlKey) && e.key === \"Enter\") {\n e.preventDefault();\n handleApply();\n }\n },\n [handleApply],\n );\n\n return (\n <div className=\"space-y-6\">\n <div>\n <h1>Graph Visualization</h1>\n <p className=\"text-sm text-muted-foreground mt-1\">\n Interactive property graph with dual renderer support. Edit the JSON\n data and apply to re-render.\n </p>\n </div>\n <GraphStoresContext.Provider value={PLAYGROUND_STORES}>\n <Tabs defaultValue=\"graph\" className=\"space-y-3\">\n <TabsList>\n <TabsTrigger value=\"graph\">Graph</TabsTrigger>\n <TabsTrigger value=\"data\">Data</TabsTrigger>\n </TabsList>\n\n <TabsContent value=\"graph\" className=\"mt-0\">\n <GraphRendererProvider defaultRenderer=\"cytoscape\">\n <div className=\"flex border rounded-lg overflow-hidden h-[600px]\">\n <div className=\"flex-1 min-w-0\">\n <GraphVisualizer />\n </div>\n <div className=\"w-[300px] flex-shrink-0 border-l\">\n <ActionPanel />\n </div>\n </div>\n </GraphRendererProvider>\n </TabsContent>\n\n <TabsContent value=\"data\" className=\"mt-0\">\n <div className=\"space-y-3\">\n <div className=\"flex items-center gap-2\">\n <Button size=\"sm\" onClick={handleApply}>\n <Play className=\"h-4 w-4 mr-1\" />\n Apply\n </Button>\n <Button size=\"sm\" variant=\"outline\" onClick={handleReset}>\n <RotateCcw className=\"h-4 w-4 mr-1\" />\n Reset\n </Button>\n <span className=\"text-xs text-muted-foreground ml-2\">\n Cmd+Enter to apply\n </span>\n </div>\n {parseError && (\n <Alert variant=\"destructive\">\n <AlertDescription>{parseError}</AlertDescription>\n </Alert>\n )}\n <textarea\n value={jsonText}\n onChange={(e) => setJsonText(e.target.value)}\n onKeyDown={handleKeyDown}\n spellCheck={false}\n className=\"w-full h-[600px] font-mono text-xs p-3 border rounded-lg bg-muted/30 resize-y focus:outline-none focus:ring-2 focus:ring-ring\"\n />\n </div>\n </TabsContent>\n </Tabs>\n </GraphStoresContext.Provider>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|