@namroodinc/liquid-editorial 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Namrood Inc
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,68 @@
-# Temporary Holding Version
+# Liquid Editorial
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Accessible React components for editorial products. The package ships ESM, CommonJS, TypeScript declarations, and explicit CSS entry points. It does not inject styles from JavaScript.
+
+## Install
+
+```sh
+npm install @namroodinc/liquid-editorial
+```
+
+React and React DOM 18.2 through 19 are supported peer dependencies.
+
+## Use
+
+Import the complete component stylesheet once near your application entry point:
+
+```tsx
+import "@namroodinc/liquid-editorial/styles.css";
+import { Field, TextField } from "@namroodinc/liquid-editorial";
+
+export function ArticleForm() {
+  return (
+    <Field label="Headline" hint="Keep it concise." isRequired>
+      {(fieldProps) => <TextField {...fieldProps} />}
+    </Field>
+  );
+}
+```
+
+Every family also has a direct entry point:
+
+```tsx
+import { Button } from "@namroodinc/liquid-editorial/components/Button";
+```
+
+If an application only needs the design tokens, import `@namroodinc/liquid-editorial/tokens.css`. A small global normalization is available separately at `@namroodinc/liquid-editorial/reset.css`; it is never included automatically.
+
+## Themes and fonts
+
+Set `data-theme` on the document root to `light`, `dark`, `cherry-glaze`, or `black-hawaii`. The default font tokens use system stacks and can be overridden by the consumer without downloading bundled font files:
+
+```css
+:root {
+  --font-sans: "Your Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Your Mono", ui-monospace, monospace;
+}
+```
+
+## Development
+
+```sh
+npm install
+npm run storybook
+npm test
+npm run test:coverage
+npm run build
+npm run validate
+```
+
+Storybook is the component catalogue and documentation surface. Stories and tests live beside each component in `src/components/<Family>/`.
+
+## Publishing
+
+Run `npm run validate`, inspect `npm pack --dry-run`, and confirm access to the `@namroodinc` npm scope. Publication itself is intentionally not automated by this repository.
+
+## License
+
+MIT © Namrood Inc.

package/dist/chunks/Icon-CGY1FNXT.js

@@ -0,0 +1,77 @@
+import { forwardRef as e } from "react";
+import { AlertTriangle as t, Archive as n, ArrowLeft as r, ArrowRight as i, Bell as a, Bold as o, Calendar as ee, Check as s, ChevronDown as c, ChevronLeft as l, ChevronRight as u, ChevronUp as d, ChevronsLeft as f, ChevronsRight as p, Clock as m, Code as h, Copy as g, Download as _, Eye as v, FileText as y, Filter as b, FolderClosed as x, Globe as S, GripHorizontal as C, GripVertical as w, Heading2 as T, Heading3 as E, Home as D, Image as O, Info as k, Italic as A, LayoutGrid as te, Link as j, Link2Off as M, List as N, ListOrdered as P, Loader2 as F, Menu as I, Minus as L, MoreHorizontal as R, Pencil as z, Plus as B, Quote as V, Redo2 as H, RotateCcw as U, RotateCw as W, Search as G, Settings as K, Strikethrough as q, Trash2 as J, Undo2 as Y, Upload as X, User as Z, Users as Q, X as ne } from "lucide-react";
+import { jsx as re } from "react/jsx-runtime";
+//#region src/components/Icon/icons.ts
+var $ = {
+	"alert-triangle": t,
+	archive: n,
+	bold: o,
+	code: h,
+	"heading-2": T,
+	"heading-3": E,
+	italic: A,
+	"link-off": M,
+	list: N,
+	"list-ordered": P,
+	quote: V,
+	redo: H,
+	strikethrough: q,
+	undo: Y,
+	"arrow-left": r,
+	"arrow-right": i,
+	calendar: ee,
+	check: s,
+	"chevron-down": c,
+	"chevron-left": l,
+	"chevron-up": d,
+	minus: L,
+	"chevron-right": u,
+	clock: m,
+	copy: g,
+	download: _,
+	eye: v,
+	filter: b,
+	bell: a,
+	"chevrons-left": f,
+	"chevrons-right": p,
+	"file-text": y,
+	folder: x,
+	globe: S,
+	home: D,
+	"layout-grid": te,
+	menu: I,
+	users: Q,
+	"grip-horizontal": C,
+	"grip-vertical": w,
+	image: O,
+	info: k,
+	link: j,
+	spinner: F,
+	"more-horizontal": R,
+	pencil: z,
+	plus: B,
+	"rotate-ccw": U,
+	"rotate-cw": W,
+	search: G,
+	settings: K,
+	trash: J,
+	upload: X,
+	user: Z,
+	x: ne
+}, ie = Object.keys($), ae = e(function({ name: e, size: t = 16, className: n, ...r }, i) {
+	let a = $[e];
+	return /* @__PURE__ */ re(a, {
+		ref: i,
+		width: t,
+		height: t,
+		className: ["ds-icon", n].filter(Boolean).join(" "),
+		role: r["aria-label"] ? "img" : void 0,
+		"aria-hidden": !r["aria-label"] || void 0,
+		focusable: "false",
+		...r
+	});
+});
+//#endregion
+export { ie as n, $ as r, ae as t };
+
+//# sourceMappingURL=Icon-CGY1FNXT.js.map

