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

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

@@ -0,0 +1,205 @@
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../accordion.mjs";
+import { Button } from "../button.mjs";
+import { ScrollArea } from "../scroll-area.mjs";
+import { Input } from "../input.mjs";
+import { Checkbox } from "../checkbox.mjs";
+import { useFileSystem } from "./context.mjs";
+import { fsProjectCounts, fsTagCounts, fsTypeCounts } from "./model.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { SlidersHorizontal, X } from "lucide-react";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/file-system/file-system-filters.tsx
+const FILE_SYSTEM_NO_FILTERS = {
+	types: [],
+	projectIds: [],
+	tags: []
+};
+function fileSystemFilterCount(filters) {
+	return filters.types.length + filters.projectIds.length + filters.tags.length;
+}
+function FileSystemFilters({ value, onChange, className }) {
+	const { index, rootId, byType } = useFileSystem();
+	const types = useMemo(() => fsTypeCounts(index, rootId), [index, rootId]);
+	const projects = useMemo(() => fsProjectCounts(index, rootId), [index, rootId]);
+	const tags = useMemo(() => fsTagCounts(index, rootId), [index, rootId]);
+	const [typeQuery, setTypeQuery] = useState("");
+	const [projectQuery, setProjectQuery] = useState("");
+	const [tagQuery, setTagQuery] = useState("");
+	const applied = fileSystemFilterCount(value);
+	const toggle = (list, item) => list.includes(item) ? list.filter((x) => x !== item) : [...list, item];
+	const match = (text, q) => text.toLowerCase().includes(q.trim().toLowerCase());
+	const shownTypes = types.filter((t) => match(byType.get(t.type)?.label ?? t.type, typeQuery));
+	const shownProjects = projects.filter((p) => match(p.label, projectQuery));
+	const shownTags = tags.filter((t) => match(t.tag, tagQuery));
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("wwc:flex wwc:h-full wwc:flex-col 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(SlidersHorizontal, { className: "wwc:h-3.5 wwc:w-3.5 wwc:shrink-0 wwc:text-muted-foreground" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "wwc:flex-1 wwc:text-[13px] wwc:font-medium",
+					children: "Filters"
+				}),
+				applied > 0 && /* @__PURE__ */ jsxs(Button, {
+					variant: "ghost",
+					size: "sm",
+					className: "wwc:h-6 wwc:gap-1 wwc:px-1.5 wwc:text-[12px] wwc:text-muted-foreground",
+					onClick: () => onChange(FILE_SYSTEM_NO_FILTERS),
+					children: [
+						/* @__PURE__ */ jsx(X, { className: "wwc:h-3 wwc:w-3" }),
+						"Clear ",
+						applied
+					]
+				})
+			]
+		}), /* @__PURE__ */ jsx(ScrollArea, {
+			fitWidth: true,
+			className: "wwc:min-h-0 wwc:flex-1",
+			scrollbarClassName: "wwc:w-2",
+			children: /* @__PURE__ */ jsxs(Accordion, {
+				type: "multiple",
+				defaultValue: [
+					"types",
+					"projects",
+					"tags"
+				],
+				className: "wwc:py-1 wwc:pl-1 wwc:pr-4",
+				children: [
+					/* @__PURE__ */ jsxs(FacetSection, {
+						id: "types",
+						label: "Types",
+						children: [
+							/* @__PURE__ */ jsx(FacetSearch, {
+								value: typeQuery,
+								onChange: setTypeQuery,
+								placeholder: "Search types..."
+							}),
+							shownTypes.map(({ type, count }) => {
+								const def = byType.get(type);
+								const Icon = def?.icon;
+								return /* @__PURE__ */ jsx(FacetRow, {
+									label: def?.label ?? type,
+									count,
+									mark: Icon ? /* @__PURE__ */ jsx("span", {
+										className: cn("wwc:flex wwc:h-5 wwc:w-5 wwc:shrink-0 wwc:items-center wwc:justify-center wwc:rounded", def?.tone),
+										children: /* @__PURE__ */ jsx(Icon, { className: "wwc:h-3 wwc:w-3" })
+									}) : void 0,
+									checked: value.types.includes(type),
+									onToggle: () => onChange({
+										...value,
+										types: toggle(value.types, type)
+									})
+								}, type);
+							}),
+							shownTypes.length === 0 && /* @__PURE__ */ jsx(FacetEmpty, {})
+						]
+					}),
+					/* @__PURE__ */ jsxs(FacetSection, {
+						id: "projects",
+						label: "Projects",
+						children: [
+							/* @__PURE__ */ jsx(FacetSearch, {
+								value: projectQuery,
+								onChange: setProjectQuery,
+								placeholder: "Search projects..."
+							}),
+							shownProjects.map(({ id, label, count }) => /* @__PURE__ */ jsx(FacetRow, {
+								label,
+								count,
+								checked: value.projectIds.includes(id),
+								onToggle: () => onChange({
+									...value,
+									projectIds: toggle(value.projectIds, id)
+								})
+							}, id)),
+							shownProjects.length === 0 && /* @__PURE__ */ jsx(FacetEmpty, {})
+						]
+					}),
+					/* @__PURE__ */ jsxs(FacetSection, {
+						id: "tags",
+						label: "Tags",
+						children: [
+							/* @__PURE__ */ jsx(FacetSearch, {
+								value: tagQuery,
+								onChange: setTagQuery,
+								placeholder: "Search tags..."
+							}),
+							shownTags.map(({ tag, count }) => /* @__PURE__ */ jsx(FacetRow, {
+								label: tag,
+								count,
+								mono: true,
+								checked: value.tags.includes(tag),
+								onToggle: () => onChange({
+									...value,
+									tags: toggle(value.tags, tag)
+								})
+							}, tag)),
+							shownTags.length === 0 && /* @__PURE__ */ jsx(FacetEmpty, {})
+						]
+					})
+				]
+			})
+		})]
+	});
+}
+function FacetSection({ id, label, children }) {
+	return /* @__PURE__ */ jsxs(AccordionItem, {
+		value: id,
+		className: "wwc:border-none",
+		children: [/* @__PURE__ */ jsx(AccordionTrigger, {
+			className: "wwc:px-2 wwc:py-2 wwc:text-[11px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground wwc:hover:no-underline",
+			children: label
+		}), /* @__PURE__ */ jsx(AccordionContent, {
+			className: "wwc:pb-2",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "wwc:flex wwc:flex-col wwc:gap-0.5",
+				children
+			})
+		})]
+	});
+}
+function FacetSearch({ value, onChange, placeholder }) {
+	return /* @__PURE__ */ jsx(Input, {
+		value,
+		onChange: (e) => onChange(e.target.value),
+		placeholder,
+		className: "wwc:mb-1 wwc:h-7 wwc:text-[12px]"
+	});
+}
+/**
+* One facet value. The whole row is the target — a checkbox alone is a 16px hit area, and the count on
+* the right is part of what the reader is aiming at.
+*/
+function FacetRow({ label, count, checked, onToggle, mono, mark }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: cn("wwc:flex wwc:cursor-pointer wwc:items-center wwc:gap-2 wwc:rounded-md wwc:px-2 wwc:py-1.5 wwc:transition-colors", checked ? "wwc:bg-accent" : "wwc:hover:bg-accent/50"),
+		children: [
+			/* @__PURE__ */ jsx(Checkbox, {
+				checked,
+				onCheckedChange: onToggle,
+				className: "wwc:shrink-0"
+			}),
+			mark,
+			/* @__PURE__ */ jsx("span", {
+				className: cn("wwc:min-w-0 wwc:flex-1 wwc:truncate wwc:text-[13px]", mono && "wwc:font-mono wwc:text-[12px]"),
+				children: label
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "wwc:shrink-0 wwc:text-[12px] wwc:tabular-nums wwc:text-muted-foreground",
+				children: count
+			})
+		]
+	});
+}
+function FacetEmpty() {
+	return /* @__PURE__ */ jsx("p", {
+		className: "wwc:px-2 wwc:py-1.5 wwc:text-[12px] wwc:text-muted-foreground",
+		children: "No matches"
+	});
+}
+//#endregion
+export { FILE_SYSTEM_NO_FILTERS, FileSystemFilters, fileSystemFilterCount };
+
+//# sourceMappingURL=file-system-filters.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-system-filters.mjs","names":[],"sources":["../../src/file-system/file-system-filters.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {SlidersHorizontal, X} from \"lucide-react\";\nimport {useMemo, useState} from \"react\";\n\nimport {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from \"../accordion\";\nimport {Button} from \"../button\";\nimport {Checkbox} from \"../checkbox\";\nimport {Input} from \"../input\";\nimport {ScrollArea} from \"../scroll-area\";\nimport {useFileSystem} from \"./context\";\nimport {fsProjectCounts, fsTagCounts, fsTypeCounts} from \"./model\";\n\n// The facet rail.\n//\n// Facets, not a folder tree. The folder a file sits in is already printed under its name, so a tree\n// would repeat it and cost the widest column on the surface to do so. What this list is actually asked\n// — \"show me the pipelines\", \"everything on that site\", \"everything tagged hse\" — are questions about\n// a SET of files, which one click answers here and a tree cannot answer at all.\n//\n// Every facet is derived from the nodes under the root, so it never offers a value that matches\n// nothing, and each count is what that value would leave standing.\n\nexport type FileSystemFilterValue = {\n\ttypes: string[];\n\tprojectIds: string[];\n\ttags: string[];\n};\n\nexport const FILE_SYSTEM_NO_FILTERS: FileSystemFilterValue = {types: [], projectIds: [], tags: []};\n\nexport function fileSystemFilterCount(filters: FileSystemFilterValue): number {\n\treturn filters.types.length + filters.projectIds.length + filters.tags.length;\n}\n\nexport interface FileSystemFiltersProps {\n\tvalue: FileSystemFilterValue;\n\tonChange: (next: FileSystemFilterValue) => void;\n\tclassName?: string;\n}\n\nexport function FileSystemFilters({value, onChange, className}: FileSystemFiltersProps) {\n\tconst {index, rootId, byType} = useFileSystem();\n\tconst types = useMemo(() => fsTypeCounts(index, rootId), [index, rootId]);\n\tconst projects = useMemo(() => fsProjectCounts(index, rootId), [index, rootId]);\n\tconst tags = useMemo(() => fsTagCounts(index, rootId), [index, rootId]);\n\n\t// One search box per section, unconditionally. A control that appears once a section crosses some\n\t// row count is a control the reader cannot rely on being there.\n\tconst [typeQuery, setTypeQuery] = useState(\"\");\n\tconst [projectQuery, setProjectQuery] = useState(\"\");\n\tconst [tagQuery, setTagQuery] = useState(\"\");\n\n\tconst applied = fileSystemFilterCount(value);\n\tconst toggle = <T,>(list: T[], item: T): T[] =>\n\t\tlist.includes(item) ? list.filter((x) => x !== item) : [...list, item];\n\n\tconst match = (text: string, q: string) => text.toLowerCase().includes(q.trim().toLowerCase());\n\tconst shownTypes = types.filter((t) => match(byType.get(t.type)?.label ?? t.type, typeQuery));\n\tconst shownProjects = projects.filter((p) => match(p.label, projectQuery));\n\tconst shownTags = tags.filter((t) => match(t.tag, tagQuery));\n\n\treturn (\n\t\t<div className={cn(\"wwc:flex wwc:h-full wwc:flex-col 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<SlidersHorizontal className=\"wwc:h-3.5 wwc:w-3.5 wwc:shrink-0 wwc:text-muted-foreground\" />\n\t\t\t\t<span className=\"wwc:flex-1 wwc:text-[13px] wwc:font-medium\">Filters</span>\n\t\t\t\t{applied > 0 && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\tclassName=\"wwc:h-6 wwc:gap-1 wwc:px-1.5 wwc:text-[12px] wwc:text-muted-foreground\"\n\t\t\t\t\t\tonClick={() => onChange(FILE_SYSTEM_NO_FILTERS)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<X className=\"wwc:h-3 wwc:w-3\" />\n\t\t\t\t\t\tClear {applied}\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{/* The scrollbar is an overlay, so the rail keeps a gutter wider than it and every right-aligned\n\t\t\t    thing — the counts, the section chevrons — stays inside. `fitWidth` is what makes the gutter\n\t\t\t    real: Radix sizes a viewport's child to its content, which would put this padding outside\n\t\t\t    the visible box and leave the bar sitting on the numbers. */}\n\t\t\t<ScrollArea fitWidth className=\"wwc:min-h-0 wwc:flex-1\" scrollbarClassName=\"wwc:w-2\">\n\t\t\t\t<Accordion type=\"multiple\" defaultValue={[\"types\", \"projects\", \"tags\"]} className=\"wwc:py-1 wwc:pl-1 wwc:pr-4\">\n\t\t\t\t\t<FacetSection id=\"types\" label=\"Types\">\n\t\t\t\t\t\t<FacetSearch value={typeQuery} onChange={setTypeQuery} placeholder=\"Search types...\" />\n\t\t\t\t\t\t{shownTypes.map(({type, count}) => {\n\t\t\t\t\t\t\tconst def = byType.get(type);\n\t\t\t\t\t\t\tconst Icon = def?.icon;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<FacetRow\n\t\t\t\t\t\t\t\t\tkey={type}\n\t\t\t\t\t\t\t\t\tlabel={def?.label ?? type}\n\t\t\t\t\t\t\t\t\tcount={count}\n\t\t\t\t\t\t\t\t\tmark={\n\t\t\t\t\t\t\t\t\t\tIcon ? (\n\t\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\"wwc:flex wwc:h-5 wwc:w-5 wwc:shrink-0 wwc:items-center wwc:justify-center wwc:rounded\",\n\t\t\t\t\t\t\t\t\t\t\t\t\tdef?.tone,\n\t\t\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon className=\"wwc:h-3 wwc:w-3\" />\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tchecked={value.types.includes(type)}\n\t\t\t\t\t\t\t\t\tonToggle={() => onChange({...value, types: toggle(value.types, type)})}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t})}\n\t\t\t\t\t\t{shownTypes.length === 0 && <FacetEmpty />}\n\t\t\t\t\t</FacetSection>\n\n\t\t\t\t\t<FacetSection id=\"projects\" label=\"Projects\">\n\t\t\t\t\t\t<FacetSearch value={projectQuery} onChange={setProjectQuery} placeholder=\"Search projects...\" />\n\t\t\t\t\t\t{shownProjects.map(({id, label, count}) => (\n\t\t\t\t\t\t\t<FacetRow\n\t\t\t\t\t\t\t\tkey={id}\n\t\t\t\t\t\t\t\tlabel={label}\n\t\t\t\t\t\t\t\tcount={count}\n\t\t\t\t\t\t\t\tchecked={value.projectIds.includes(id)}\n\t\t\t\t\t\t\t\tonToggle={() => onChange({...value, projectIds: toggle(value.projectIds, id)})}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{shownProjects.length === 0 && <FacetEmpty />}\n\t\t\t\t\t</FacetSection>\n\n\t\t\t\t\t<FacetSection id=\"tags\" label=\"Tags\">\n\t\t\t\t\t\t<FacetSearch value={tagQuery} onChange={setTagQuery} placeholder=\"Search tags...\" />\n\t\t\t\t\t\t{shownTags.map(({tag, count}) => (\n\t\t\t\t\t\t\t<FacetRow\n\t\t\t\t\t\t\t\tkey={tag}\n\t\t\t\t\t\t\t\tlabel={tag}\n\t\t\t\t\t\t\t\tcount={count}\n\t\t\t\t\t\t\t\tmono\n\t\t\t\t\t\t\t\tchecked={value.tags.includes(tag)}\n\t\t\t\t\t\t\t\tonToggle={() => onChange({...value, tags: toggle(value.tags, tag)})}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t))}\n\t\t\t\t\t\t{shownTags.length === 0 && <FacetEmpty />}\n\t\t\t\t\t</FacetSection>\n\t\t\t\t</Accordion>\n\t\t\t</ScrollArea>\n\t\t</div>\n\t);\n}\n\nfunction FacetSection({id, label, children}: {id: string; label: string; children: React.ReactNode}) {\n\treturn (\n\t\t<AccordionItem value={id} className=\"wwc:border-none\">\n\t\t\t<AccordionTrigger className=\"wwc:px-2 wwc:py-2 wwc:text-[11px] wwc:font-semibold wwc:uppercase wwc:tracking-wider wwc:text-muted-foreground wwc:hover:no-underline\">\n\t\t\t\t{label}\n\t\t\t</AccordionTrigger>\n\t\t\t<AccordionContent className=\"wwc:pb-2\">\n\t\t\t\t<div className=\"wwc:flex wwc:flex-col wwc:gap-0.5\">{children}</div>\n\t\t\t</AccordionContent>\n\t\t</AccordionItem>\n\t);\n}\n\nfunction FacetSearch({\n\tvalue,\n\tonChange,\n\tplaceholder,\n}: {\n\tvalue: string;\n\tonChange: (v: string) => void;\n\tplaceholder: string;\n}) {\n\treturn (\n\t\t<Input\n\t\t\tvalue={value}\n\t\t\tonChange={(e) => onChange(e.target.value)}\n\t\t\tplaceholder={placeholder}\n\t\t\tclassName=\"wwc:mb-1 wwc:h-7 wwc:text-[12px]\"\n\t\t/>\n\t);\n}\n\n/**\n * One facet value. The whole row is the target — a checkbox alone is a 16px hit area, and the count on\n * the right is part of what the reader is aiming at.\n */\nfunction FacetRow({\n\tlabel,\n\tcount,\n\tchecked,\n\tonToggle,\n\tmono,\n\tmark,\n}: {\n\tlabel: string;\n\tcount: number;\n\tchecked: boolean;\n\tonToggle: () => void;\n\tmono?: boolean;\n\t/** Optional glyph between the checkbox and the label — the type's tinted mark. */\n\tmark?: React.ReactNode;\n}) {\n\treturn (\n\t\t<label\n\t\t\tclassName={cn(\n\t\t\t\t\"wwc:flex wwc:cursor-pointer wwc:items-center wwc:gap-2 wwc:rounded-md wwc:px-2 wwc:py-1.5 wwc:transition-colors\",\n\t\t\t\tchecked ? \"wwc:bg-accent\" : \"wwc:hover:bg-accent/50\",\n\t\t\t)}\n\t\t>\n\t\t\t<Checkbox checked={checked} onCheckedChange={onToggle} className=\"wwc:shrink-0\" />\n\t\t\t{mark}\n\t\t\t<span\n\t\t\t\tclassName={cn(\"wwc:min-w-0 wwc:flex-1 wwc:truncate wwc:text-[13px]\", mono && \"wwc:font-mono wwc:text-[12px]\")}\n\t\t\t>\n\t\t\t\t{label}\n\t\t\t</span>\n\t\t\t<span className=\"wwc:shrink-0 wwc:text-[12px] wwc:tabular-nums wwc:text-muted-foreground\">{count}</span>\n\t\t</label>\n\t);\n}\n\nfunction FacetEmpty() {\n\treturn <p className=\"wwc:px-2 wwc:py-1.5 wwc:text-[12px] wwc:text-muted-foreground\">No matches</p>;\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+import { FileSystemDraft, FileSystemNode } from "./model.mjs";
+//#region src/file-system/file-system-new.d.ts
+export interface FileSystemNewProps {
+  /** Where the new node goes. */
+  parentId: string;
+  /** The root creates projects; anywhere inside one creates folders and files. */
+  scope: "root" | "project";
+  /** Commit a draft. The host owns the node array, so the host does the appending. */
+  onCreate: (draft: FileSystemDraft) => FileSystemNode | undefined;
+  /** Fires with the created node, so the surface can select it. */
+  onCreated?: (node: FileSystemNode) => void;
+  className?: string;
+}
+export declare function FileSystemNew({ parentId, scope, onCreate, onCreated, className }: FileSystemNewProps): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=file-system-new.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-system-new.d.mts","names":[],"sources":["../../src/file-system/file-system-new.tsx"],"mappings":";;iBA0BiB;;EAEhB;;EAEA;;EAEA,WAAW,OAAO,oBAAoB;;EAEtC,aAAa,MAAM;EACnB;;wBAKe,gBAAe,UAAU,OAAO,UAAU,WAAW,aAAY,iDAAkB,IAAA"}

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

