@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/export-dialog.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"export-dialog.mjs","names":[],"sources":["../src/export-dialog.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {FileSpreadsheet, FileText, Plus} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Button} from \"./button\";\nimport {Chip} from \"./chip\";\nimport {DateRangeTimePicker} from \"./date-picker\";\nimport {\n\tDialog,\n\tDialogContent,\n\tDialogDescription,\n\tDialogFooter,\n\tDialogHeader,\n\tDialogTitle,\n\tDialogTrigger,\n} from \"./dialog\";\nimport {Label} from \"./label\";\nimport {RadioGroup, RadioGroupItem} from \"./radio-group\";\nimport {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from \"./select\";\nimport {Switch} from \"./switch\";\n\n/* -----------------------------------------------------------------------------\n * ExportDialog — the shared \"export this list\" surface.\n *\n * One decision comes first: reuse a saved template, or build a one-off export.\n * A template already carries its file type and scope, so those controls are NOT\n * offered alongside it — picking a template shows what it will produce, read-only.\n * Choosing \"New export\" is what unlocks file type and scope. The date range applies\n * to both — a template defines shape, not the window it covers. Authoring a template\n * is a separate flow: `onCreateTemplate` renders a \"New template\" action that hands off.\n *\n * It is a dialog rather than a dropdown because those choices don't fit a menu and\n * the user needs to see them together before committing.\n *\n * Controlled or uncontrolled: pass `open`/`onOpenChange` to drive it, or hand it a\n * `trigger` and let it own its own state. `onExport` receives the resolved\n * selection — this component never performs the export itself.\n *\n * Usage:\n *\n *   <ExportDialog\n *     trigger={<Button variant=\"outline\" icon aria-label=\"Export\"><Download /></Button>}\n *     templates={[{id: \"weekly\", label: \"Weekly summary\", fileType: \"pdf\", includeFilters: true}]}\n *     activeFilterCount={3}\n *     onExport={({fileType, includeFilters, templateId, dateRange}) => …}\n *   />\n * -------------------------------------------------------------------------- */\n\nexport type ExportFileType = \"pdf\" | \"excel\";\n\nexport type ExportTemplateOption = {\n\tid: string;\n\tlabel: string;\n\t/** Optional hint shown under the template select. */\n\tdescription?: string;\n\t/** The file type this template produces. Defaults to \"pdf\". */\n\tfileType?: ExportFileType;\n\t/** Whether this template exports the filtered view. Defaults to true. */\n\tincludeFilters?: boolean;\n};\n\nexport type ExportDateRange = {from: Date | undefined; to: Date | undefined};\n\nexport type ExportSubmission = {\n\t/** Resolved file type — from the template when one is selected. */\n\tfileType: ExportFileType;\n\t/** Resolved scope — from the template when one is selected. */\n\tincludeFilters: boolean;\n\t/** Set when an existing template was chosen. */\n\ttemplateId?: string;\n\t/** Period the export covers. `from`/`to` are undefined when the user left it empty. */\n\tdateRange: ExportDateRange;\n};\n\nexport interface ExportDialogProps {\n\t/** Controlled open state. Omit to let the dialog manage its own. */\n\topen?: boolean;\n\tonOpenChange?: (open: boolean) => void;\n\t/** Element that opens the dialog. Omit when driving `open` yourself. */\n\ttrigger?: React.ReactNode;\n\t/** Saved templates to pick from. Empty/omitted leaves only the one-off export. */\n\ttemplates?: ExportTemplateOption[];\n\ttitle?: React.ReactNode;\n\tdescription?: React.ReactNode;\n\tdefaultFileType?: ExportFileType;\n\tdefaultIncludeFilters?: boolean;\n\t/** Shown beside the scope toggle so the user knows what \"current filters\" means. */\n\tactiveFilterCount?: number;\n\t/** Seeds the date range each time the dialog opens — e.g. the range already applied to the list. */\n\tdefaultDateRange?: ExportDateRange;\n\t/** When provided, a \"New template\" action renders bottom-left and hands off to the template flow. */\n\tonCreateTemplate?: () => void;\n\tnewTemplateLabel?: React.ReactNode;\n\t/** Fires on Export with the resolved selection. The dialog closes afterwards. */\n\tonExport?: (submission: ExportSubmission) => void;\n\texportLabel?: React.ReactNode;\n\tclassName?: string;\n}\n\nconst FILE_TYPES: {value: ExportFileType; label: string; icon: React.ReactNode}[] = [\n\t{value: \"pdf\", label: \"PDF\", icon: <FileText className=\"wwc:h-3.5 wwc:w-3.5\" />},\n\t{value: \"excel\", label: \"Excel\", icon: <FileSpreadsheet className=\"wwc:h-3.5 wwc:w-3.5\" />},\n];\n\nconst fileTypeLabel = (value: ExportFileType) => FILE_TYPES.find((t) => t.value === value)?.label ?? value;\n\n/** Section wrapper — each block is separated by a rule, not just whitespace. */\nfunction Section({title, children}: {title: React.ReactNode; children: React.ReactNode}) {\n\treturn (\n\t\t<div className=\"wwc:border-b wwc:px-4 wwc:py-3 wwc:last:border-b-0\">\n\t\t\t<p className=\"wwc:mb-2.5 wwc:text-xs wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground\">\n\t\t\t\t{title}\n\t\t\t</p>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n\n/** Read-only \"this is what the template produces\" row. */\nfunction SummaryRow({label, value}: {label: string; value: React.ReactNode}) {\n\treturn (\n\t\t<div className=\"wwc:flex wwc:items-center wwc:justify-between wwc:gap-3 wwc:py-1\">\n\t\t\t<span className=\"wwc:text-xs wwc:text-muted-foreground\">{label}</span>\n\t\t\t<span className=\"wwc:text-xs wwc:font-medium wwc:text-foreground\">{value}</span>\n\t\t</div>\n\t);\n}\n\nfunction ExportDialog({\n\topen,\n\tonOpenChange,\n\ttrigger,\n\ttemplates = [],\n\ttitle = \"Export\",\n\tdescription,\n\tdefaultFileType = \"pdf\",\n\tdefaultIncludeFilters = true,\n\tactiveFilterCount,\n\tdefaultDateRange,\n\tonCreateTemplate,\n\tnewTemplateLabel = \"New template\",\n\tonExport,\n\texportLabel = \"Export\",\n\tclassName,\n}: ExportDialogProps) {\n\tconst [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);\n\tconst isControlled = open !== undefined;\n\tconst isOpen = isControlled ? open : uncontrolledOpen;\n\n\tconst hasTemplates = templates.length > 0;\n\n\tconst [mode, setMode] = React.useState<\"saved\" | \"new\">(hasTemplates ? \"saved\" : \"new\");\n\tconst [templateId, setTemplateId] = React.useState<string | undefined>(templates[0]?.id);\n\t// Errors stay hidden until the first submit, so an untouched form is never pre-scolded.\n\tconst [showErrors, setShowErrors] = React.useState(false);\n\tconst [fileType, setFileType] = React.useState<ExportFileType>(defaultFileType);\n\tconst [includeFilters, setIncludeFilters] = React.useState(defaultIncludeFilters);\n\tconst [dateRange, setDateRange] = React.useState<ExportDateRange>(\n\t\tdefaultDateRange ?? {from: undefined, to: undefined},\n\t);\n\n\t// Reopening starts from the defaults again — a stale half-filled form is worse than a fresh one.\n\tconst setOpenState = React.useCallback(\n\t\t(next: boolean) => {\n\t\t\tif (next) {\n\t\t\t\tsetMode(hasTemplates ? \"saved\" : \"new\");\n\t\t\t\tsetTemplateId(templates[0]?.id);\n\t\t\t\tsetFileType(defaultFileType);\n\t\t\t\tsetIncludeFilters(defaultIncludeFilters);\n\t\t\t\tsetDateRange(defaultDateRange ?? {from: undefined, to: undefined});\n\t\t\t}\n\t\t\tif (!isControlled) setUncontrolledOpen(next);\n\t\t\tonOpenChange?.(next);\n\t\t},\n\t\t[defaultDateRange, defaultFileType, defaultIncludeFilters, hasTemplates, isControlled, onOpenChange, templates],\n\t);\n\n\tconst selectedTemplate = templates.find((t) => t.id === templateId);\n\tconst usingTemplate = mode === \"saved\" && hasTemplates;\n\n\t// A template owns its own file type and scope; the one-off export reads the live controls.\n\tconst resolvedFileType = usingTemplate ? (selectedTemplate?.fileType ?? \"pdf\") : fileType;\n\tconst resolvedIncludeFilters = usingTemplate ? (selectedTemplate?.includeFilters ?? true) : includeFilters;\n\n\tconst templateError = usingTemplate && templateId === undefined ? \"Select a template to export.\" : undefined;\n\n\tconst scopeText = (on: boolean) =>\n\t\ton\n\t\t\t? activeFilterCount !== undefined\n\t\t\t\t? `Filtered view · ${activeFilterCount} active filter${activeFilterCount === 1 ? \"\" : \"s\"}`\n\t\t\t\t: \"Filtered view\"\n\t\t\t: \"All records\";\n\n\tconst handleExport = () => {\n\t\tif (templateError) {\n\t\t\tsetShowErrors(true);\n\t\t\treturn;\n\t\t}\n\t\tonExport?.({\n\t\t\tfileType: resolvedFileType,\n\t\t\tincludeFilters: resolvedIncludeFilters,\n\t\t\ttemplateId: usingTemplate ? templateId : undefined,\n\t\t\tdateRange,\n\t\t});\n\t\tsetOpenState(false);\n\t};\n\n\t// Period applies to both modes — a template defines shape, not the window it covers.\n\tconst dateSection = (\n\t\t<Section title=\"Date range\">\n\t\t\t<DateRangeTimePicker\n\t\t\t\tdateRange={dateRange}\n\t\t\t\tonDateRangeChange={setDateRange}\n\t\t\t\tplaceholder=\"Select a date range\"\n\t\t\t\tclassName=\"wwc:h-8 wwc:w-full wwc:text-[13px]\"\n\t\t\t/>\n\t\t</Section>\n\t);\n\n\treturn (\n\t\t<Dialog open={isOpen} onOpenChange={setOpenState}>\n\t\t\t{trigger && <DialogTrigger asChild>{trigger}</DialogTrigger>}\n\t\t\t<DialogContent className={cn(\"wwc:gap-0 wwc:p-0 wwc:sm:max-w-[560px]\", className)}>\n\t\t\t\t<DialogHeader>\n\t\t\t\t\t<DialogTitle>{title}</DialogTitle>\n\t\t\t\t\t{description && <DialogDescription className=\"wwc:text-xs\">{description}</DialogDescription>}\n\t\t\t\t</DialogHeader>\n\n\t\t\t\t{/* ── What to export: a saved template, or a one-off ── */}\n\t\t\t\t{hasTemplates && (\n\t\t\t\t\t<Section title=\"Export using\">\n\t\t\t\t\t\t<RadioGroup\n\t\t\t\t\t\t\tvalue={mode}\n\t\t\t\t\t\t\tonValueChange={(v) => setMode(v as \"saved\" | \"new\")}\n\t\t\t\t\t\t\tclassName=\"wwc:grid-cols-2 wwc:gap-2\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{[\n\t\t\t\t\t\t\t\t{value: \"saved\", label: \"Saved template\"},\n\t\t\t\t\t\t\t\t{value: \"new\", label: \"New export\"},\n\t\t\t\t\t\t\t].map((option) => (\n\t\t\t\t\t\t\t\t<Label\n\t\t\t\t\t\t\t\t\tkey={option.value}\n\t\t\t\t\t\t\t\t\thtmlFor={`export-mode-${option.value}`}\n\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\"wwc:flex wwc:cursor-pointer wwc:items-center wwc:gap-2 wwc:rounded-md wwc:border wwc:px-3 wwc:py-2 wwc:text-[13px] wwc:font-normal\",\n\t\t\t\t\t\t\t\t\t\tmode === option.value ? \"wwc:border-primary wwc:bg-accent\" : \"wwc:border-border\",\n\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<RadioGroupItem id={`export-mode-${option.value}`} value={option.value} />\n\t\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</RadioGroup>\n\t\t\t\t\t</Section>\n\t\t\t\t)}\n\n\t\t\t\t{usingTemplate ? (\n\t\t\t\t\t/* ── Template: pick it, then see what it produces (not editable here) ── */\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Section title=\"Template\">\n\t\t\t\t\t\t\t<Select value={templateId} onValueChange={setTemplateId}>\n\t\t\t\t\t\t\t\t<SelectTrigger className=\"wwc:h-8 wwc:text-[13px]\">\n\t\t\t\t\t\t\t\t\t<SelectValue placeholder=\"Select a template\" />\n\t\t\t\t\t\t\t\t</SelectTrigger>\n\t\t\t\t\t\t\t\t<SelectContent>\n\t\t\t\t\t\t\t\t\t{templates.map((template) => (\n\t\t\t\t\t\t\t\t\t\t<SelectItem key={template.id} value={template.id} className=\"wwc:text-[13px]\">\n\t\t\t\t\t\t\t\t\t\t\t{template.label}\n\t\t\t\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</SelectContent>\n\t\t\t\t\t\t\t</Select>\n\t\t\t\t\t\t\t{showErrors && templateError && (\n\t\t\t\t\t\t\t\t<p className=\"wwc:mt-1.5 wwc:text-xs wwc:text-destructive\">{templateError}</p>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t{selectedTemplate?.description && (\n\t\t\t\t\t\t\t\t<p className=\"wwc:mt-1.5 wwc:text-xs wwc:text-muted-foreground\">{selectedTemplate.description}</p>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t<div className=\"wwc:mt-3 wwc:rounded-md wwc:border wwc:bg-muted/40 wwc:px-3 wwc:py-2\">\n\t\t\t\t\t\t\t\t<SummaryRow label=\"File type\" value={fileTypeLabel(resolvedFileType)} />\n\t\t\t\t\t\t\t\t<SummaryRow label=\"Scope\" value={scopeText(resolvedIncludeFilters)} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</Section>\n\t\t\t\t\t\t{dateSection}\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t/* ── One-off: file type + scope are the user's to set ── */\n\t\t\t\t\t<>\n\t\t\t\t\t\t<Section title=\"File type\">\n\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:flex-wrap wwc:gap-1.5\">\n\t\t\t\t\t\t\t\t{FILE_TYPES.map((type) => (\n\t\t\t\t\t\t\t\t\t<Chip\n\t\t\t\t\t\t\t\t\t\tkey={type.value}\n\t\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\t\tpressed={fileType === type.value}\n\t\t\t\t\t\t\t\t\t\tonPressedChange={(next) => next && setFileType(type.value)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:flex wwc:items-center wwc:gap-1.5\">\n\t\t\t\t\t\t\t\t\t\t\t{type.icon}\n\t\t\t\t\t\t\t\t\t\t\t{type.label}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</Chip>\n\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</Section>\n\n\t\t\t\t\t\t<Section title=\"Scope\">\n\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:justify-between wwc:gap-3\">\n\t\t\t\t\t\t\t\t<Label htmlFor=\"export-include-filters\" className=\"wwc:cursor-pointer wwc:font-normal\">\n\t\t\t\t\t\t\t\t\t<span className=\"wwc:block wwc:text-[13px]\">Apply current filters</span>\n\t\t\t\t\t\t\t\t\t<span className=\"wwc:block wwc:text-xs wwc:text-muted-foreground\">{scopeText(includeFilters)}</span>\n\t\t\t\t\t\t\t\t</Label>\n\t\t\t\t\t\t\t\t<Switch id=\"export-include-filters\" checked={includeFilters} onCheckedChange={setIncludeFilters} />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</Section>\n\n\t\t\t\t\t\t{dateSection}\n\t\t\t\t\t</>\n\t\t\t\t)}\n\n\t\t\t\t<DialogFooter className=\"wwc:border-t wwc:border-border wwc:px-4 wwc:py-2 wwc:sm:justify-between\">\n\t\t\t\t\t{/* Authoring a template is its own flow — this hands off, it does not export. */}\n\t\t\t\t\t{onCreateTemplate ? (\n\t\t\t\t\t\t<Button variant=\"outline\" size=\"sm\" onClick={onCreateTemplate}>\n\t\t\t\t\t\t\t<Plus className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t\t\t{newTemplateLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<span />\n\t\t\t\t\t)}\n\t\t\t\t\t<div className=\"wwc:flex wwc:items-center wwc:gap-2\">\n\t\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" onClick={() => setOpenState(false)}>\n\t\t\t\t\t\t\tCancel\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t<Button size=\"sm\" onClick={handleExport}>\n\t\t\t\t\t\t\t{exportLabel}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t</DialogFooter>\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t);\n}\nExportDialog.displayName = \"ExportDialog\";\n\nexport {ExportDialog};\n"],"mappings":";;;;;;;;;;;;;AAmGA,MAAM,aAA8E,CACnF;CAAC,OAAO;CAAO,OAAO;CAAO,MAAM,oBAAC,UAAD,EAAU,WAAU,sBAAuB,CAAA;AAAC,GAC/E;CAAC,OAAO;CAAS,OAAO;CAAS,MAAM,oBAAC,iBAAD,EAAiB,WAAU,sBAAuB,CAAA;AAAC,CAC3F;AAEA,MAAM,iBAAiB,UAA0B,WAAW,MAAM,MAAM,EAAE,UAAU,KAAK,CAAC,EAAE,SAAS;;AAGrG,SAAS,QAAQ,EAAC,OAAO,YAAgE;CACxF,OACC,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACC,oBAAC,KAAD;GAAG,WAAU;GACX,UAAA;EACC,CAAA,GACF,QACG;;AAEP;;AAGA,SAAS,WAAW,EAAC,OAAO,SAAiD;CAC5E,OACC,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACC,oBAAC,QAAD;GAAM,WAAU;GAAyC,UAAA;EAAY,CAAA,GACrE,oBAAC,QAAD;GAAM,WAAU;GAAmD,UAAA;EAAY,CAAA,CAC3E;;AAEP;AAEA,SAAS,aAAa,EACrB,MACA,cACA,SACA,YAAY,CAAC,GACb,QAAQ,UACR,aACA,kBAAkB,OAClB,wBAAwB,MACxB,mBACA,kBACA,kBACA,mBAAmB,gBACnB,UACA,cAAc,UACd,aACqB;CACrB,MAAM,CAAC,kBAAkB,uBAAuB,MAAM,SAAS,KAAK;CACpE,MAAM,eAAe,SAAS,KAAA;CAC9B,MAAM,SAAS,eAAe,OAAO;CAErC,MAAM,eAAe,UAAU,SAAS;CAExC,MAAM,CAAC,MAAM,WAAW,MAAM,SAA0B,eAAe,UAAU,KAAK;CACtF,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAA6B,UAAU,EAAE,EAAE,EAAE;CAEvF,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,KAAK;CACxD,MAAM,CAAC,UAAU,eAAe,MAAM,SAAyB,eAAe;CAC9E,MAAM,CAAC,gBAAgB,qBAAqB,MAAM,SAAS,qBAAqB;CAChF,MAAM,CAAC,WAAW,gBAAgB,MAAM,SACvC,oBAAoB;EAAC,MAAM,KAAA;EAAW,IAAI,KAAA;CAAS,CACpD;CAGA,MAAM,eAAe,MAAM,aACzB,SAAkB;EAClB,IAAI,MAAM;GACT,QAAQ,eAAe,UAAU,KAAK;GACtC,cAAc,UAAU,EAAE,EAAE,EAAE;GAC9B,YAAY,eAAe;GAC3B,kBAAkB,qBAAqB;GACvC,aAAa,oBAAoB;IAAC,MAAM,KAAA;IAAW,IAAI,KAAA;GAAS,CAAC;EAClE;EACA,IAAI,CAAC,cAAc,oBAAoB,IAAI;EAC3C,eAAe,IAAI;CACpB,GACA;EAAC;EAAkB;EAAiB;EAAuB;EAAc;EAAc;EAAc;CAAS,CAC/G;CAEA,MAAM,mBAAmB,UAAU,MAAM,MAAM,EAAE,OAAO,UAAU;CAClE,MAAM,gBAAgB,SAAS,WAAW;CAG1C,MAAM,mBAAmB,gBAAiB,kBAAkB,YAAY,QAAS;CACjF,MAAM,yBAAyB,gBAAiB,kBAAkB,kBAAkB,OAAQ;CAE5F,MAAM,gBAAgB,iBAAiB,eAAe,KAAA,IAAY,iCAAiC,KAAA;CAEnG,MAAM,aAAa,OAClB,KACG,sBAAsB,KAAA,IACrB,mBAAmB,kBAAkB,gBAAgB,sBAAsB,IAAI,KAAK,QACpF,kBACD;CAEJ,MAAM,qBAAqB;EAC1B,IAAI,eAAe;GAClB,cAAc,IAAI;GAClB;EACD;EACA,WAAW;GACV,UAAU;GACV,gBAAgB;GAChB,YAAY,gBAAgB,aAAa,KAAA;GACzC;EACD,CAAC;EACD,aAAa,KAAK;CACnB;CAGA,MAAM,cACL,oBAAC,SAAD;EAAS,OAAM;EACd,UAAA,oBAAC,qBAAD;GACY;GACX,mBAAmB;GACnB,aAAY;GACZ,WAAU;EACV,CAAA;CACO,CAAA;CAGV,OACC,qBAAC,QAAD;EAAQ,MAAM;EAAQ,cAAc;EAApC,UAAA,CACE,WAAW,oBAAC,eAAD;GAAe,SAAA;GAAS,UAAA;EAAuB,CAAA,GAC3D,qBAAC,eAAD;GAAe,WAAW,GAAG,0CAA0C,SAAS;GAAhF,UAAA;IACC,qBAAC,cAAD,EAAA,UAAA,CACC,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GAChC,eAAe,oBAAC,mBAAD;KAAmB,WAAU;KAAe,UAAA;IAA+B,CAAA,CAC9E,EAAA,CAAA;IAGb,gBACA,oBAAC,SAAD;KAAS,OAAM;KACd,UAAA,oBAAC,YAAD;MACC,OAAO;MACP,gBAAgB,MAAM,QAAQ,CAAoB;MAClD,WAAU;MAET,UAAA,CACA;OAAC,OAAO;OAAS,OAAO;MAAgB,GACxC;OAAC,OAAO;OAAO,OAAO;MAAY,CACnC,CAAC,CAAC,KAAK,WACN,qBAAC,OAAD;OAEC,SAAS,eAAe,OAAO;OAC/B,WAAW,GACV,sIACA,SAAS,OAAO,QAAQ,qCAAqC,mBAC9D;OAND,UAAA,CAQC,oBAAC,gBAAD;QAAgB,IAAI,eAAe,OAAO;QAAS,OAAO,OAAO;OAAQ,CAAA,GACxE,OAAO,KACF;MATD,GAAA,OAAO,KASN,CACP;KACU,CAAA;IACJ,CAAA;IAGT,gBAEA,qBAAA,YAAA,EAAA,UAAA,CACC,qBAAC,SAAD;KAAS,OAAM;KAAf,UAAA;MACC,qBAAC,QAAD;OAAQ,OAAO;OAAY,eAAe;OAA1C,UAAA,CACC,oBAAC,eAAD;QAAe,WAAU;QACxB,UAAA,oBAAC,aAAD,EAAa,aAAY,oBAAqB,CAAA;OAChC,CAAA,GACf,oBAAC,eAAD,EAAA,UACE,UAAU,KAAK,aACf,oBAAC,YAAD;QAA8B,OAAO,SAAS;QAAI,WAAU;QAC1D,UAAA,SAAS;OACC,GAFK,SAAS,EAEd,CACZ,EACa,CAAA,CACR;;MACP,cAAc,iBACd,oBAAC,KAAD;OAAG,WAAU;OAA+C,UAAA;MAAiB,CAAA;MAE7E,kBAAkB,eAClB,oBAAC,KAAD;OAAG,WAAU;OAAoD,UAAA,iBAAiB;MAAe,CAAA;MAElG,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACC,oBAAC,YAAD;QAAY,OAAM;QAAY,OAAO,cAAc,gBAAgB;OAAI,CAAA,GACvE,oBAAC,YAAD;QAAY,OAAM;QAAQ,OAAO,UAAU,sBAAsB;OAAI,CAAA,CACjE;;KACG;IACR,CAAA,GAAA,WACA,EAAA,CAAA,IAGF,qBAAA,YAAA,EAAA,UAAA;KACC,oBAAC,SAAD;MAAS,OAAM;MACd,UAAA,oBAAC,OAAD;OAAK,WAAU;OACb,UAAA,WAAW,KAAK,SAChB,oBAAC,MAAD;QAEC,MAAK;QACL,SAAS,aAAa,KAAK;QAC3B,kBAAkB,SAAS,QAAQ,YAAY,KAAK,KAAK;QAEzD,UAAA,qBAAC,QAAD;SAAM,WAAU;SAAhB,UAAA,CACE,KAAK,MACL,KAAK,KACD;;OACD,GATA,KAAK,KASL,CACN;MACG,CAAA;KACG,CAAA;KAET,oBAAC,SAAD;MAAS,OAAM;MACd,UAAA,qBAAC,OAAD;OAAK,WAAU;OAAf,UAAA,CACC,qBAAC,OAAD;QAAO,SAAQ;QAAyB,WAAU;QAAlD,UAAA,CACC,oBAAC,QAAD;SAAM,WAAU;SAA4B,UAAA;QAA2B,CAAA,GACvE,oBAAC,QAAD;SAAM,WAAU;SAAmD,UAAA,UAAU,cAAc;QAAQ,CAAA,CAC7F;OACP,CAAA,GAAA,oBAAC,QAAD;QAAQ,IAAG;QAAyB,SAAS;QAAgB,iBAAiB;OAAoB,CAAA,CAC9F;;KACG,CAAA;KAER;IACA,EAAA,CAAA;IAGH,qBAAC,cAAD;KAAc,WAAU;KAAxB,UAAA,CAEE,mBACA,qBAAC,QAAD;MAAQ,SAAQ;MAAU,MAAK;MAAK,SAAS;MAA7C,UAAA,CACC,oBAAC,MAAD,EAAM,WAAU,sBAAuB,CAAA,GACtC,gBACM;KAER,CAAA,IAAA,oBAAC,QAAD,CAAO,CAAA,GAER,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACC,oBAAC,QAAD;OAAQ,SAAQ;OAAQ,MAAK;OAAK,eAAe,aAAa,KAAK;OAAG,UAAA;MAE9D,CAAA,GACR,oBAAC,QAAD;OAAQ,MAAK;OAAK,SAAS;OACzB,UAAA;MACM,CAAA,CACJ;KACQ,CAAA,CAAA;;GACA;EACR,CAAA,CAAA;;AAEV;AACA,aAAa,cAAc"}