package/dist/chunks/Icon-CGY1FNXT.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon-CGY1FNXT.js","names":["icons","AlertTriangle","Archive","Bold","Code","Heading2","Heading3","Italic","Link2Off","List","ListOrdered","Quote","Redo2","Strikethrough","Undo2","ArrowLeft","ArrowRight","Calendar","Check","ChevronDown","ChevronLeft","ChevronUp","Minus","ChevronRight","Clock","Copy","Download","Eye","Filter","Bell","ChevronsLeft","ChevronsRight","FileText","FolderClosed","Globe","Home","LayoutGrid","Menu","Users","GripHorizontal","GripVertical","Image","Info","Link","Loader2","MoreHorizontal","Pencil","Plus","RotateCcw","RotateCw","Search","Settings","Trash2","Upload","User","X","iconNames","Icon","forwardRef","rest","Glyph","name","size","className"],"sources":["../../src/components/Icon/icons.ts","../../src/components/Icon/index.tsx"],"sourcesContent":["import {\n  AlertTriangle,\n  Bold,\n  Code,\n  Heading2,\n  Heading3,\n  Italic,\n  Link2Off,\n  List,\n  ListOrdered,\n  Quote,\n  Redo2,\n  Strikethrough,\n  Undo2,\n  Archive,\n  ArrowLeft,\n  ArrowRight,\n  Calendar,\n  Check,\n  ChevronDown,\n  ChevronLeft,\n  ChevronUp,\n  Minus,\n  ChevronRight,\n  Clock,\n  Copy,\n  Download,\n  Eye,\n  Filter,\n  Bell,\n  ChevronsLeft,\n  ChevronsRight,\n  FileText,\n  FolderClosed,\n  Globe,\n  Home,\n  LayoutGrid,\n  Menu,\n  Users,\n  GripHorizontal,\n  GripVertical,\n  Image,\n  Info,\n  Link,\n  Loader2,\n  MoreHorizontal,\n  Pencil,\n  Plus,\n  RotateCcw,\n  RotateCw,\n  Search,\n  Settings,\n  Trash2,\n  Upload,\n  User,\n  X,\n} from \"lucide-react\";\n\n/**\n * The finite icon set. Adding a glyph means adding a line here — a visible\n * decision rather than an import someone typed at a call site.\n */\nexport const icons = {\n  \"alert-triangle\": AlertTriangle,\n  archive: Archive,\n  bold: Bold,\n  code: Code,\n  \"heading-2\": Heading2,\n  \"heading-3\": Heading3,\n  italic: Italic,\n  \"link-off\": Link2Off,\n  list: List,\n  \"list-ordered\": ListOrdered,\n  quote: Quote,\n  redo: Redo2,\n  strikethrough: Strikethrough,\n  undo: Undo2,\n  \"arrow-left\": ArrowLeft,\n  \"arrow-right\": ArrowRight,\n  calendar: Calendar,\n  check: Check,\n  \"chevron-down\": ChevronDown,\n  \"chevron-left\": ChevronLeft,\n  \"chevron-up\": ChevronUp,\n  minus: Minus,\n  \"chevron-right\": ChevronRight,\n  clock: Clock,\n  copy: Copy,\n  download: Download,\n  eye: Eye,\n  filter: Filter,\n  bell: Bell,\n  \"chevrons-left\": ChevronsLeft,\n  \"chevrons-right\": ChevronsRight,\n  \"file-text\": FileText,\n  folder: FolderClosed,\n  globe: Globe,\n  home: Home,\n  \"layout-grid\": LayoutGrid,\n  menu: Menu,\n  users: Users,\n  \"grip-horizontal\": GripHorizontal,\n  \"grip-vertical\": GripVertical,\n  image: Image,\n  info: Info,\n  link: Link,\n  spinner: Loader2,\n  \"more-horizontal\": MoreHorizontal,\n  pencil: Pencil,\n  plus: Plus,\n  \"rotate-ccw\": RotateCcw,\n  \"rotate-cw\": RotateCw,\n  search: Search,\n  settings: Settings,\n  trash: Trash2,\n  upload: Upload,\n  user: User,\n  x: X,\n} as const;\n\nexport type IconName = keyof typeof icons;\n\nexport const iconNames = Object.keys(icons) as IconName[];\n","import { forwardRef, type SVGProps } from \"react\";\nimport { icons, type IconName } from \"./icons\";\nimport \"./style.css\";\n\nexport type IconSize = 16 | 20 | 24;\n\nexport interface IconProps extends Omit<SVGProps<SVGSVGElement>, \"ref\"> {\n  /** Glyph name from the curated set in `icons.ts`. */\n  name: IconName;\n  /** 16 inside controls, 20 standalone, 24 for empty states. No other sizes. */\n  size?: IconSize;\n}\n\n/**\n * A glyph that clarifies an action or a status. Inherits `currentColor`, so it\n * takes its colour from the control it sits in — it never carries its own.\n */\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(\n  { name, size = 16, className, ...rest },\n  ref,\n) {\n  const Glyph = icons[name];\n  return (\n    <Glyph\n      ref={ref}\n      width={size}\n      height={size}\n      className={[\"ds-icon\", className].filter(Boolean).join(\" \")}\n      role={rest[\"aria-label\"] ? \"img\" : undefined}\n      aria-hidden={rest[\"aria-label\"] ? undefined : true}\n      focusable=\"false\"\n      {...rest}\n    />\n  );\n});\n"],"mappings":";;;;AA8DA,IAAaA,IAAQ;CACnB,kBAAkBC;CAClB,SAASC;CACT,MAAMC;CACN,MAAMC;CACN,aAAaC;CACb,aAAaC;CACb,QAAQC;CACR,YAAYC;CACZ,MAAMC;CACN,gBAAgBC;CAChB,OAAOC;CACP,MAAMC;CACN,eAAeC;CACf,MAAMC;CACN,cAAcC;CACd,eAAeC;CACf,UAAUC;CACV,OAAOC;CACP,gBAAgBC;CAChB,gBAAgBC;CAChB,cAAcC;CACd,OAAOC;CACP,iBAAiBC;CACjB,OAAOC;CACP,MAAMC;CACN,UAAUC;CACV,KAAKC;CACL,QAAQC;CACR,MAAMC;CACN,iBAAiBC;CACjB,kBAAkBC;CAClB,aAAaC;CACb,QAAQC;CACR,OAAOC;CACP,MAAMC;CACN,eAAeC;CACf,MAAMC;CACN,OAAOC;CACP,mBAAmBC;CACnB,iBAAiBC;CACjB,OAAOC;CACP,MAAMC;CACN,MAAMC;CACN,SAASC;CACT,mBAAmBC;CACnB,QAAQC;CACR,MAAMC;CACN,cAAcC;CACd,aAAaC;CACb,QAAQC;CACR,UAAUC;CACV,OAAOC;CACP,QAAQC;CACR,MAAMC;CACN,GAAGC;AACL,GAIaC,KAAY,OAAO,KAAKxD,CAAK,GCzG7ByD,KAAOC,EAAqC,SACvD,EAAE,SAAM,UAAO,IAAI,cAAW,GAAGC,KACjC,GACA;CACA,IAAMC,IAAQ5D,EAAM6D;CACpB,OACE,mBAACD,GAAD;EACO;EACL,OAAOE;EACP,QAAQA;EACR,WAAW,CAAC,WAAWC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;EAC1D,MAAMJ,EAAK,gBAAgB,QAAQ,KAAA;EACnC,eAAa,GAAK,iBAAgB,KAAA;EAClC,WAAU;EACV,GAAIA;CACL,CAAA;AAEL,CAAC"}