@@ -0,0 +1,204 @@
+import { Button } from "../button.mjs";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../dialog.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../dropdown-menu.mjs";
+import { Input } from "../input.mjs";
+import { Textarea } from "../textarea.mjs";
+import { useFileSystem } from "./context.mjs";
+import { fsDescendants, fsNode } from "./model.mjs";
+import { cn } from "@corensystem/coren-utils";
+import { ChevronDown, Folder, FolderOpen, Plus } from "lucide-react";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/file-system/file-system-new.tsx
+function FileSystemNew({ parentId, scope, onCreate, onCreated, className }) {
+	const { fileTypes } = useFileSystem();
+	const [draft, setDraft] = useState(null);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			size: "sm",
+			className: cn("wwc:gap-1.5", className),
+			children: [
+				/* @__PURE__ */ jsx(Plus, { className: "wwc:h-3.5 wwc:w-3.5" }),
+				"New",
+				/* @__PURE__ */ jsx(ChevronDown, { className: "wwc:h-3 wwc:w-3 wwc:opacity-70" })
+			]
+		})
+	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
+		align: "end",
+		className: "wwc:w-56",
+		children: scope === "root" ? /* @__PURE__ */ jsxs(DropdownMenuItem, {
+			className: "wwc:gap-2",
+			onSelect: () => setDraft({ kind: "project" }),
+			children: [/* @__PURE__ */ jsx(FolderOpen, { className: "wwc:h-3.5 wwc:w-3.5 wwc:text-muted-foreground" }), "Project"]
+		}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsxs(DropdownMenuItem, {
+				className: "wwc:gap-2",
+				onSelect: () => setDraft({ kind: "folder" }),
+				children: [/* @__PURE__ */ jsx(Folder, { className: "wwc:h-3.5 wwc:w-3.5 wwc:text-muted-foreground" }), "Folder"]
+			}),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			fileTypes.map((type) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				className: "wwc:gap-2",
+				onSelect: () => setDraft({
+					kind: "file",
+					fileType: type.id
+				}),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cn("wwc:flex wwc:h-5 wwc:w-5 wwc:shrink-0 wwc:items-center wwc:justify-center wwc:rounded", type.tone),
+					children: /* @__PURE__ */ jsx(type.icon, { className: "wwc:h-3 wwc:w-3" })
+				}), type.label]
+			}, type.id))
+		] })
+	})] }), draft && /* @__PURE__ */ jsx(NewDialog, {
+		draft,
+		parentId,
+		onCreate,
+		onClose: () => setDraft(null),
+		onCreated: (node) => {
+			setDraft(null);
+			onCreated?.(node);
+		}
+	})] });
+}
+function NewDialog({ draft, parentId, onCreate, onClose, onCreated }) {
+	const { index, byType } = useFileSystem();
+	const [name, setName] = useState("");
+	const [description, setDescription] = useState("");
+	const [folderId, setFolderId] = useState(parentId);
+	const [attempted, setAttempted] = useState(false);
+	const isProject = draft.kind === "project";
+	const isFolder = draft.kind === "folder";
+	const isContainer = isProject || isFolder;
+	const parent = fsNode(index, parentId);
+	const type = draft.kind === "file" ? byType.get(draft.fileType) : void 0;
+	const folders = useMemo(() => isContainer ? [] : fsDescendants(index, parentId).filter((n) => n.kind === "folder" && !n.trashed), [
+		isContainer,
+		index,
+		parentId
+	]);
+	const valid = name.trim().length > 0;
+	const nameError = attempted && !valid;
+	const create = () => {
+		if (!valid) {
+			setAttempted(true);
+			return;
+		}
+		const created = onCreate({
+			name: name.trim(),
+			kind: isProject ? "project" : isFolder ? "folder" : "file",
+			parentId: isContainer ? parentId : folderId,
+			fileType: draft.kind === "file" ? draft.fileType : void 0,
+			description: description.trim() || void 0
+		});
+		if (created) onCreated(created);
+		else onClose();
+	};
+	const typeLabel = isProject ? "project" : isFolder ? "folder" : type?.label.toLowerCase() ?? "file";
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: true,
+		onOpenChange: (o) => !o && onClose(),
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			variant: "stacked",
+			className: "wwc:w-[calc(100vw-2rem)] wwc:max-w-md",
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsxs(DialogTitle, { children: ["New ", typeLabel] }), /* @__PURE__ */ jsx(DialogDescription, { children: isProject ? `Adds a project to ${parent?.name ?? "this workspace"}.` : isFolder ? `Adds a folder to ${parent?.name ?? "this project"}. Open it to file things inside.` : type?.app ? `Creates a ${typeLabel} in ${type.app} and files it under ${parent?.name ?? "this project"}. Opening the file opens it there.` : `Adds a ${typeLabel} to ${parent?.name ?? "this project"}. No app owns this type, so it is a place in the file system and nothing more.` })] }),
+				/* @__PURE__ */ jsxs("div", {
+					className: "wwc:flex wwc:flex-col wwc:gap-4",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:flex-col wwc:gap-1.5",
+							children: [/* @__PURE__ */ jsx("label", {
+								htmlFor: "fs-new-name",
+								className: "wwc:text-[13px] wwc:font-medium",
+								children: "Name"
+							}), /* @__PURE__ */ jsx(Input, {
+								id: "fs-new-name",
+								autoFocus: true,
+								value: name,
+								onChange: (e) => setName(e.target.value),
+								"aria-invalid": nameError,
+								className: cn(nameError && "wwc:border-destructive"),
+								onKeyDown: (e) => {
+									if (e.key === "Enter") create();
+								}
+							})]
+						}),
+						!isContainer && folders.length > 0 && /* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:flex-col wwc:gap-1.5",
+							children: [/* @__PURE__ */ jsx("label", {
+								htmlFor: "fs-new-folder",
+								className: "wwc:text-[13px] wwc:font-medium",
+								children: "Folder"
+							}), /* @__PURE__ */ jsxs(Select, {
+								value: folderId,
+								onValueChange: setFolderId,
+								children: [/* @__PURE__ */ jsx(SelectTrigger, {
+									id: "fs-new-folder",
+									children: /* @__PURE__ */ jsx(SelectValue, {})
+								}), /* @__PURE__ */ jsxs(SelectContent, { children: [/* @__PURE__ */ jsx(SelectItem, {
+									value: parentId,
+									children: /* @__PURE__ */ jsxs("span", {
+										className: "wwc:flex wwc:items-center wwc:gap-2",
+										children: [/* @__PURE__ */ jsx(FolderOpen, { className: "wwc:h-3.5 wwc:w-3.5 wwc:text-muted-foreground" }), parent?.name ?? "Project root"]
+									})
+								}), folders.map((f) => /* @__PURE__ */ jsx(SelectItem, {
+									value: f.id,
+									children: /* @__PURE__ */ jsxs("span", {
+										className: "wwc:flex wwc:items-center wwc:gap-2",
+										children: [/* @__PURE__ */ jsx(Folder, { className: "wwc:h-3.5 wwc:w-3.5 wwc:text-muted-foreground" }), f.name]
+									})
+								}, f.id))] })]
+							})]
+						}),
+						isContainer && /* @__PURE__ */ jsxs("div", {
+							className: "wwc:flex wwc:flex-col wwc:gap-1.5",
+							children: [/* @__PURE__ */ jsxs("label", {
+								htmlFor: "fs-new-desc",
+								className: "wwc:text-[13px] wwc:font-medium",
+								children: ["Description ", /* @__PURE__ */ jsx("span", {
+									className: "wwc:font-normal wwc:text-muted-foreground",
+									children: "(optional)"
+								})]
+							}), /* @__PURE__ */ jsx(Textarea, {
+								id: "fs-new-desc",
+								rows: 2,
+								value: description,
+								onChange: (e) => setDescription(e.target.value),
+								placeholder: isProject ? "What is this project for?" : "What belongs in here?"
+							})]
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs(DialogFooter, {
+					className: "wwc:items-center",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "wwc:mr-auto wwc:text-[13px]",
+							children: nameError && /* @__PURE__ */ jsx("span", {
+								className: "wwc:text-destructive",
+								children: "Name required."
+							})
+						}),
+						/* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: onClose,
+							children: "Cancel"
+						}),
+						/* @__PURE__ */ jsxs(Button, {
+							size: "sm",
+							onClick: create,
+							children: ["Create ", typeLabel]
+						})
+					]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { FileSystemNew };
+
+//# sourceMappingURL=file-system-new.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-system-new.mjs","names":[],"sources":["../../src/file-system/file-system-new.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {ChevronDown, Folder, FolderOpen, Plus} from \"lucide-react\";\nimport {useMemo, useState} from \"react\";\n\nimport {Button} from \"../button\";\nimport {Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle} from \"../dialog\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuItem,\n\tDropdownMenuSeparator,\n\tDropdownMenuTrigger,\n} from \"../dropdown-menu\";\nimport {Input} from \"../input\";\nimport {Select, SelectContent, SelectItem, SelectTrigger, SelectValue} from \"../select\";\nimport {Textarea} from \"../textarea\";\nimport {useFileSystem} from \"./context\";\nimport {fsDescendants, fsNode, type FileSystemDraft, type FileSystemNode} from \"./model\";\n\n// \"New\" — the one way to add to the file system.\n//\n// A menu, then a dialog, rather than a dialog with a kind picker inside it: the first decision is what\n// you are making, so putting it in the menu means the dialog that opens is already about that thing.\n// The menu offers only what can exist where the reader is standing — a project at the root, a folder or\n// a file inside one — so there is no path to creating something that would land nowhere.\n\nexport interface FileSystemNewProps {\n\t/** Where the new node goes. */\n\tparentId: string;\n\t/** The root creates projects; anywhere inside one creates folders and files. */\n\tscope: \"root\" | \"project\";\n\t/** Commit a draft. The host owns the node array, so the host does the appending. */\n\tonCreate: (draft: FileSystemDraft) => FileSystemNode | undefined;\n\t/** Fires with the created node, so the surface can select it. */\n\tonCreated?: (node: FileSystemNode) => void;\n\tclassName?: string;\n}\n\ntype Draft = {kind: \"project\"} | {kind: \"folder\"} | {kind: \"file\"; fileType: string};\n\nexport function FileSystemNew({parentId, scope, onCreate, onCreated, className}: FileSystemNewProps) {\n\tconst {fileTypes} = useFileSystem();\n\tconst [draft, setDraft] = useState<Draft | null>(null);\n\n\treturn (\n\t\t<>\n\t\t\t<DropdownMenu>\n\t\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t\t<Button size=\"sm\" className={cn(\"wwc:gap-1.5\", className)}>\n\t\t\t\t\t\t<Plus className=\"wwc:h-3.5 wwc:w-3.5\" />\n\t\t\t\t\t\tNew\n\t\t\t\t\t\t<ChevronDown className=\"wwc:h-3 wwc:w-3 wwc:opacity-70\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</DropdownMenuTrigger>\n\t\t\t\t<DropdownMenuContent align=\"end\" className=\"wwc:w-56\">\n\t\t\t\t\t{scope === \"root\" ? (\n\t\t\t\t\t\t<DropdownMenuItem className=\"wwc:gap-2\" onSelect={() => setDraft({kind: \"project\"})}>\n\t\t\t\t\t\t\t<FolderOpen className=\"wwc:h-3.5 wwc:w-3.5 wwc:text-muted-foreground\" />\n\t\t\t\t\t\t\tProject\n\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t{/* Folder leads, and takes a rule under it: it is the one thing in this menu that HOLDS\n\t\t\t\t\t\t\t    the others, so grouping it with them would read as another kind of file. */}\n\t\t\t\t\t\t\t<DropdownMenuItem className=\"wwc:gap-2\" onSelect={() => setDraft({kind: \"folder\"})}>\n\t\t\t\t\t\t\t\t<Folder className=\"wwc:h-3.5 wwc:w-3.5 wwc:text-muted-foreground\" />\n\t\t\t\t\t\t\t\tFolder\n\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t\t<DropdownMenuSeparator />\n\t\t\t\t\t\t\t{fileTypes.map((type) => (\n\t\t\t\t\t\t\t\t<DropdownMenuItem\n\t\t\t\t\t\t\t\t\tkey={type.id}\n\t\t\t\t\t\t\t\t\tclassName=\"wwc:gap-2\"\n\t\t\t\t\t\t\t\t\tonSelect={() => setDraft({kind: \"file\", fileType: type.id})}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\t\t\"wwc:flex wwc:h-5 wwc:w-5 wwc:shrink-0 wwc:items-center wwc:justify-center wwc:rounded\",\n\t\t\t\t\t\t\t\t\t\t\ttype.tone,\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<type.icon className=\"wwc:h-3 wwc:w-3\" />\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t{type.label}\n\t\t\t\t\t\t\t\t</DropdownMenuItem>\n\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t</>\n\t\t\t\t\t)}\n\t\t\t\t</DropdownMenuContent>\n\t\t\t</DropdownMenu>\n\n\t\t\t{draft && (\n\t\t\t\t<NewDialog\n\t\t\t\t\tdraft={draft}\n\t\t\t\t\tparentId={parentId}\n\t\t\t\t\tonCreate={onCreate}\n\t\t\t\t\tonClose={() => setDraft(null)}\n\t\t\t\t\tonCreated={(node) => {\n\t\t\t\t\t\tsetDraft(null);\n\t\t\t\t\t\tonCreated?.(node);\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t)}\n\t\t</>\n\t);\n}\n\nfunction NewDialog({\n\tdraft,\n\tparentId,\n\tonCreate,\n\tonClose,\n\tonCreated,\n}: {\n\tdraft: Draft;\n\tparentId: string;\n\tonCreate: (draft: FileSystemDraft) => FileSystemNode | undefined;\n\tonClose: () => void;\n\tonCreated: (node: FileSystemNode) => void;\n}) {\n\tconst {index, byType} = useFileSystem();\n\tconst [name, setName] = useState(\"\");\n\tconst [description, setDescription] = useState(\"\");\n\t// Where a file lands. The container itself is a legitimate answer, so it heads the list rather than\n\t// forcing a folder on someone who does not want one.\n\tconst [folderId, setFolderId] = useState(parentId);\n\tconst [attempted, setAttempted] = useState(false);\n\n\tconst isProject = draft.kind === \"project\";\n\tconst isFolder = draft.kind === \"folder\";\n\t// A container holds things, so there is nowhere to file it but here.\n\tconst isContainer = isProject || isFolder;\n\tconst parent = fsNode(index, parentId);\n\tconst type = draft.kind === \"file\" ? byType.get(draft.fileType) : undefined;\n\n\tconst folders = useMemo(\n\t\t() => (isContainer ? [] : fsDescendants(index, parentId).filter((n) => n.kind === \"folder\" && !n.trashed)),\n\t\t[isContainer, index, parentId],\n\t);\n\n\tconst valid = name.trim().length > 0;\n\tconst nameError = attempted && !valid;\n\n\tconst create = () => {\n\t\t// Never a disabled button — the error appears once the reader has actually tried.\n\t\tif (!valid) {\n\t\t\tsetAttempted(true);\n\t\t\treturn;\n\t\t}\n\t\tconst created = onCreate({\n\t\t\tname: name.trim(),\n\t\t\tkind: isProject ? \"project\" : isFolder ? \"folder\" : \"file\",\n\t\t\tparentId: isContainer ? parentId : folderId,\n\t\t\tfileType: draft.kind === \"file\" ? draft.fileType : undefined,\n\t\t\tdescription: description.trim() || undefined,\n\t\t});\n\t\tif (created) onCreated(created);\n\t\telse onClose();\n\t};\n\n\tconst typeLabel = isProject ? \"project\" : isFolder ? \"folder\" : (type?.label.toLowerCase() ?? \"file\");\n\n\treturn (\n\t\t<Dialog open onOpenChange={(o) => !o && onClose()}>\n\t\t\t{/* `stacked`: the default `banded` variant is edge-to-edge, its body supplying its own padding.\n\t\t\t    This is the short dialog that variant's own docs describe — a sentence and two buttons. */}\n\t\t\t<DialogContent variant=\"stacked\" className=\"wwc:w-[calc(100vw-2rem)] wwc:max-w-md\">\n\t\t\t\t<DialogHeader>\n\t\t\t\t\t<DialogTitle>New {typeLabel}</DialogTitle>\n\t\t\t\t\t<DialogDescription>\n\t\t\t\t\t\t{isProject\n\t\t\t\t\t\t\t? `Adds a project to ${parent?.name ?? \"this workspace\"}.`\n\t\t\t\t\t\t\t: isFolder\n\t\t\t\t\t\t\t\t? `Adds a folder to ${parent?.name ?? \"this project\"}. Open it to file things inside.`\n\t\t\t\t\t\t\t\t: type?.app\n\t\t\t\t\t\t\t\t\t? `Creates a ${typeLabel} in ${type.app} and files it under ${parent?.name ?? \"this project\"}. Opening the file opens it there.`\n\t\t\t\t\t\t\t\t\t: `Adds a ${typeLabel} to ${parent?.name ?? \"this project\"}. No app owns this type, so it is a place in the file system and nothing more.`}\n\t\t\t\t\t</DialogDescription>\n\t\t\t\t</DialogHeader>\n\n\t\t\t\t<div className=\"wwc:flex wwc:flex-col wwc:gap-4\">\n\t\t\t\t\t<div className=\"wwc:flex wwc:flex-col wwc:gap-1.5\">\n\t\t\t\t\t\t<label htmlFor=\"fs-new-name\" className=\"wwc:text-[13px] wwc:font-medium\">\n\t\t\t\t\t\t\tName\n\t\t\t\t\t\t</label>\n\t\t\t\t\t\t<Input\n\t\t\t\t\t\t\tid=\"fs-new-name\"\n\t\t\t\t\t\t\tautoFocus\n\t\t\t\t\t\t\tvalue={name}\n\t\t\t\t\t\t\tonChange={(e) => setName(e.target.value)}\n\t\t\t\t\t\t\taria-invalid={nameError}\n\t\t\t\t\t\t\tclassName={cn(nameError && \"wwc:border-destructive\")}\n\t\t\t\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\t\t\t\tif (e.key === \"Enter\") create();\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{!isContainer && folders.length > 0 && (\n\t\t\t\t\t\t<div className=\"wwc:flex wwc:flex-col wwc:gap-1.5\">\n\t\t\t\t\t\t\t<label htmlFor=\"fs-new-folder\" className=\"wwc:text-[13px] wwc:font-medium\">\n\t\t\t\t\t\t\t\tFolder\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t<Select value={folderId} onValueChange={setFolderId}>\n\t\t\t\t\t\t\t\t<SelectTrigger id=\"fs-new-folder\">\n\t\t\t\t\t\t\t\t\t<SelectValue />\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<SelectItem value={parentId}>\n\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:flex wwc:items-center wwc:gap-2\">\n\t\t\t\t\t\t\t\t\t\t\t<FolderOpen className=\"wwc:h-3.5 wwc:w-3.5 wwc:text-muted-foreground\" />\n\t\t\t\t\t\t\t\t\t\t\t{parent?.name ?? \"Project root\"}\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t\t\t\t\t{folders.map((f) => (\n\t\t\t\t\t\t\t\t\t\t<SelectItem key={f.id} value={f.id}>\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"wwc:flex wwc:items-center wwc:gap-2\">\n\t\t\t\t\t\t\t\t\t\t\t\t<Folder className=\"wwc:h-3.5 wwc:w-3.5 wwc:text-muted-foreground\" />\n\t\t\t\t\t\t\t\t\t\t\t\t{f.name}\n\t\t\t\t\t\t\t\t\t\t\t</span>\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</div>\n\t\t\t\t\t)}\n\n\t\t\t\t\t{isContainer && (\n\t\t\t\t\t\t<div className=\"wwc:flex wwc:flex-col wwc:gap-1.5\">\n\t\t\t\t\t\t\t<label htmlFor=\"fs-new-desc\" className=\"wwc:text-[13px] wwc:font-medium\">\n\t\t\t\t\t\t\t\tDescription <span className=\"wwc:font-normal wwc:text-muted-foreground\">(optional)</span>\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t<Textarea\n\t\t\t\t\t\t\t\tid=\"fs-new-desc\"\n\t\t\t\t\t\t\t\trows={2}\n\t\t\t\t\t\t\t\tvalue={description}\n\t\t\t\t\t\t\t\tonChange={(e) => setDescription(e.target.value)}\n\t\t\t\t\t\t\t\tplaceholder={isProject ? \"What is this project for?\" : \"What belongs in here?\"}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t<DialogFooter className=\"wwc:items-center\">\n\t\t\t\t\t<span className=\"wwc:mr-auto wwc:text-[13px]\">\n\t\t\t\t\t\t{nameError && <span className=\"wwc:text-destructive\">Name required.</span>}\n\t\t\t\t\t</span>\n\t\t\t\t\t<Button variant=\"outline\" size=\"sm\" onClick={onClose}>\n\t\t\t\t\t\tCancel\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button size=\"sm\" onClick={create}>\n\t\t\t\t\t\tCreate {typeLabel}\n\t\t\t\t\t</Button>\n\t\t\t\t</DialogFooter>\n\t\t\t</DialogContent>\n\t\t</Dialog>\n\t);\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+//#region src/file-system/file-system-path.d.ts
+export declare function FileSystemPathText({ path, className }: {
+  path: string;
+  className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+//#endregion
+//# sourceMappingURL=file-system-path.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-system-path.d.mts","names":[],"sources":["../../src/file-system/file-system-path.tsx"],"mappings":";wBAOgB,qBAAoB,MAAM;EAAa;EAAc;gCAAmB,IAAA"}

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

@@ -0,0 +1,22 @@
+import { cn } from "@corensystem/coren-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/file-system/file-system-path.tsx
+function FileSystemPathText({ path, className }) {
+	const cut = path.lastIndexOf("/");
+	const head = cut > 0 ? path.slice(0, cut) : "";
+	const tail = cut > 0 ? path.slice(cut) : path;
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("wwc:flex wwc:min-w-0 wwc:items-center wwc:overflow-hidden wwc:font-mono", className),
+		children: [head && /* @__PURE__ */ jsx("span", {
+			className: "wwc:min-w-0 wwc:overflow-hidden wwc:text-ellipsis wwc:whitespace-pre",
+			children: head
+		}), /* @__PURE__ */ jsx("span", {
+			className: "wwc:shrink-0 wwc:whitespace-pre",
+			children: tail
+		})]
+	});
+}
+//#endregion
+export { FileSystemPathText };
+
+//# sourceMappingURL=file-system-path.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-system-path.mjs","names":[],"sources":["../../src/file-system/file-system-path.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\n\n// A path, truncated at the LAST separator rather than at a character count: the folder a record sits\n// in is the only segment that identifies it, so that half is pinned and the ancestors give way.\n// \"/Falcon Heights Medical Tower/Data pipelines\" in a narrow column reads \"…/Data pipelines\", never\n// \"/Falcon Heights …\".\n\nexport function FileSystemPathText({path, className}: {path: string; className?: string}) {\n\tconst cut = path.lastIndexOf(\"/\");\n\tconst head = cut > 0 ? path.slice(0, cut) : \"\";\n\tconst tail = cut > 0 ? path.slice(cut) : path;\n\treturn (\n\t\t<span className={cn(\"wwc:flex wwc:min-w-0 wwc:items-center wwc:overflow-hidden wwc:font-mono\", className)}>\n\t\t\t{/* `whitespace-pre`, not `truncate`: these are two flex items and `truncate`'s nowrap collapses\n\t\t\t    a space at the boundary, so \"Built assets\" would read \"Builtassets\". */}\n\t\t\t{head && <span className=\"wwc:min-w-0 wwc:overflow-hidden wwc:text-ellipsis wwc:whitespace-pre\">{head}</span>}\n\t\t\t<span className=\"wwc:shrink-0 wwc:whitespace-pre\">{tail}</span>\n\t\t</span>\n\t);\n}\n"],"mappings":";;;AAOA,SAAgB,mBAAmB,EAAC,MAAM,aAAgD;CACzF,MAAM,MAAM,KAAK,YAAY,GAAG;CAChC,MAAM,OAAO,MAAM,IAAI,KAAK,MAAM,GAAG,GAAG,IAAI;CAC5C,MAAM,OAAO,MAAM,IAAI,KAAK,MAAM,GAAG,IAAI;CACzC,OACC,qBAAC,QAAD;EAAM,WAAW,GAAG,2EAA2E,SAAS;EAAxG,UAAA,CAGE,QAAQ,oBAAC,QAAD;GAAM,WAAU;GAAwE,UAAA;EAAW,CAAA,GAC5G,oBAAC,QAAD;GAAM,WAAU;GAAmC,UAAA;EAAW,CAAA,CACzD;;AAER"}

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

@@ -0,0 +1,16 @@
+import { FileSystemDraft, FileSystemNode } from "./model.mjs";
+//#region src/file-system/file-system-project.d.ts
+export type FileSystemProjectSection = "overview" | "files" | "trash";
+export interface FileSystemProjectProps {
+  projectId: string;
+  /** Back to the root's all-files listing. */
+  onBack: () => void;
+  selectedId: string | null;
+  onSelect: (node: FileSystemNode) => void;
+  /** A row's NAME was clicked and it is not a folder — the host opens it. */
+  onOpenName: (node: FileSystemNode) => void;
+  onCreate: (draft: FileSystemDraft) => FileSystemNode | undefined;
+}
+export declare function FileSystemProject({ projectId, onBack, selectedId, onSelect, onOpenName, onCreate }: FileSystemProjectProps): import("react/jsx-runtime").JSX.Element | null;
+//#endregion
+//# sourceMappingURL=file-system-project.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"file-system-project.d.mts","names":[],"sources":["../../src/file-system/file-system-project.tsx"],"mappings":";;YAqCY;iBAEK;EAChB;;EAEA;EACA;EACA,WAAW,MAAM;;EAEjB,aAAa,MAAM;EACnB,WAAW,OAAO,oBAAoB;;wBAGvB,oBACf,WACA,QACA,YACA,UACA,YACA,YACE,qDAAsB,IAAA"}