package/dist/field.d.mts

@@ -0,0 +1,11 @@
+import { LabelProps } from "./label.mjs";
+import * as React from "react";
+//#region src/field.d.ts
+/** Compound component for form field layout combining label, input, description, and error. */
+declare const Field: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FieldLabel: React.ForwardRefExoticComponent<Omit<LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FieldDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FieldError: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { Field, FieldDescription, FieldError, FieldLabel };
+//# sourceMappingURL=field.d.mts.map

package/dist/field.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.mts","names":[],"sources":["../src/field.tsx"],"mappings":";;;;cAMM,OAAK,MAAA,0BAAA,MAAA,eAAA,kBAAA,MAAA,cAAA;cAKL,YAAU,MAAA,0BAAA,KAAA,aAAA,MAAA,cAAA,4BAAA,MAAA,cAAA;cAKV,kBAAgB,MAAA,0BAAA,MAAA,eAAA,wBAAA,MAAA,cAAA;cAOhB,YAAU,MAAA,0BAAA,MAAA,eAAA,wBAAA,MAAA,cAAA"}

package/dist/field.mjs

@@ -0,0 +1,34 @@
+import { Label } from "./label.mjs";
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/field.tsx
+/** Compound component for form field layout combining label, input, description, and error. */
+const Field = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+	ref,
+	className: cn("wwc:space-y-2", className),
+	...props
+}));
+Field.displayName = "Field";
+const FieldLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Label, {
+	ref,
+	className: cn(className),
+	...props
+}));
+FieldLabel.displayName = "FieldLabel";
+const FieldDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", {
+	ref,
+	className: cn("wwc:text-sm wwc:text-muted-foreground", className),
+	...props
+}));
+FieldDescription.displayName = "FieldDescription";
+const FieldError = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("p", {
+	ref,
+	className: cn("wwc:text-sm wwc:font-medium wwc:text-destructive", className),
+	...props
+}));
+FieldError.displayName = "FieldError";
+//#endregion
+export { Field, FieldDescription, FieldError, FieldLabel };
+
+//# sourceMappingURL=field.mjs.map