package/dist/chunks/Icon-CWsA1W83.cjs

@@ -0,0 +1,2 @@
+let e=require("react"),t=require("lucide-react"),n=require("react/jsx-runtime");var r={"alert-triangle":t.AlertTriangle,archive:t.Archive,bold:t.Bold,code:t.Code,"heading-2":t.Heading2,"heading-3":t.Heading3,italic:t.Italic,"link-off":t.Link2Off,list:t.List,"list-ordered":t.ListOrdered,quote:t.Quote,redo:t.Redo2,strikethrough:t.Strikethrough,undo:t.Undo2,"arrow-left":t.ArrowLeft,"arrow-right":t.ArrowRight,calendar:t.Calendar,check:t.Check,"chevron-down":t.ChevronDown,"chevron-left":t.ChevronLeft,"chevron-up":t.ChevronUp,minus:t.Minus,"chevron-right":t.ChevronRight,clock:t.Clock,copy:t.Copy,download:t.Download,eye:t.Eye,filter:t.Filter,bell:t.Bell,"chevrons-left":t.ChevronsLeft,"chevrons-right":t.ChevronsRight,"file-text":t.FileText,folder:t.FolderClosed,globe:t.Globe,home:t.Home,"layout-grid":t.LayoutGrid,menu:t.Menu,users:t.Users,"grip-horizontal":t.GripHorizontal,"grip-vertical":t.GripVertical,image:t.Image,info:t.Info,link:t.Link,spinner:t.Loader2,"more-horizontal":t.MoreHorizontal,pencil:t.Pencil,plus:t.Plus,"rotate-ccw":t.RotateCcw,"rotate-cw":t.RotateCw,search:t.Search,settings:t.Settings,trash:t.Trash2,upload:t.Upload,user:t.User,x:t.X},i=Object.keys(r),a=(0,e.forwardRef)(function({name:e,size:t=16,className:i,...a},o){let s=r[e];return(0,n.jsx)(s,{ref:o,width:t,height:t,className:[`ds-icon`,i].filter(Boolean).join(` `),role:a[`aria-label`]?`img`:void 0,"aria-hidden":!a[`aria-label`]||void 0,focusable:`false`,...a})});Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});
+//# sourceMappingURL=Icon-CWsA1W83.cjs.map

package/dist/chunks/Icon-CWsA1W83.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon-CWsA1W83.cjs","names":["AlertTriangle","Archive","Bold","Code","Heading2","Heading3","Italic","Link2Off","List","ListOrdered","Quote","Redo2","Strikethrough","Undo2","ArrowLeft","ArrowRight","Calendar","Check","ChevronDown","ChevronLeft","ChevronUp","Minus","ChevronRight","Clock","Copy","Download","Eye","Filter","Bell","ChevronsLeft","ChevronsRight","FileText","FolderClosed","Globe","Home","LayoutGrid","Menu","Users","GripHorizontal","GripVertical","Image","Info","Link","Loader2","MoreHorizontal","Pencil","Plus","RotateCcw","RotateCw","Search","Settings","Trash2","Upload","User","X","forwardRef","react","lucide_react","react_jsx_runtime","icons","iconNames","Icon","rest","Glyph","name","size","className"],"sources":["../../src/components/Icon/icons.ts","../../src/components/Icon/index.tsx"],"sourcesContent":["import {\n  AlertTriangle,\n  Bold,\n  Code,\n  Heading2,\n  Heading3,\n  Italic,\n  Link2Off,\n  List,\n  ListOrdered,\n  Quote,\n  Redo2,\n  Strikethrough,\n  Undo2,\n  Archive,\n  ArrowLeft,\n  ArrowRight,\n  Calendar,\n  Check,\n  ChevronDown,\n  ChevronLeft,\n  ChevronUp,\n  Minus,\n  ChevronRight,\n  Clock,\n  Copy,\n  Download,\n  Eye,\n  Filter,\n  Bell,\n  ChevronsLeft,\n  ChevronsRight,\n  FileText,\n  FolderClosed,\n  Globe,\n  Home,\n  LayoutGrid,\n  Menu,\n  Users,\n  GripHorizontal,\n  GripVertical,\n  Image,\n  Info,\n  Link,\n  Loader2,\n  MoreHorizontal,\n  Pencil,\n  Plus,\n  RotateCcw,\n  RotateCw,\n  Search,\n  Settings,\n  Trash2,\n  Upload,\n  User,\n  X,\n} from \"lucide-react\";\n\n/**\n * The finite icon set. Adding a glyph means adding a line here — a visible\n * decision rather than an import someone typed at a call site.\n */\nexport const icons = {\n  \"alert-triangle\": AlertTriangle,\n  archive: Archive,\n  bold: Bold,\n  code: Code,\n  \"heading-2\": Heading2,\n  \"heading-3\": Heading3,\n  italic: Italic,\n  \"link-off\": Link2Off,\n  list: List,\n  \"list-ordered\": ListOrdered,\n  quote: Quote,\n  redo: Redo2,\n  strikethrough: Strikethrough,\n  undo: Undo2,\n  \"arrow-left\": ArrowLeft,\n  \"arrow-right\": ArrowRight,\n  calendar: Calendar,\n  check: Check,\n  \"chevron-down\": ChevronDown,\n  \"chevron-left\": ChevronLeft,\n  \"chevron-up\": ChevronUp,\n  minus: Minus,\n  \"chevron-right\": ChevronRight,\n  clock: Clock,\n  copy: Copy,\n  download: Download,\n  eye: Eye,\n  filter: Filter,\n  bell: Bell,\n  \"chevrons-left\": ChevronsLeft,\n  \"chevrons-right\": ChevronsRight,\n  \"file-text\": FileText,\n  folder: FolderClosed,\n  globe: Globe,\n  home: Home,\n  \"layout-grid\": LayoutGrid,\n  menu: Menu,\n  users: Users,\n  \"grip-horizontal\": GripHorizontal,\n  \"grip-vertical\": GripVertical,\n  image: Image,\n  info: Info,\n  link: Link,\n  spinner: Loader2,\n  \"more-horizontal\": MoreHorizontal,\n  pencil: Pencil,\n  plus: Plus,\n  \"rotate-ccw\": RotateCcw,\n  \"rotate-cw\": RotateCw,\n  search: Search,\n  settings: Settings,\n  trash: Trash2,\n  upload: Upload,\n  user: User,\n  x: X,\n} as const;\n\nexport type IconName = keyof typeof icons;\n\nexport const iconNames = Object.keys(icons) as IconName[];\n","import { forwardRef, type SVGProps } from \"react\";\nimport { icons, type IconName } from \"./icons\";\nimport \"./style.css\";\n\nexport type IconSize = 16 | 20 | 24;\n\nexport interface IconProps extends Omit<SVGProps<SVGSVGElement>, \"ref\"> {\n  /** Glyph name from the curated set in `icons.ts`. */\n  name: IconName;\n  /** 16 inside controls, 20 standalone, 24 for empty states. No other sizes. */\n  size?: IconSize;\n}\n\n/**\n * A glyph that clarifies an action or a status. Inherits `currentColor`, so it\n * takes its colour from the control it sits in — it never carries its own.\n */\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon(\n  { name, size = 16, className, ...rest },\n  ref,\n) {\n  const Glyph = icons[name];\n  return (\n    <Glyph\n      ref={ref}\n      width={size}\n      height={size}\n      className={[\"ds-icon\", className].filter(Boolean).join(\" \")}\n      role={rest[\"aria-label\"] ? \"img\" : undefined}\n      aria-hidden={rest[\"aria-label\"] ? undefined : true}\n      focusable=\"false\"\n      {...rest}\n    />\n  );\n});\n"],"mappings":"A,gFA8DA,IAAa2D,EAAQ,CACnB,iBAAkB3D,EAAAA,cAClB,QAASC,EAAAA,QACT,KAAMC,EAAAA,KACN,KAAMC,EAAAA,KACN,YAAaC,EAAAA,SACb,YAAaC,EAAAA,SACb,OAAQC,EAAAA,OACR,WAAYC,EAAAA,SACZ,KAAMC,EAAAA,KACN,eAAgBC,EAAAA,YAChB,MAAOC,EAAAA,MACP,KAAMC,EAAAA,MACN,cAAeC,EAAAA,cACf,KAAMC,EAAAA,MACN,aAAcC,EAAAA,UACd,cAAeC,EAAAA,WACf,SAAUC,EAAAA,SACV,MAAOC,EAAAA,MACP,eAAgBC,EAAAA,YAChB,eAAgBC,EAAAA,YAChB,aAAcC,EAAAA,UACd,MAAOC,EAAAA,MACP,gBAAiBC,EAAAA,aACjB,MAAOC,EAAAA,MACP,KAAMC,EAAAA,KACN,SAAUC,EAAAA,SACV,IAAKC,EAAAA,IACL,OAAQC,EAAAA,OACR,KAAMC,EAAAA,KACN,gBAAiBC,EAAAA,aACjB,iBAAkBC,EAAAA,cAClB,YAAaC,EAAAA,SACb,OAAQC,EAAAA,aACR,MAAOC,EAAAA,MACP,KAAMC,EAAAA,KACN,cAAeC,EAAAA,WACf,KAAMC,EAAAA,KACN,MAAOC,EAAAA,MACP,kBAAmBC,EAAAA,eACnB,gBAAiBC,EAAAA,aACjB,MAAOC,EAAAA,MACP,KAAMC,EAAAA,KACN,KAAMC,EAAAA,KACN,QAASC,EAAAA,QACT,kBAAmBC,EAAAA,eACnB,OAAQC,EAAAA,OACR,KAAMC,EAAAA,KACN,aAAcC,EAAAA,UACd,YAAaC,EAAAA,SACb,OAAQC,EAAAA,OACR,SAAUC,EAAAA,SACV,MAAOC,EAAAA,OACP,OAAQC,EAAAA,OACR,KAAMC,EAAAA,KACN,EAAGC,EAAAA,CACL,EAIaM,EAAY,OAAO,KAAKD,CAAK,ECzG7BE,GAAA,EAAON,EAAAA,WAAAA,CAAqC,SACvD,CAAE,OAAM,OAAO,GAAI,YAAW,GAAGO,GACjC,EACA,CACA,IAAMC,EAAQJ,EAAMK,GACpB,OACE,EAAAN,EAAA,IAAA,CAACK,EAAD,CACO,MACL,MAAOE,EACP,OAAQA,EACR,UAAW,CAAC,UAAWC,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,EAC1D,KAAMJ,EAAK,cAAgB,MAAQ,IAAA,GACnC,cAAa,GAAK,eAAgB,IAAA,GAClC,UAAU,QACV,GAAIA,CACL,CAAA,CAEL,CAAC,E"}