package/dist/field.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.mjs","names":[],"sources":["../src/field.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport * as React from \"react\";\n\nimport {Label} from \"./label\";\n\n/** Compound component for form field layout combining label, input, description, and error. */\nconst Field = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({className, ...props}, ref) => (\n\t<div ref={ref} className={cn(\"wwc:space-y-2\", className)} {...props} />\n));\nField.displayName = \"Field\";\n\nconst FieldLabel = React.forwardRef<React.ElementRef<typeof Label>, React.ComponentPropsWithoutRef<typeof Label>>(\n\t({className, ...props}, ref) => <Label ref={ref} className={cn(className)} {...props} />,\n);\nFieldLabel.displayName = \"FieldLabel\";\n\nconst FieldDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n\t({className, ...props}, ref) => (\n\t\t<p ref={ref} className={cn(\"wwc:text-sm wwc:text-muted-foreground\", className)} {...props} />\n\t),\n);\nFieldDescription.displayName = \"FieldDescription\";\n\nconst FieldError = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n\t({className, ...props}, ref) => (\n\t\t<p ref={ref} className={cn(\"wwc:text-sm wwc:font-medium wwc:text-destructive\", className)} {...props} />\n\t),\n);\nFieldError.displayName = \"FieldError\";\n\nexport {Field, FieldLabel, FieldDescription, FieldError};\n"],"mappings":";;;;;;AAMA,MAAM,QAAQ,MAAM,YAAkE,EAAC,WAAW,GAAG,SAAQ,QAC5G,oBAAC,OAAD;CAAU;CAAK,WAAW,GAAG,iBAAiB,SAAS;CAAG,GAAI;AAAQ,CAAA,CACtE;AACD,MAAM,cAAc;AAEpB,MAAM,aAAa,MAAM,YACvB,EAAC,WAAW,GAAG,SAAQ,QAAQ,oBAAC,OAAD;CAAY;CAAK,WAAW,GAAG,SAAS;CAAG,GAAI;AAAQ,CAAA,CACxF;AACA,WAAW,cAAc;AAEzB,MAAM,mBAAmB,MAAM,YAC7B,EAAC,WAAW,GAAG,SAAQ,QACvB,oBAAC,KAAD;CAAQ;CAAK,WAAW,GAAG,yCAAyC,SAAS;CAAG,GAAI;AAAQ,CAAA,CAE9F;AACA,iBAAiB,cAAc;AAE/B,MAAM,aAAa,MAAM,YACvB,EAAC,WAAW,GAAG,SAAQ,QACvB,oBAAC,KAAD;CAAQ;CAAK,WAAW,GAAG,oDAAoD,SAAS;CAAG,GAAI;AAAQ,CAAA,CAEzG;AACA,WAAW,cAAc"}