package/dist/components/AssetGrid/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Grid/index.cjs"),n=require("../Skeleton/index.cjs");let r=require("react"),i=require("react/jsx-runtime");function a(...e){return e.filter(Boolean).join(` `)}var o=(0,r.forwardRef)(function({isLoading:e=!1,loadingCount:n=8,className:r,children:o,...c},l){return(0,i.jsx)(t.Grid,{ref:l,columns:`auto`,gap:`md`,minColumnWidth:`var(--asset-tile-min-width)`,className:a(`ds-asset-grid`,r),"aria-busy":e||void 0,...c,children:e?Array.from({length:n},(e,t)=>(0,i.jsx)(s,{index:t},t)):o})});function s({index:e=0}){let t={animationDelay:`calc(var(--skeleton-stagger) * ${e})`};return(0,i.jsxs)(`div`,{className:`ds-asset-tile`,"data-loading":`true`,"aria-hidden":`true`,children:[(0,i.jsx)(n.Skeleton,{shape:`block`,className:`ds-asset-tile__thumb`,style:t}),(0,i.jsxs)(`div`,{className:`ds-asset-tile__text`,children:[(0,i.jsx)(n.Skeleton,{shape:`text`,width:`80%`,style:t}),(0,i.jsx)(n.Skeleton,{shape:`text`,width:`45%`,style:t})]})]})}var c=(0,r.forwardRef)(function({name:t,src:o,icon:s=`image`,meta:c,isSelected:l=!1,isPending:u=!1,onSelect:d,actions:f,className:p,...m},h){let[g,_]=(0,r.useState)(!1),[v,y]=(0,r.useState)(!1),b=!!o&&!g;return(0,i.jsxs)(`div`,{ref:h,className:a(`ds-asset-tile`,p),"data-selected":l||void 0,"data-pending":u||void 0,...m,children:[(0,i.jsxs)(`div`,{className:`ds-asset-tile__thumb`,children:[b?(0,i.jsxs)(i.Fragment,{children:[!v&&(0,i.jsx)(n.Skeleton,{shape:`block`,className:`ds-asset-tile__thumb-skeleton`}),(0,i.jsx)(`img`,{src:o,alt:``,loading:`lazy`,"data-loaded":v||void 0,onLoad:()=>y(!0),onError:()=>_(!0)})]}):(0,i.jsx)(`span`,{className:`ds-asset-tile__placeholder`,children:(0,i.jsx)(e.t,{name:g?`alert-triangle`:s,size:24})}),u&&(0,i.jsxs)(`span`,{className:`ds-asset-tile__pending`,role:`status`,children:[(0,i.jsx)(e.t,{name:`spinner`,size:20,className:`ds-asset-tile__spinner`}),(0,i.jsx)(`span`,{className:`ds-asset-tile__pending-label`,children:`Uploading`})]}),f&&(0,i.jsx)(`div`,{className:`ds-asset-tile__actions`,children:f}),d&&(0,i.jsx)(`button`,{type:`button`,className:`ds-asset-tile__hit`,"aria-pressed":l,disabled:u,onClick:d,children:(0,i.jsx)(`span`,{className:`ds-asset-tile__hit-label`,children:t})})]}),(0,i.jsxs)(`div`,{className:`ds-asset-tile__text`,children:[(0,i.jsx)(`span`,{className:`ds-asset-tile__name`,children:t}),c&&(0,i.jsx)(`span`,{className:`ds-asset-tile__meta`,children:c})]})]})});function l({title:t,description:n,action:r}){return(0,i.jsxs)(`div`,{className:`ds-asset-empty`,children:[(0,i.jsx)(e.t,{name:`image`,size:24}),(0,i.jsx)(`span`,{className:`ds-asset-empty__title`,children:t}),n&&(0,i.jsx)(`span`,{className:`ds-asset-empty__description`,children:n}),r]})}exports.AssetGrid=o,exports.AssetGridEmpty=l,exports.AssetTile=c,exports.AssetTileSkeleton=s;
+//# sourceMappingURL=index.cjs.map

package/dist/components/AssetGrid/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","Grid","Skeleton","useState","_Fragment","Icon","require_Icon","require_components_Grid_index","require_components_Skeleton_index","react","react_jsx_runtime","cx","parts","AssetGrid","rest","className","isLoading","loadingCount","AssetTileSkeleton","i","children","delay","index","AssetTile","hasFailed","setHasFailed","isLoaded","setIsLoaded","showImage","src","isSelected","isPending","icon","actions","onSelect","name","meta","AssetGridEmpty","title","description","action"],"sources":["../../../src/components/AssetGrid/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Grid } from \"../Grid\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport { Skeleton } from \"../Skeleton\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface AssetGridProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Renders placeholder tiles instead of children. The grid keeps its\n   * geometry, so nothing moves when the real assets arrive.\n   */\n  isLoading?: boolean;\n  /** How many placeholder tiles to show while loading. */\n  loadingCount?: number;\n  children?: ReactNode;\n}\n\n/**\n * The media library surface: an auto-filling grid of asset tiles. Sits inside\n * a `TableFrame` when it is the page's collection, bare inside a drawer.\n */\nexport const AssetGrid = forwardRef<HTMLDivElement, AssetGridProps>(function AssetGrid(\n  { isLoading = false, loadingCount = 8, className, children, ...rest },\n  ref,\n) {\n  return (\n    <Grid\n      ref={ref}\n      columns=\"auto\"\n      gap=\"md\"\n      minColumnWidth=\"var(--asset-tile-min-width)\"\n      className={cx(\"ds-asset-grid\", className)}\n      aria-busy={isLoading || undefined}\n      {...rest}\n    >\n      {isLoading\n        ? Array.from({ length: loadingCount }, (_, i) => <AssetTileSkeleton key={i} index={i} />)\n        : children}\n    </Grid>\n  );\n});\n\nexport interface AssetTileSkeletonProps {\n  /** Position in the grid — drives the stagger, nothing else. */\n  index?: number;\n}\n\n/** One loading tile: thumbnail block, name line, meta line. */\nexport function AssetTileSkeleton({ index = 0 }: AssetTileSkeletonProps) {\n  const delay = { animationDelay: `calc(var(--skeleton-stagger) * ${index})` };\n  return (\n    <div className=\"ds-asset-tile\" data-loading=\"true\" aria-hidden=\"true\">\n      <Skeleton shape=\"block\" className=\"ds-asset-tile__thumb\" style={delay} />\n      <div className=\"ds-asset-tile__text\">\n        <Skeleton shape=\"text\" width=\"80%\" style={delay} />\n        <Skeleton shape=\"text\" width=\"45%\" style={delay} />\n      </div>\n    </div>\n  );\n}\n\nexport interface AssetTileProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\" | \"title\"> {\n  /** File name, shown in full — asset names are how people find things again. */\n  name: string;\n  /** Thumbnail source. Omit for a non-image asset and pass an `icon` instead. */\n  src?: string;\n  /** Glyph shown when there is no thumbnail, or while one fails to load. */\n  icon?: IconName;\n  /** Second line: dimensions, size, date — whatever the library sorts by. */\n  meta?: ReactNode;\n  /** Paints the soft fill and the solid rail. Never changes the tile's size. */\n  isSelected?: boolean;\n  /** The asset is still uploading or processing: dimmed, with a spinner. */\n  isPending?: boolean;\n  /** Makes the whole tile a selection target. */\n  onSelect?: () => void;\n  /** Badges or a menu, pinned to the top of the thumbnail. */\n  actions?: ReactNode;\n}\n\n/**\n * One asset in the library. Selection paints a fill and a rail exactly like a\n * table row, so a grid and a list read as the same collection in two shapes.\n */\nexport const AssetTile = forwardRef<HTMLDivElement, AssetTileProps>(function AssetTile(\n  {\n    name,\n    src,\n    icon = \"image\",\n    meta,\n    isSelected = false,\n    isPending = false,\n    onSelect,\n    actions,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [hasFailed, setHasFailed] = useState(false);\n  const [isLoaded, setIsLoaded] = useState(false);\n  const showImage = Boolean(src) && !hasFailed;\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\"ds-asset-tile\", className)}\n      data-selected={isSelected || undefined}\n      data-pending={isPending || undefined}\n      {...rest}\n    >\n      <div className=\"ds-asset-tile__thumb\">\n        {showImage ? (\n          <>\n            {!isLoaded && <Skeleton shape=\"block\" className=\"ds-asset-tile__thumb-skeleton\" />}\n            <img\n              src={src}\n              alt=\"\"\n              loading=\"lazy\"\n              data-loaded={isLoaded || undefined}\n              onLoad={() => setIsLoaded(true)}\n              onError={() => setHasFailed(true)}\n            />\n          </>\n        ) : (\n          <span className=\"ds-asset-tile__placeholder\">\n            <Icon name={hasFailed ? \"alert-triangle\" : icon} size={24} />\n          </span>\n        )}\n\n        {isPending && (\n          <span className=\"ds-asset-tile__pending\" role=\"status\">\n            <Icon name=\"spinner\" size={20} className=\"ds-asset-tile__spinner\" />\n            <span className=\"ds-asset-tile__pending-label\">Uploading</span>\n          </span>\n        )}\n\n        {actions && <div className=\"ds-asset-tile__actions\">{actions}</div>}\n\n        {onSelect && (\n          <button\n            type=\"button\"\n            className=\"ds-asset-tile__hit\"\n            aria-pressed={isSelected}\n            disabled={isPending}\n            onClick={onSelect}\n          >\n            <span className=\"ds-asset-tile__hit-label\">{name}</span>\n          </button>\n        )}\n      </div>\n\n      <div className=\"ds-asset-tile__text\">\n        <span className=\"ds-asset-tile__name\">{name}</span>\n        {meta && <span className=\"ds-asset-tile__meta\">{meta}</span>}\n      </div>\n    </div>\n  );\n});\n\nexport interface AssetGridEmptyProps {\n  title: string;\n  description?: ReactNode;\n  action?: ReactNode;\n}\n\n/** Nothing in the library yet — one action, the one that fills it. */\nexport function AssetGridEmpty({ title, description, action }: AssetGridEmptyProps) {\n  return (\n    <div className=\"ds-asset-empty\">\n      <Icon name=\"image\" size={24} />\n      <span className=\"ds-asset-empty__title\">{title}</span>\n      {description && <span className=\"ds-asset-empty__description\">{description}</span>}\n      {action}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/AssetGrid/index.d.cts

@@ -0,0 +1,54 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import type { IconName } from "../Icon/icons.cjs";
+export interface AssetGridProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Renders placeholder tiles instead of children. The grid keeps its
+     * geometry, so nothing moves when the real assets arrive.
+     */
+    isLoading?: boolean;
+    /** How many placeholder tiles to show while loading. */
+    loadingCount?: number;
+    children?: ReactNode;
+}
+/**
+ * The media library surface: an auto-filling grid of asset tiles. Sits inside
+ * a `TableFrame` when it is the page's collection, bare inside a drawer.
+ */
+export declare const AssetGrid: import("react").ForwardRefExoticComponent<AssetGridProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AssetTileSkeletonProps {
+    /** Position in the grid — drives the stagger, nothing else. */
+    index?: number;
+}
+/** One loading tile: thumbnail block, name line, meta line. */
+export declare function AssetTileSkeleton({ index }: AssetTileSkeletonProps): import("react").JSX.Element;
+export interface AssetTileProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect" | "title"> {
+    /** File name, shown in full — asset names are how people find things again. */
+    name: string;
+    /** Thumbnail source. Omit for a non-image asset and pass an `icon` instead. */
+    src?: string;
+    /** Glyph shown when there is no thumbnail, or while one fails to load. */
+    icon?: IconName;
+    /** Second line: dimensions, size, date — whatever the library sorts by. */
+    meta?: ReactNode;
+    /** Paints the soft fill and the solid rail. Never changes the tile's size. */
+    isSelected?: boolean;
+    /** The asset is still uploading or processing: dimmed, with a spinner. */
+    isPending?: boolean;
+    /** Makes the whole tile a selection target. */
+    onSelect?: () => void;
+    /** Badges or a menu, pinned to the top of the thumbnail. */
+    actions?: ReactNode;
+}
+/**
+ * One asset in the library. Selection paints a fill and a rail exactly like a
+ * table row, so a grid and a list read as the same collection in two shapes.
+ */
+export declare const AssetTile: import("react").ForwardRefExoticComponent<AssetTileProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AssetGridEmptyProps {
+    title: string;
+    description?: ReactNode;
+    action?: ReactNode;
+}
+/** Nothing in the library yet — one action, the one that fills it. */
+export declare function AssetGridEmpty({ title, description, action }: AssetGridEmptyProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.cts.map

package/dist/components/AssetGrid/index.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AssetGrid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,2GAmBpB,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACrC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,+DAA+D;AAC/D,wBAAgB,iBAAiB,CAAC,EAAE,KAAS,EAAE,EAAE,sBAAsB,+BAWtE;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAClE,+EAA+E;IAC/E,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,2GA0EpB,CAAC;AAEH,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,sEAAsE;AACtE,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BASjF"}

package/dist/components/AssetGrid/index.d.ts

@@ -0,0 +1,54 @@
+import { type HTMLAttributes, type ReactNode } from "react";
+import type { IconName } from "../Icon/icons.js";
+export interface AssetGridProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Renders placeholder tiles instead of children. The grid keeps its
+     * geometry, so nothing moves when the real assets arrive.
+     */
+    isLoading?: boolean;
+    /** How many placeholder tiles to show while loading. */
+    loadingCount?: number;
+    children?: ReactNode;
+}
+/**
+ * The media library surface: an auto-filling grid of asset tiles. Sits inside
+ * a `TableFrame` when it is the page's collection, bare inside a drawer.
+ */
+export declare const AssetGrid: import("react").ForwardRefExoticComponent<AssetGridProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AssetTileSkeletonProps {
+    /** Position in the grid — drives the stagger, nothing else. */
+    index?: number;
+}
+/** One loading tile: thumbnail block, name line, meta line. */
+export declare function AssetTileSkeleton({ index }: AssetTileSkeletonProps): import("react").JSX.Element;
+export interface AssetTileProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect" | "title"> {
+    /** File name, shown in full — asset names are how people find things again. */
+    name: string;
+    /** Thumbnail source. Omit for a non-image asset and pass an `icon` instead. */
+    src?: string;
+    /** Glyph shown when there is no thumbnail, or while one fails to load. */
+    icon?: IconName;
+    /** Second line: dimensions, size, date — whatever the library sorts by. */
+    meta?: ReactNode;
+    /** Paints the soft fill and the solid rail. Never changes the tile's size. */
+    isSelected?: boolean;
+    /** The asset is still uploading or processing: dimmed, with a spinner. */
+    isPending?: boolean;
+    /** Makes the whole tile a selection target. */
+    onSelect?: () => void;
+    /** Badges or a menu, pinned to the top of the thumbnail. */
+    actions?: ReactNode;
+}
+/**
+ * One asset in the library. Selection paints a fill and a rail exactly like a
+ * table row, so a grid and a list read as the same collection in two shapes.
+ */
+export declare const AssetTile: import("react").ForwardRefExoticComponent<AssetTileProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface AssetGridEmptyProps {
+    title: string;
+    description?: ReactNode;
+    action?: ReactNode;
+}
+/** Nothing in the library yet — one action, the one that fills it. */
+export declare function AssetGridEmpty({ title, description, action }: AssetGridEmptyProps): import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/AssetGrid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AssetGrid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,2GAmBpB,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACrC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,+DAA+D;AAC/D,wBAAgB,iBAAiB,CAAC,EAAE,KAAS,EAAE,EAAE,sBAAsB,+BAWtE;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAClE,+EAA+E;IAC/E,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,2GA0EpB,CAAC;AAEH,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,sEAAsE;AACtE,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BASjF"}