package/dist/file-input.d.mts

@@ -0,0 +1,17 @@
+import * as React from "react";
+//#region src/file-input.d.ts
+export interface FileInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+  /** Callback when files are selected */
+  onChange?: (files: File[]) => void;
+  /** Show preview of selected files */
+  showPreview?: boolean;
+  /** Maximum file size in bytes */
+  maxSize?: number;
+  /** Custom validator function */
+  validator?: (file: File) => boolean | string;
+}
+/** A file upload input with preview and validation. */
+declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { FileInput };
+//# sourceMappingURL=file-input.d.mts.map

package/dist/file-input.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.d.mts","names":[],"sources":["../src/file-input.tsx"],"mappings":";;iBAOiB,uBAAuB,KAAK,MAAM,oBAAoB;;EAEtE,YAAY,OAAO;;EAEnB;;EAEA;;EAEA,aAAa,MAAM;;;cAId,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}

package/dist/file-input.mjs

@@ -0,0 +1,114 @@
+import { Button } from "./button.mjs";
+import { IconButton } from "./icon-button.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { Upload, X } from "lucide-react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/file-input.tsx
+/** A file upload input with preview and validation. */
+const FileInput = React.forwardRef(({ className, onChange, showPreview = true, maxSize, validator, accept, multiple, ...props }, ref) => {
+	const [files, setFiles] = React.useState([]);
+	const [errors, setErrors] = React.useState([]);
+	const inputRef = React.useRef(null);
+	const validateFile = (file) => {
+		if (maxSize && file.size > maxSize) return `File "${file.name}" is too large. Maximum size is ${formatFileSize(maxSize)}.`;
+		if (validator) {
+			const result = validator(file);
+			if (result === false) return `File "${file.name}" is invalid.`;
+			if (typeof result === "string") return result;
+		}
+		return null;
+	};
+	const handleChange = (e) => {
+		const selectedFiles = Array.from(e.target.files || []);
+		const validFiles = [];
+		const validationErrors = [];
+		selectedFiles.forEach((file) => {
+			const error = validateFile(file);
+			if (error) validationErrors.push(error);
+			else validFiles.push(file);
+		});
+		setFiles(validFiles);
+		setErrors(validationErrors);
+		onChange?.(validFiles);
+	};
+	const removeFile = (index) => {
+		const newFiles = files.filter((_, i) => i !== index);
+		setFiles(newFiles);
+		onChange?.(newFiles);
+	};
+	const handleClick = () => {
+		inputRef.current?.click();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:space-y-2", className),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: (node) => {
+					if (typeof ref === "function") ref(node);
+					else if (ref) ref.current = node;
+					inputRef.current = node;
+				},
+				type: "file",
+				className: "wwc:hidden",
+				onChange: handleChange,
+				accept,
+				multiple,
+				...props
+			}),
+			/* @__PURE__ */ jsxs(Button, {
+				type: "button",
+				variant: "outline",
+				onClick: handleClick,
+				className: "wwc:w-full",
+				children: [/* @__PURE__ */ jsx(Upload, { className: "wwc:mr-2 wwc:h-4 wwc:w-4" }), files.length > 0 ? `${files.length} file${files.length !== 1 ? "s" : ""} selected` : "Choose file" + (multiple ? "s" : "")]
+			}),
+			showPreview && files.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "wwc:space-y-2",
+				children: files.map((file, index) => /* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:items-center wwc:justify-between wwc:gap-2 wwc:p-2 wwc:rounded-md wwc:border wwc:border-border wwc:bg-muted/50",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex-1 wwc:min-w-0",
+						children: [/* @__PURE__ */ jsx("p", {
+							className: "wwc:text-sm wwc:font-medium wwc:truncate",
+							children: file.name
+						}), /* @__PURE__ */ jsx("p", {
+							className: "wwc:text-xs wwc:text-muted-foreground",
+							children: formatFileSize(file.size)
+						})]
+					}), /* @__PURE__ */ jsx(IconButton, {
+						variant: "ghost",
+						size: "sm",
+						onClick: () => removeFile(index),
+						tooltip: "Remove file",
+						children: /* @__PURE__ */ jsx(X, {})
+					})]
+				}, index))
+			}),
+			errors.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "wwc:space-y-1",
+				children: errors.map((error, index) => /* @__PURE__ */ jsx("p", {
+					className: "wwc:text-sm wwc:text-destructive",
+					children: error
+				}, index))
+			})
+		]
+	});
+});
+FileInput.displayName = "FileInput";
+function formatFileSize(bytes) {
+	if (bytes === 0) return "0 B";
+	const k = 1024;
+	const sizes = [
+		"B",
+		"KB",
+		"MB",
+		"GB"
+	];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+}
+//#endregion
+export { FileInput };
+
+//# sourceMappingURL=file-input.mjs.map