package/dist/components/AssetGrid/index.js

@@ -0,0 +1,137 @@
+import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
+import { Grid as t } from "../Grid/index.js";
+import { Skeleton as n } from "../Skeleton/index.js";
+import { forwardRef as r, useState as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/AssetGrid/index.tsx
+function c(...e) {
+	return e.filter(Boolean).join(" ");
+}
+var l = r(function({ isLoading: e = !1, loadingCount: n = 8, className: r, children: i, ...a }, s) {
+	return /* @__PURE__ */ o(t, {
+		ref: s,
+		columns: "auto",
+		gap: "md",
+		minColumnWidth: "var(--asset-tile-min-width)",
+		className: c("ds-asset-grid", r),
+		"aria-busy": e || void 0,
+		...a,
+		children: e ? Array.from({ length: n }, (e, t) => /* @__PURE__ */ o(u, { index: t }, t)) : i
+	});
+});
+function u({ index: e = 0 }) {
+	let t = { animationDelay: `calc(var(--skeleton-stagger) * ${e})` };
+	return /* @__PURE__ */ s("div", {
+		className: "ds-asset-tile",
+		"data-loading": "true",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ o(n, {
+			shape: "block",
+			className: "ds-asset-tile__thumb",
+			style: t
+		}), /* @__PURE__ */ s("div", {
+			className: "ds-asset-tile__text",
+			children: [/* @__PURE__ */ o(n, {
+				shape: "text",
+				width: "80%",
+				style: t
+			}), /* @__PURE__ */ o(n, {
+				shape: "text",
+				width: "45%",
+				style: t
+			})]
+		})]
+	});
+}
+var d = r(function({ name: t, src: r, icon: l = "image", meta: u, isSelected: d = !1, isPending: f = !1, onSelect: p, actions: m, className: h, ...g }, _) {
+	let [v, y] = i(!1), [b, x] = i(!1), S = !!r && !v;
+	return /* @__PURE__ */ s("div", {
+		ref: _,
+		className: c("ds-asset-tile", h),
+		"data-selected": d || void 0,
+		"data-pending": f || void 0,
+		...g,
+		children: [/* @__PURE__ */ s("div", {
+			className: "ds-asset-tile__thumb",
+			children: [
+				S ? /* @__PURE__ */ s(a, { children: [!b && /* @__PURE__ */ o(n, {
+					shape: "block",
+					className: "ds-asset-tile__thumb-skeleton"
+				}), /* @__PURE__ */ o("img", {
+					src: r,
+					alt: "",
+					loading: "lazy",
+					"data-loaded": b || void 0,
+					onLoad: () => x(!0),
+					onError: () => y(!0)
+				})] }) : /* @__PURE__ */ o("span", {
+					className: "ds-asset-tile__placeholder",
+					children: /* @__PURE__ */ o(e, {
+						name: v ? "alert-triangle" : l,
+						size: 24
+					})
+				}),
+				f && /* @__PURE__ */ s("span", {
+					className: "ds-asset-tile__pending",
+					role: "status",
+					children: [/* @__PURE__ */ o(e, {
+						name: "spinner",
+						size: 20,
+						className: "ds-asset-tile__spinner"
+					}), /* @__PURE__ */ o("span", {
+						className: "ds-asset-tile__pending-label",
+						children: "Uploading"
+					})]
+				}),
+				m && /* @__PURE__ */ o("div", {
+					className: "ds-asset-tile__actions",
+					children: m
+				}),
+				p && /* @__PURE__ */ o("button", {
+					type: "button",
+					className: "ds-asset-tile__hit",
+					"aria-pressed": d,
+					disabled: f,
+					onClick: p,
+					children: /* @__PURE__ */ o("span", {
+						className: "ds-asset-tile__hit-label",
+						children: t
+					})
+				})
+			]
+		}), /* @__PURE__ */ s("div", {
+			className: "ds-asset-tile__text",
+			children: [/* @__PURE__ */ o("span", {
+				className: "ds-asset-tile__name",
+				children: t
+			}), u && /* @__PURE__ */ o("span", {
+				className: "ds-asset-tile__meta",
+				children: u
+			})]
+		})]
+	});
+});
+function f({ title: t, description: n, action: r }) {
+	return /* @__PURE__ */ s("div", {
+		className: "ds-asset-empty",
+		children: [
+			/* @__PURE__ */ o(e, {
+				name: "image",
+				size: 24
+			}),
+			/* @__PURE__ */ o("span", {
+				className: "ds-asset-empty__title",
+				children: t
+			}),
+			n && /* @__PURE__ */ o("span", {
+				className: "ds-asset-empty__description",
+				children: n
+			}),
+			r
+		]
+	});
+}
+//#endregion
+export { l as AssetGrid, f as AssetGridEmpty, d as AssetTile, u as AssetTileSkeleton };
+
+//# sourceMappingURL=index.js.map