package/dist/file-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.mjs","names":[],"sources":["../src/file-input.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {Upload, X} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport {Button} from \"./button\";\nimport {IconButton} from \"./icon-button\";\n\nexport interface FileInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"type\" | \"onChange\"> {\n\t/** Callback when files are selected */\n\tonChange?: (files: File[]) => void;\n\t/** Show preview of selected files */\n\tshowPreview?: boolean;\n\t/** Maximum file size in bytes */\n\tmaxSize?: number;\n\t/** Custom validator function */\n\tvalidator?: (file: File) => boolean | string;\n}\n\n/** A file upload input with preview and validation. */\nconst FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(\n\t({className, onChange, showPreview = true, maxSize, validator, accept, multiple, ...props}, ref) => {\n\t\tconst [files, setFiles] = React.useState<File[]>([]);\n\t\tconst [errors, setErrors] = React.useState<string[]>([]);\n\t\tconst inputRef = React.useRef<HTMLInputElement>(null);\n\n\t\tconst validateFile = (file: File): string | null => {\n\t\t\tif (maxSize && file.size > maxSize) {\n\t\t\t\treturn `File \"${file.name}\" is too large. Maximum size is ${formatFileSize(maxSize)}.`;\n\t\t\t}\n\n\t\t\tif (validator) {\n\t\t\t\tconst result = validator(file);\n\t\t\t\tif (result === false) return `File \"${file.name}\" is invalid.`;\n\t\t\t\tif (typeof result === \"string\") return result;\n\t\t\t}\n\n\t\t\treturn null;\n\t\t};\n\n\t\tconst handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n\t\t\tconst selectedFiles = Array.from(e.target.files || []);\n\t\t\tconst validFiles: File[] = [];\n\t\t\tconst validationErrors: string[] = [];\n\n\t\t\tselectedFiles.forEach((file) => {\n\t\t\t\tconst error = validateFile(file);\n\t\t\t\tif (error) {\n\t\t\t\t\tvalidationErrors.push(error);\n\t\t\t\t} else {\n\t\t\t\t\tvalidFiles.push(file);\n\t\t\t\t}\n\t\t\t});\n\n\t\t\tsetFiles(validFiles);\n\t\t\tsetErrors(validationErrors);\n\t\t\tonChange?.(validFiles);\n\t\t};\n\n\t\tconst removeFile = (index: number) => {\n\t\t\tconst newFiles = files.filter((_, i) => i !== index);\n\t\t\tsetFiles(newFiles);\n\t\t\tonChange?.(newFiles);\n\t\t};\n\n\t\tconst handleClick = () => {\n\t\t\tinputRef.current?.click();\n\t\t};\n\n\t\treturn (\n\t\t\t<div className={cn(\"wwc:space-y-2\", className)}>\n\t\t\t\t<input\n\t\t\t\t\tref={(node) => {\n\t\t\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\t\t\tref(node);\n\t\t\t\t\t\t} else if (ref) {\n\t\t\t\t\t\t\tref.current = node;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\tinputRef.current = node;\n\t\t\t\t\t}}\n\t\t\t\t\ttype=\"file\"\n\t\t\t\t\tclassName=\"wwc:hidden\"\n\t\t\t\t\tonChange={handleChange}\n\t\t\t\t\taccept={accept}\n\t\t\t\t\tmultiple={multiple}\n\t\t\t\t\t{...props}\n\t\t\t\t/>\n\n\t\t\t\t<Button type=\"button\" variant=\"outline\" onClick={handleClick} className=\"wwc:w-full\">\n\t\t\t\t\t<Upload className=\"wwc:mr-2 wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t{files.length > 0\n\t\t\t\t\t\t? `${files.length} file${files.length !== 1 ? \"s\" : \"\"} selected`\n\t\t\t\t\t\t: \"Choose file\" + (multiple ? \"s\" : \"\")}\n\t\t\t\t</Button>\n\n\t\t\t\t{showPreview && files.length > 0 && (\n\t\t\t\t\t<div className=\"wwc:space-y-2\">\n\t\t\t\t\t\t{files.map((file, index) => (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\tclassName=\"wwc:flex wwc:items-center wwc:justify-between wwc:gap-2 wwc:p-2 wwc:rounded-md wwc:border wwc:border-border wwc:bg-muted/50\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"wwc:flex-1 wwc:min-w-0\">\n\t\t\t\t\t\t\t\t\t<p className=\"wwc:text-sm wwc:font-medium wwc:truncate\">{file.name}</p>\n\t\t\t\t\t\t\t\t\t<p className=\"wwc:text-xs wwc:text-muted-foreground\">{formatFileSize(file.size)}</p>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t<IconButton variant=\"ghost\" size=\"sm\" onClick={() => removeFile(index)} tooltip=\"Remove file\">\n\t\t\t\t\t\t\t\t\t<X />\n\t\t\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{errors.length > 0 && (\n\t\t\t\t\t<div className=\"wwc:space-y-1\">\n\t\t\t\t\t\t{errors.map((error, index) => (\n\t\t\t\t\t\t\t<p key={index} className=\"wwc:text-sm wwc:text-destructive\">\n\t\t\t\t\t\t\t\t{error}\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t},\n);\nFileInput.displayName = \"FileInput\";\n\nfunction formatFileSize(bytes: number): string {\n\tif (bytes === 0) return \"0 B\";\n\tconst k = 1024;\n\tconst sizes = [\"B\", \"KB\", \"MB\", \"GB\"];\n\tconst i = Math.floor(Math.log(bytes) / Math.log(k));\n\treturn `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;\n}\n\nexport {FileInput};\n"],"mappings":"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"}

package/dist/file-system/context.d.mts

@@ -0,0 +1,28 @@
+import { FileSystemFileType, FileSystemIndex, FileSystemNode } from "./model.mjs";
+//#region src/file-system/context.d.ts
+export type FileSystemContextValue = {
+  index: FileSystemIndex;
+  rootId: string;
+  fileTypes: FileSystemFileType[];
+  byType: Map<string, FileSystemFileType>;
+  /** Names the open action for a file, e.g. "Open in Pipelines". `undefined` = nothing opens it. */
+  openLabel?: (node: FileSystemNode) => string | undefined;
+  onOpenFile?: (node: FileSystemNode) => void;
+};
+export declare const FileSystemProvider: import("react").Provider<FileSystemContextValue | null>;
+export declare function useFileSystem(): FileSystemContextValue;
+/** A container is not a type, so it takes a neutral tone rather than borrowing a hue from one. */
+export declare const CONTAINER_TONE = "wwc:bg-muted wwc:text-foreground/70";
+/**
+ * A node's mark: the host's icon for its file type, an open folder for a project — a container you
+ * are looking inside — and a closed one for a folder, which you are looking at.
+ */
+export declare function useNodeIcon(node: FileSystemNode): import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>> | import("react").ComponentType<{
+  className?: string;
+}>;
+/** The tint behind that mark. Containers are neutral; a file takes its type's tone. */
+export declare function useNodeTone(node: FileSystemNode): string;
+/** A file type's label, falling back to its id so an unregistered type is visible rather than blank. */
+export declare function useTypeLabel(): (node: FileSystemNode) => string;
+//#endregion
+//# sourceMappingURL=context.d.mts.map

package/dist/file-system/context.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.mts","names":[],"sources":["../../src/file-system/context.tsx"],"mappings":";;YAYY;EACX,OAAO;EACP;EACA,WAAW;EACX,QAAQ,YAAY;;EAEpB,aAAa,MAAM;EACnB,cAAc,MAAM;;qBAKR,oCAAkB,SAAA;wBAEf,iBAAiB;;qBAOpB;;;;;wBAMG,YAAY,MAAM,iCAAc,0BAAA,4BAAA,sCAAA,cAAA,kCAAA;;;;wBAQhC,YAAY,MAAM;;wBAOlB,iBAAiB,MAAM"}

package/dist/file-system/context.mjs

@@ -0,0 +1,42 @@
+import { Folder, FolderOpen } from "lucide-react";
+import { createContext, useContext } from "react";
+//#region src/file-system/context.tsx
+const FileSystemContext = createContext(null);
+const FileSystemProvider = FileSystemContext.Provider;
+function useFileSystem() {
+	const value = useContext(FileSystemContext);
+	if (!value) throw new Error("FileSystem surfaces must be rendered inside <FileSystem>.");
+	return value;
+}
+/** A container is not a type, so it takes a neutral tone rather than borrowing a hue from one. */
+const CONTAINER_TONE = "wwc:bg-muted wwc:text-foreground/70";
+/**
+* A node's mark: the host's icon for its file type, an open folder for a project — a container you
+* are looking inside — and a closed one for a folder, which you are looking at.
+*/
+function useNodeIcon(node) {
+	const { byType } = useFileSystem();
+	if (node.kind === "project") return FolderOpen;
+	if (node.kind !== "file") return Folder;
+	return (node.fileType ? byType.get(node.fileType)?.icon : void 0) ?? Folder;
+}
+/** The tint behind that mark. Containers are neutral; a file takes its type's tone. */
+function useNodeTone(node) {
+	const { byType } = useFileSystem();
+	if (node.kind !== "file") return CONTAINER_TONE;
+	return (node.fileType ? byType.get(node.fileType)?.tone : void 0) ?? "wwc:bg-muted wwc:text-foreground/70";
+}
+/** A file type's label, falling back to its id so an unregistered type is visible rather than blank. */
+function useTypeLabel() {
+	const { byType } = useFileSystem();
+	return (node) => {
+		if (node.kind === "project") return "Project";
+		if (node.kind === "folder") return "Folder";
+		if (!node.fileType) return "File";
+		return byType.get(node.fileType)?.label ?? node.fileType;
+	};
+}
+//#endregion
+export { CONTAINER_TONE, FileSystemProvider, useFileSystem, useNodeIcon, useNodeTone, useTypeLabel };
+
+//# sourceMappingURL=context.mjs.map

package/dist/file-system/context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.mjs","names":[],"sources":["../../src/file-system/context.tsx"],"sourcesContent":["import {Folder, FolderOpen} from \"lucide-react\";\nimport {createContext, useContext} from \"react\";\n\nimport type {FileSystemFileType, FileSystemIndex, FileSystemNode} from \"./model\";\n\n// What every surface inside the widget needs and none of them should be handed one prop at a time:\n// the index, the host's file types, and the two questions only the host can answer — what opening a\n// file is called, and what happens when one is opened.\n//\n// Internal. The widget's public API is its props; this is how those props reach six components\n// without six identical prop chains, each of which would be a chance for two surfaces to disagree.\n\nexport type FileSystemContextValue = {\n\tindex: FileSystemIndex;\n\trootId: string;\n\tfileTypes: FileSystemFileType[];\n\tbyType: Map<string, FileSystemFileType>;\n\t/** Names the open action for a file, e.g. \"Open in Pipelines\". `undefined` = nothing opens it. */\n\topenLabel?: (node: FileSystemNode) => string | undefined;\n\tonOpenFile?: (node: FileSystemNode) => void;\n};\n\nconst FileSystemContext = createContext<FileSystemContextValue | null>(null);\n\nexport const FileSystemProvider = FileSystemContext.Provider;\n\nexport function useFileSystem(): FileSystemContextValue {\n\tconst value = useContext(FileSystemContext);\n\tif (!value) throw new Error(\"FileSystem surfaces must be rendered inside <FileSystem>.\");\n\treturn value;\n}\n\n/** A container is not a type, so it takes a neutral tone rather than borrowing a hue from one. */\nexport const CONTAINER_TONE = \"wwc:bg-muted wwc:text-foreground/70\";\n\n/**\n * A node's mark: the host's icon for its file type, an open folder for a project — a container you\n * are looking inside — and a closed one for a folder, which you are looking at.\n */\nexport function useNodeIcon(node: FileSystemNode) {\n\tconst {byType} = useFileSystem();\n\tif (node.kind === \"project\") return FolderOpen;\n\tif (node.kind !== \"file\") return Folder;\n\treturn (node.fileType ? byType.get(node.fileType)?.icon : undefined) ?? Folder;\n}\n\n/** The tint behind that mark. Containers are neutral; a file takes its type's tone. */\nexport function useNodeTone(node: FileSystemNode): string {\n\tconst {byType} = useFileSystem();\n\tif (node.kind !== \"file\") return CONTAINER_TONE;\n\treturn (node.fileType ? byType.get(node.fileType)?.tone : undefined) ?? CONTAINER_TONE;\n}\n\n/** A file type's label, falling back to its id so an unregistered type is visible rather than blank. */\nexport function useTypeLabel(): (node: FileSystemNode) => string {\n\tconst {byType} = useFileSystem();\n\treturn (node) => {\n\t\tif (node.kind === \"project\") return \"Project\";\n\t\tif (node.kind === \"folder\") return \"Folder\";\n\t\tif (!node.fileType) return \"File\";\n\t\treturn byType.get(node.fileType)?.label ?? node.fileType;\n\t};\n}\n"],"mappings":";;;AAsBA,MAAM,oBAAoB,cAA6C,IAAI;AAE3E,MAAa,qBAAqB,kBAAkB;AAEpD,SAAgB,gBAAwC;CACvD,MAAM,QAAQ,WAAW,iBAAiB;CAC1C,IAAI,CAAC,OAAO,MAAM,IAAI,MAAM,2DAA2D;CACvF,OAAO;AACR;;AAGA,MAAa,iBAAiB;;;;;AAM9B,SAAgB,YAAY,MAAsB;CACjD,MAAM,EAAC,WAAU,cAAc;CAC/B,IAAI,KAAK,SAAS,WAAW,OAAO;CACpC,IAAI,KAAK,SAAS,QAAQ,OAAO;CACjC,QAAQ,KAAK,WAAW,OAAO,IAAI,KAAK,QAAQ,CAAC,EAAE,OAAO,KAAA,MAAc;AACzE;;AAGA,SAAgB,YAAY,MAA8B;CACzD,MAAM,EAAC,WAAU,cAAc;CAC/B,IAAI,KAAK,SAAS,QAAQ,OAAO;CACjC,QAAQ,KAAK,WAAW,OAAO,IAAI,KAAK,QAAQ,CAAC,EAAE,OAAO,KAAA,MAAA;AAC3D;;AAGA,SAAgB,eAAiD;CAChE,MAAM,EAAC,WAAU,cAAc;CAC/B,QAAQ,SAAS;EAChB,IAAI,KAAK,SAAS,WAAW,OAAO;EACpC,IAAI,KAAK,SAAS,UAAU,OAAO;EACnC,IAAI,CAAC,KAAK,UAAU,OAAO;EAC3B,OAAO,OAAO,IAAI,KAAK,QAAQ,CAAC,EAAE,SAAS,KAAK;CACjD;AACD"}

package/dist/file-system/file-system-details.d.mts