package/dist/components/AssetGrid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["_Fragment","Icon","cx","parts","AssetGrid","forwardRef","rest","Grid","className","isLoading","loadingCount","AssetTileSkeleton","i","children","delay","index","Skeleton","AssetTile","hasFailed","setHasFailed","useState","isLoaded","setIsLoaded","showImage","src","isSelected","isPending","Fragment","icon","actions","onSelect","name","meta","AssetGridEmpty","title","description","action"],"sources":["../../../src/components/AssetGrid/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport { Grid } from \"../Grid\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport { Skeleton } from \"../Skeleton\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport interface AssetGridProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Renders placeholder tiles instead of children. The grid keeps its\n   * geometry, so nothing moves when the real assets arrive.\n   */\n  isLoading?: boolean;\n  /** How many placeholder tiles to show while loading. */\n  loadingCount?: number;\n  children?: ReactNode;\n}\n\n/**\n * The media library surface: an auto-filling grid of asset tiles. Sits inside\n * a `TableFrame` when it is the page's collection, bare inside a drawer.\n */\nexport const AssetGrid = forwardRef<HTMLDivElement, AssetGridProps>(function AssetGrid(\n  { isLoading = false, loadingCount = 8, className, children, ...rest },\n  ref,\n) {\n  return (\n    <Grid\n      ref={ref}\n      columns=\"auto\"\n      gap=\"md\"\n      minColumnWidth=\"var(--asset-tile-min-width)\"\n      className={cx(\"ds-asset-grid\", className)}\n      aria-busy={isLoading || undefined}\n      {...rest}\n    >\n      {isLoading\n        ? Array.from({ length: loadingCount }, (_, i) => <AssetTileSkeleton key={i} index={i} />)\n        : children}\n    </Grid>\n  );\n});\n\nexport interface AssetTileSkeletonProps {\n  /** Position in the grid — drives the stagger, nothing else. */\n  index?: number;\n}\n\n/** One loading tile: thumbnail block, name line, meta line. */\nexport function AssetTileSkeleton({ index = 0 }: AssetTileSkeletonProps) {\n  const delay = { animationDelay: `calc(var(--skeleton-stagger) * ${index})` };\n  return (\n    <div className=\"ds-asset-tile\" data-loading=\"true\" aria-hidden=\"true\">\n      <Skeleton shape=\"block\" className=\"ds-asset-tile__thumb\" style={delay} />\n      <div className=\"ds-asset-tile__text\">\n        <Skeleton shape=\"text\" width=\"80%\" style={delay} />\n        <Skeleton shape=\"text\" width=\"45%\" style={delay} />\n      </div>\n    </div>\n  );\n}\n\nexport interface AssetTileProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\" | \"title\"> {\n  /** File name, shown in full — asset names are how people find things again. */\n  name: string;\n  /** Thumbnail source. Omit for a non-image asset and pass an `icon` instead. */\n  src?: string;\n  /** Glyph shown when there is no thumbnail, or while one fails to load. */\n  icon?: IconName;\n  /** Second line: dimensions, size, date — whatever the library sorts by. */\n  meta?: ReactNode;\n  /** Paints the soft fill and the solid rail. Never changes the tile's size. */\n  isSelected?: boolean;\n  /** The asset is still uploading or processing: dimmed, with a spinner. */\n  isPending?: boolean;\n  /** Makes the whole tile a selection target. */\n  onSelect?: () => void;\n  /** Badges or a menu, pinned to the top of the thumbnail. */\n  actions?: ReactNode;\n}\n\n/**\n * One asset in the library. Selection paints a fill and a rail exactly like a\n * table row, so a grid and a list read as the same collection in two shapes.\n */\nexport const AssetTile = forwardRef<HTMLDivElement, AssetTileProps>(function AssetTile(\n  {\n    name,\n    src,\n    icon = \"image\",\n    meta,\n    isSelected = false,\n    isPending = false,\n    onSelect,\n    actions,\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const [hasFailed, setHasFailed] = useState(false);\n  const [isLoaded, setIsLoaded] = useState(false);\n  const showImage = Boolean(src) && !hasFailed;\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\"ds-asset-tile\", className)}\n      data-selected={isSelected || undefined}\n      data-pending={isPending || undefined}\n      {...rest}\n    >\n      <div className=\"ds-asset-tile__thumb\">\n        {showImage ? (\n          <>\n            {!isLoaded && <Skeleton shape=\"block\" className=\"ds-asset-tile__thumb-skeleton\" />}\n            <img\n              src={src}\n              alt=\"\"\n              loading=\"lazy\"\n              data-loaded={isLoaded || undefined}\n              onLoad={() => setIsLoaded(true)}\n              onError={() => setHasFailed(true)}\n            />\n          </>\n        ) : (\n          <span className=\"ds-asset-tile__placeholder\">\n            <Icon name={hasFailed ? \"alert-triangle\" : icon} size={24} />\n          </span>\n        )}\n\n        {isPending && (\n          <span className=\"ds-asset-tile__pending\" role=\"status\">\n            <Icon name=\"spinner\" size={20} className=\"ds-asset-tile__spinner\" />\n            <span className=\"ds-asset-tile__pending-label\">Uploading</span>\n          </span>\n        )}\n\n        {actions && <div className=\"ds-asset-tile__actions\">{actions}</div>}\n\n        {onSelect && (\n          <button\n            type=\"button\"\n            className=\"ds-asset-tile__hit\"\n            aria-pressed={isSelected}\n            disabled={isPending}\n            onClick={onSelect}\n          >\n            <span className=\"ds-asset-tile__hit-label\">{name}</span>\n          </button>\n        )}\n      </div>\n\n      <div className=\"ds-asset-tile__text\">\n        <span className=\"ds-asset-tile__name\">{name}</span>\n        {meta && <span className=\"ds-asset-tile__meta\">{meta}</span>}\n      </div>\n    </div>\n  );\n});\n\nexport interface AssetGridEmptyProps {\n  title: string;\n  description?: ReactNode;\n  action?: ReactNode;\n}\n\n/** Nothing in the library yet — one action, the one that fills it. */\nexport function AssetGridEmpty({ title, description, action }: AssetGridEmptyProps) {\n  return (\n    <div className=\"ds-asset-empty\">\n      <Icon name=\"image\" size={24} />\n      <span className=\"ds-asset-empty__title\">{title}</span>\n      {description && <span className=\"ds-asset-empty__description\">{description}</span>}\n      {action}\n    </div>\n  );\n}\n"],"mappings":"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"}