@@ -0,0 +1,12 @@
+import { FileSystemNode } from "./model.mjs";
+//#region src/file-system/file-system-details.d.ts
+export interface FileSystemDetailsProps {
+  node: FileSystemNode;
+  onClose: () => void;
+  /** Open this project's page. Only passed for a project node. */
+  onOpenProject?: (node: FileSystemNode) => void;
+  className?: string;
+}
+export declare function FileSystemDetails({ node, onClose, onOpenProject, className }: FileSystemDetailsProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=file-system-details.d.mts.map

package/dist/file-system/file-system-details.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-system-details.d.mts","names":[],"sources":["../../src/file-system/file-system-details.tsx"],"mappings":";;iBAmBiB;EAChB,MAAM;EACN;;EAEA,iBAAiB,MAAM;EACvB;;wBAGe,oBAAmB,MAAM,SAAS,eAAe,aAAY,qDAAsB,IAAA"}

package/dist/file-system/file-system-details.mjs

@@ -0,0 +1,166 @@
+import { Badge } from "../badge.mjs";
+import { Button } from "../button.mjs";
+import { ScrollArea } from "../scroll-area.mjs";
+import { Separator } from "../separator.mjs";
+import { useFileSystem, useNodeIcon, useNodeTone, useTypeLabel } from "./context.mjs";
+import { FileSystemPathText } from "./file-system-path.mjs";
+import { fsAncestors, fsDescendants, fsFolderPath, fsPath } from "./model.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ArrowUpRight, Check, Copy, X } from "lucide-react";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/file-system/file-system-details.tsx
+function FileSystemDetails({ node, onClose, onOpenProject, className }) {
+	const { index, openLabel, onOpenFile } = useFileSystem();
+	const Icon = useNodeIcon(node);
+	const tone = useNodeTone(node);
+	const typeLabel = useTypeLabel();
+	const isProject = node.kind === "project";
+	const project = isProject ? node : fsAncestors(index, node.id).find((a) => a.kind === "project");
+	const fileCount = isProject ? fsDescendants(index, node.id).filter((n) => n.kind === "file" && !n.trashed).length : 0;
+	const label = node.ref !== void 0 ? openLabel?.(node) : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:flex wwc:h-full wwc:flex-col wwc:border-l wwc:border-border wwc:bg-card", className),
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "wwc:flex wwc:flex-shrink-0 wwc:items-center wwc:gap-2 wwc:border-b wwc:border-border wwc:px-3 wwc:py-2.5",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "wwc:flex-1 wwc:text-[13px] wwc:font-medium",
+				children: "Overview"
+			}), /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				icon: true,
+				size: "sm",
+				"aria-label": "Close details",
+				onClick: onClose,
+				className: "wwc:h-6 wwc:w-6 wwc:text-muted-foreground",
+				children: /* @__PURE__ */ jsx(X, { className: "wwc:h-3.5 wwc:w-3.5" })
+			})]
+		}), /* @__PURE__ */ jsx(ScrollArea, {
+			fitWidth: true,
+			className: "wwc:min-h-0 wwc:flex-1",
+			scrollbarClassName: "wwc:w-2",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "wwc:flex wwc:w-full wwc:min-w-0 wwc:flex-col wwc:gap-4 wwc:p-3 wwc:pr-4",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:min-w-0 wwc:items-start wwc:gap-2.5",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: cn("wwc:flex wwc:h-7 wwc:w-7 wwc:shrink-0 wwc:items-center wwc:justify-center wwc:rounded-md", tone),
+							children: /* @__PURE__ */ jsx(Icon, { className: "wwc:h-4 wwc:w-4" })
+						}), /* @__PURE__ */ jsx("span", {
+							className: "wwc:min-w-0 wwc:pt-0.5 wwc:text-[15px] wwc:font-semibold wwc:leading-snug",
+							children: node.name
+						})]
+					}),
+					(label || isProject && onOpenProject) && /* @__PURE__ */ jsxs(Button, {
+						size: "sm",
+						className: "wwc:w-full wwc:gap-1.5",
+						onClick: () => isProject ? onOpenProject?.(node) : onOpenFile?.(node),
+						children: [/* @__PURE__ */ jsx(ArrowUpRight, { className: "wwc:h-3.5 wwc:w-3.5" }), isProject ? "Open project" : label]
+					}),
+					node.description && /* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:flex-col wwc:gap-1",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "wwc:text-[12px] wwc:font-medium wwc:text-foreground",
+							children: "Description"
+						}), /* @__PURE__ */ jsx("p", {
+							className: "wwc:text-[13px] wwc:leading-relaxed wwc:text-foreground",
+							children: node.description
+						})]
+					}),
+					/* @__PURE__ */ jsx(Separator, {}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "wwc:flex wwc:flex-col wwc:gap-3",
+						children: [
+							/* @__PURE__ */ jsx(Row, {
+								label: "Type",
+								children: typeLabel(node)
+							}),
+							!isProject && /* @__PURE__ */ jsx(Row, {
+								label: "Location",
+								children: /* @__PURE__ */ jsxs("div", {
+									className: "wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-1",
+									children: [/* @__PURE__ */ jsx(FileSystemPathText, {
+										path: fsFolderPath(index, node.id),
+										className: "wwc:text-[12px] wwc:text-muted-foreground"
+									}), /* @__PURE__ */ jsx(CopyButton, {
+										value: fsPath(index, node.id),
+										label: "Copy path"
+									})]
+								})
+							}),
+							project && !isProject && /* @__PURE__ */ jsx(Row, {
+								label: "Project",
+								children: project.name
+							}),
+							isProject && /* @__PURE__ */ jsx(Row, {
+								label: "Files",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "wwc:tabular-nums",
+									children: fileCount
+								})
+							}),
+							/* @__PURE__ */ jsx(Row, {
+								label: "Tags",
+								children: node.tags?.length ? /* @__PURE__ */ jsx("div", {
+									className: "wwc:flex wwc:flex-wrap wwc:gap-1",
+									children: node.tags.map((tag) => /* @__PURE__ */ jsx(Badge, {
+										variant: "secondary",
+										className: "wwc:text-[11px] wwc:font-normal",
+										children: tag
+									}, tag))
+								}) : /* @__PURE__ */ jsx("span", {
+									className: "wwc:italic wwc:text-muted-foreground",
+									children: "No tags"
+								})
+							}),
+							/* @__PURE__ */ jsx(Row, {
+								label: "Last modified",
+								children: node.updatedAt
+							})
+						]
+					})
+				]
+			})
+		})]
+	});
+}
+/** One metadata pair. The label column is fixed so every value lines up down the panel. */
+function Row({ label, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "wwc:flex wwc:min-w-0 wwc:items-start wwc:gap-3",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "wwc:w-[92px] wwc:shrink-0 wwc:pt-px wwc:text-[12px] wwc:text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: "wwc:min-w-0 wwc:flex-1 wwc:text-[13px] wwc:text-foreground",
+			children
+		})]
+	});
+}
+/**
+* Copy, with the tick that says it happened. `navigator.clipboard` is absent over plain HTTP and can
+* reject when the document is not focused, so the failure path leaves the button alone rather than
+* claiming a copy that did not occur.
+*/
+function CopyButton({ value, label }) {
+	const [copied, setCopied] = useState(false);
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		icon: true,
+		size: "sm",
+		"aria-label": label,
+		className: "wwc:h-5 wwc:w-5 wwc:shrink-0 wwc:text-muted-foreground",
+		onClick: () => {
+			navigator.clipboard?.writeText(value).then(() => {
+				setCopied(true);
+				setTimeout(() => setCopied(false), 1500);
+			}).catch(() => void 0);
+		},
+		children: copied ? /* @__PURE__ */ jsx(Check, { className: "wwc:h-3 wwc:w-3" }) : /* @__PURE__ */ jsx(Copy, { className: "wwc:h-3 wwc:w-3" })
+	});
+}
+//#endregion
+export { FileSystemDetails };
+
+//# sourceMappingURL=file-system-details.mjs.map

package/dist/file-system/file-system-details.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-system-details.mjs","names":[],"sources":["../../src/file-system/file-system-details.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {ArrowUpRight, Check, Copy, X} from \"lucide-react\";\nimport {useState} from \"react\";\n\nimport {Badge} from \"../badge\";\nimport {Button} from \"../button\";\nimport {ScrollArea} from \"../scroll-area\";\nimport {Separator} from \"../separator\";\nimport {useFileSystem, useNodeIcon, useNodeTone, useTypeLabel} from \"./context\";\nimport {FileSystemPathText} from \"./file-system-path\";\nimport {fsAncestors, fsDescendants, fsFolderPath, fsPath, type FileSystemNode} from \"./model\";\n\n// The details panel: what a row IS, without leaving the list to find out.\n//\n// Selecting a row fills this in; nothing here navigates unless the reader asks. That split is the\n// point — \"what is this?\" and \"take me there\" are different questions, and answering the first by\n// performing the second is what makes a file browser feel like a trapdoor. The one way out is the\n// action at the top, which names its destination.\n\nexport interface FileSystemDetailsProps {\n\tnode: FileSystemNode;\n\tonClose: () => void;\n\t/** Open this project's page. Only passed for a project node. */\n\tonOpenProject?: (node: FileSystemNode) => void;\n\tclassName?: string;\n}\n\nexport function FileSystemDetails({node, onClose, onOpenProject, className}: FileSystemDetailsProps) {\n\tconst {index, openLabel, onOpenFile} = useFileSystem();\n\tconst Icon = useNodeIcon(node);\n\tconst tone = useNodeTone(node);\n\tconst typeLabel = useTypeLabel();\n\n\tconst isProject = node.kind === \"project\";\n\tconst project = isProject ? node : fsAncestors(index, node.id).find((a) => a.kind === \"project\");\n\tconst fileCount = isProject ? fsDescendants(index, node.id).filter((n) => n.kind === \"file\" && !n.trashed).length : 0;\n\tconst label = node.ref !== undefined ? openLabel?.(node) : undefined;\n\n\treturn (\n\t\t<div className={cn(\"wwc:flex wwc:h-full wwc:flex-col wwc:border-l wwc:border-border wwc:bg-card\", className)}>\n\t\t\t<div className=\"wwc:flex wwc:flex-shrink-0 wwc:items-center wwc:gap-2 wwc:border-b wwc:border-border wwc:px-3 wwc:py-2.5\">\n\t\t\t\t<span className=\"wwc:flex-1 wwc:text-[13px] wwc:font-medium\">Overview</span>\n\t\t\t\t<Button\n\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\ticon\n\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\taria-label=\"Close details\"\n\t\t\t\t\tonClick={onClose}\n\t\t\t\t\tclassName=\"wwc:h-6 wwc:w-6 wwc:text-muted-foreground\"\n\t\t\t\t>\n\t\t\t\t\t<X className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t</Button>\n\t\t\t</div>\n\n\t\t\t{/* `fitWidth`: without it Radix sizes this child to its content, and a long path pushes the\n\t\t\t    whole body — button included — past the panel's own right edge. */}\n\t\t\t<ScrollArea fitWidth className=\"wwc:min-h-0 wwc:flex-1\" scrollbarClassName=\"wwc:w-2\">\n\t\t\t\t<div className=\"wwc:flex wwc:w-full wwc:min-w-0 wwc:flex-col wwc:gap-4 wwc:p-3 wwc:pr-4\">\n\t\t\t\t\t<div className=\"wwc:flex wwc:min-w-0 wwc:items-start wwc:gap-2.5\">\n\t\t\t\t\t\t<span\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"wwc:flex wwc:h-7 wwc:w-7 wwc:shrink-0 wwc:items-center wwc:justify-center wwc:rounded-md\",\n\t\t\t\t\t\t\t\ttone,\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon className=\"wwc:h-4 wwc:w-4\" />\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span className=\"wwc:min-w-0 wwc:pt-0.5 wwc:text-[15px] wwc:font-semibold wwc:leading-snug\">\n\t\t\t\t\t\t\t{node.name}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{(label || (isProject && onOpenProject)) && (\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\tclassName=\"wwc:w-full wwc:gap-1.5\"\n\t\t\t\t\t\t\tonClick={() => (isProject ? onOpenProject?.(node) : onOpenFile?.(node))}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<ArrowUpRight className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t\t\t{isProject ? \"Open project\" : label}\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{node.description && (\n\t\t\t\t\t\t<div className=\"wwc:flex wwc:flex-col wwc:gap-1\">\n\t\t\t\t\t\t\t<span className=\"wwc:text-[12px] wwc:font-medium wwc:text-foreground\">Description</span>\n\t\t\t\t\t\t\t<p className=\"wwc:text-[13px] wwc:leading-relaxed wwc:text-foreground\">{node.description}</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t<Separator />\n\n\t\t\t\t\t<div className=\"wwc:flex wwc:flex-col wwc:gap-3\">\n\t\t\t\t\t\t<Row label=\"Type\">{typeLabel(node)}</Row>\n\n\t\t\t\t\t\t{/* A project sits at the top level — it IS the location, so it has none to print. */}\n\t\t\t\t\t\t{!isProject && (\n\t\t\t\t\t\t\t<Row label=\"Location\">\n\t\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:min-w-0 wwc:items-center wwc:gap-1\">\n\t\t\t\t\t\t\t\t\t<FileSystemPathText\n\t\t\t\t\t\t\t\t\t\tpath={fsFolderPath(index, node.id)}\n\t\t\t\t\t\t\t\t\t\tclassName=\"wwc:text-[12px] wwc:text-muted-foreground\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t<CopyButton value={fsPath(index, node.id)} label=\"Copy path\" />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{project && !isProject && <Row label=\"Project\">{project.name}</Row>}\n\n\t\t\t\t\t\t{isProject && (\n\t\t\t\t\t\t\t<Row label=\"Files\">\n\t\t\t\t\t\t\t\t<span className=\"wwc:tabular-nums\">{fileCount}</span>\n\t\t\t\t\t\t\t</Row>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t<Row label=\"Tags\">\n\t\t\t\t\t\t\t{node.tags?.length ? (\n\t\t\t\t\t\t\t\t<div className=\"wwc:flex wwc:flex-wrap wwc:gap-1\">\n\t\t\t\t\t\t\t\t\t{node.tags.map((tag) => (\n\t\t\t\t\t\t\t\t\t\t<Badge key={tag} variant=\"secondary\" className=\"wwc:text-[11px] wwc:font-normal\">\n\t\t\t\t\t\t\t\t\t\t\t{tag}\n\t\t\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t<span className=\"wwc:italic wwc:text-muted-foreground\">No tags</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Row>\n\n\t\t\t\t\t\t<Row label=\"Last modified\">{node.updatedAt}</Row>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</ScrollArea>\n\t\t</div>\n\t);\n}\n\n/** One metadata pair. The label column is fixed so every value lines up down the panel. */\nfunction Row({label, children}: {label: string; children: React.ReactNode}) {\n\treturn (\n\t\t<div className=\"wwc:flex wwc:min-w-0 wwc:items-start wwc:gap-3\">\n\t\t\t<span className=\"wwc:w-[92px] wwc:shrink-0 wwc:pt-px wwc:text-[12px] wwc:text-muted-foreground\">{label}</span>\n\t\t\t<div className=\"wwc:min-w-0 wwc:flex-1 wwc:text-[13px] wwc:text-foreground\">{children}</div>\n\t\t</div>\n\t);\n}\n\n/**\n * Copy, with the tick that says it happened. `navigator.clipboard` is absent over plain HTTP and can\n * reject when the document is not focused, so the failure path leaves the button alone rather than\n * claiming a copy that did not occur.\n */\nfunction CopyButton({value, label}: {value: string; label: string}) {\n\tconst [copied, setCopied] = useState(false);\n\treturn (\n\t\t<Button\n\t\t\tvariant=\"ghost\"\n\t\t\ticon\n\t\t\tsize=\"sm\"\n\t\t\taria-label={label}\n\t\t\tclassName=\"wwc:h-5 wwc:w-5 wwc:shrink-0 wwc:text-muted-foreground\"\n\t\t\tonClick={() => {\n\t\t\t\tnavigator.clipboard\n\t\t\t\t\t?.writeText(value)\n\t\t\t\t\t.then(() => {\n\t\t\t\t\t\tsetCopied(true);\n\t\t\t\t\t\tsetTimeout(() => setCopied(false), 1500);\n\t\t\t\t\t})\n\t\t\t\t\t.catch(() => undefined);\n\t\t\t}}\n\t\t>\n\t\t\t{copied ? <Check className=\"wwc:h-3 wwc:w-3\" /> : <Copy className=\"wwc:h-3 wwc:w-3\" />}\n\t\t</Button>\n\t);\n}\n"],"mappings":"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"}

package/dist/file-system/file-system-filters.d.mts

@@ -0,0 +1,16 @@
+//#region src/file-system/file-system-filters.d.ts
+export type FileSystemFilterValue = {
+  types: string[];
+  projectIds: string[];
+  tags: string[];
+};
+export declare const FILE_SYSTEM_NO_FILTERS: FileSystemFilterValue;
+export declare function fileSystemFilterCount(filters: FileSystemFilterValue): number;
+export interface FileSystemFiltersProps {
+  value: FileSystemFilterValue;
+  onChange: (next: FileSystemFilterValue) => void;
+  className?: string;
+}
+export declare function FileSystemFilters({ value, onChange, className }: FileSystemFiltersProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=file-system-filters.d.mts.map

package/dist/file-system/file-system-filters.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-system-filters.d.mts","names":[],"sources":["../../src/file-system/file-system-filters.tsx"],"mappings":";YAsBY;EACX;EACA;EACA;;qBAGY,wBAAwB;wBAErB,sBAAsB,SAAS;iBAI9B;EAChB,OAAO;EACP,WAAW,MAAM;EACjB;;wBAGe,oBAAmB,OAAO,UAAU,aAAY,qDAAsB,IAAA"}