@namroodinc/liquid-editorial 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,44 @@
+import { type HTMLAttributes } from "react";
+/** Gap steps map onto the spacing scale — never a raw pixel value. */
+export type GapSize = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+/** Column counts the system offers. `auto` fills by minimum column width. */
+export type GridColumns = 1 | 2 | 3 | 4 | 6 | 12 | "auto";
+export type GridAlign = "start" | "center" | "end" | "stretch";
+export interface GridProps extends HTMLAttributes<HTMLDivElement> {
+    /** Columns at the widest. Narrow containers step down automatically. */
+    columns?: GridColumns;
+    /** Space between every child, in both axes. */
+    gap?: GapSize;
+    /** Override the row gap when rows should breathe differently. */
+    rowGap?: GapSize;
+    /** Smallest a column may get before the grid drops one, for `columns="auto"`. */
+    minColumnWidth?: string;
+    align?: GridAlign;
+    /** Render as a different element — `ul`, `section`, and so on. */
+    as?: "div" | "ul" | "ol" | "section";
+}
+/**
+ * A spacing wrapper. Put things inside it and they take their rhythm from the
+ * wrapper's `gap` — no margins on the children, ever. Columns step down on
+ * their own inside a narrow container, so a Grid is safe anywhere.
+ */
+export declare const Grid: import("react").ForwardRefExoticComponent<GridProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface GridItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** How many columns this child takes. `full` spans the whole row. */
+    span?: 1 | 2 | 3 | 4 | 6 | 12 | "full";
+    as?: "div" | "li" | "article" | "section";
+}
+/** Only needed when one child should be wider than the rest. */
+export declare const GridItem: import("react").ForwardRefExoticComponent<GridItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export type StackDirection = "vertical" | "horizontal";
+export interface StackProps extends HTMLAttributes<HTMLDivElement> {
+    direction?: StackDirection;
+    gap?: GapSize;
+    align?: "start" | "center" | "end" | "stretch" | "baseline";
+    justify?: "start" | "center" | "end" | "between";
+    wrap?: boolean;
+    as?: "div" | "ul" | "ol" | "section" | "header" | "footer";
+}
+/** The one-axis version of Grid: same gap scale, no columns. */
+export declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Grid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoD,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAC9F,OAAO,aAAa,CAAC;AAErB,sEAAsE;AACtE,MAAM,MAAM,OAAO,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAExE,6EAA6E;AAC7E,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC;AAE1D,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC/D,wEAAwE;IACxE,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,+CAA+C;IAC/C,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,iEAAiE;IACjE,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,iFAAiF;IACjF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kEAAkE;IAClE,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;CACtC;AAED;;;;GAIG;AACH,eAAO,MAAM,IAAI,sGAgCf,CAAC;AAEH,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACnE,qEAAqE;IACrE,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,MAAM,CAAC;IACvC,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,CAAC;CAC3C;AAED,gEAAgE;AAChE,eAAO,MAAM,QAAQ,0GAcnB,CAAC;AAEH,MAAM,MAAM,cAAc,GAAG,UAAU,GAAG,YAAY,CAAC;AAEvD,MAAM,WAAW,UAAW,SAAQ,cAAc,CAAC,cAAc,CAAC;IAChE,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,OAAO,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC;IACjD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,EAAE,CAAC,EAAE,KAAK,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAC;CAC5D;AAED,gEAAgE;AAChE,eAAO,MAAM,KAAK,uGA+BhB,CAAC"}

package/dist/components/Grid/index.js

@@ -0,0 +1,49 @@
+import { forwardRef as e } from "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/Grid/index.tsx
+var n = e(function({ columns: e = "auto", gap: n = "md", rowGap: r, minColumnWidth: i = "var(--asset-tile-min-width)", align: a = "stretch", as: o = "div", className: s, style: c, ...l }, u) {
+	return /* @__PURE__ */ t(o, {
+		ref: u,
+		className: [
+			"ds-grid",
+			`ds-grid--cols-${e}`,
+			`ds-grid--gap-${n}`,
+			r ? `ds-grid--row-gap-${r}` : null,
+			`ds-grid--align-${a}`,
+			s
+		].filter(Boolean).join(" "),
+		style: {
+			"--grid-min-column": i,
+			...c
+		},
+		...l
+	});
+}), r = e(function({ span: e = 1, as: n = "div", className: r, ...i }, a) {
+	return /* @__PURE__ */ t(n, {
+		ref: a,
+		className: [
+			"ds-grid__item",
+			`ds-grid__item--span-${e}`,
+			r
+		].filter(Boolean).join(" "),
+		...i
+	});
+}), i = e(function({ direction: e = "vertical", gap: n = "md", align: r = "stretch", justify: i = "start", wrap: a = !1, as: o = "div", className: s, ...c }, l) {
+	return /* @__PURE__ */ t(o, {
+		ref: l,
+		className: [
+			"ds-stack",
+			`ds-stack--${e}`,
+			`ds-grid--gap-${n}`,
+			`ds-stack--align-${r}`,
+			`ds-stack--justify-${i}`,
+			a ? "ds-stack--wrap" : null,
+			s
+		].filter(Boolean).join(" "),
+		...c
+	});
+});
+//#endregion
+export { n as Grid, r as GridItem, i as Stack };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["TagEl","Grid","forwardRef","asTag","rest","columns","gap","rowGap","align","className","minColumnWidth","style","GridItem","span","Stack","direction","justify","wrap"],"sources":["../../../src/components/Grid/index.tsx"],"sourcesContent":["import { forwardRef, type CSSProperties, type ElementType, type HTMLAttributes } from \"react\";\nimport \"./style.css\";\n\n/** Gap steps map onto the spacing scale — never a raw pixel value. */\nexport type GapSize = \"none\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\n\n/** Column counts the system offers. `auto` fills by minimum column width. */\nexport type GridColumns = 1 | 2 | 3 | 4 | 6 | 12 | \"auto\";\n\nexport type GridAlign = \"start\" | \"center\" | \"end\" | \"stretch\";\n\nexport interface GridProps extends HTMLAttributes<HTMLDivElement> {\n  /** Columns at the widest. Narrow containers step down automatically. */\n  columns?: GridColumns;\n  /** Space between every child, in both axes. */\n  gap?: GapSize;\n  /** Override the row gap when rows should breathe differently. */\n  rowGap?: GapSize;\n  /** Smallest a column may get before the grid drops one, for `columns=\"auto\"`. */\n  minColumnWidth?: string;\n  align?: GridAlign;\n  /** Render as a different element — `ul`, `section`, and so on. */\n  as?: \"div\" | \"ul\" | \"ol\" | \"section\";\n}\n\n/**\n * A spacing wrapper. Put things inside it and they take their rhythm from the\n * wrapper's `gap` — no margins on the children, ever. Columns step down on\n * their own inside a narrow container, so a Grid is safe anywhere.\n */\nexport const Grid = forwardRef<HTMLDivElement, GridProps>(function Grid(\n  {\n    columns = \"auto\",\n    gap = \"md\",\n    rowGap,\n    minColumnWidth = \"var(--asset-tile-min-width)\",\n    align = \"stretch\",\n    as: asTag = \"div\",\n    className,\n    style,\n    ...rest\n  },\n  ref,\n) {\n  const TagEl = asTag as ElementType;\n  return (\n    <TagEl\n      ref={ref as never}\n      className={[\n        \"ds-grid\",\n        `ds-grid--cols-${columns}`,\n        `ds-grid--gap-${gap}`,\n        rowGap ? `ds-grid--row-gap-${rowGap}` : null,\n        `ds-grid--align-${align}`,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={{ \"--grid-min-column\": minColumnWidth, ...style } as CSSProperties}\n      {...rest}\n    />\n  );\n});\n\nexport interface GridItemProps extends HTMLAttributes<HTMLDivElement> {\n  /** How many columns this child takes. `full` spans the whole row. */\n  span?: 1 | 2 | 3 | 4 | 6 | 12 | \"full\";\n  as?: \"div\" | \"li\" | \"article\" | \"section\";\n}\n\n/** Only needed when one child should be wider than the rest. */\nexport const GridItem = forwardRef<HTMLDivElement, GridItemProps>(function GridItem(\n  { span = 1, as: asTag = \"div\", className, ...rest },\n  ref,\n) {\n  const TagEl = asTag as ElementType;\n  return (\n    <TagEl\n      ref={ref as never}\n      className={[\"ds-grid__item\", `ds-grid__item--span-${span}`, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...rest}\n    />\n  );\n});\n\nexport type StackDirection = \"vertical\" | \"horizontal\";\n\nexport interface StackProps extends HTMLAttributes<HTMLDivElement> {\n  direction?: StackDirection;\n  gap?: GapSize;\n  align?: \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\n  justify?: \"start\" | \"center\" | \"end\" | \"between\";\n  wrap?: boolean;\n  as?: \"div\" | \"ul\" | \"ol\" | \"section\" | \"header\" | \"footer\";\n}\n\n/** The one-axis version of Grid: same gap scale, no columns. */\nexport const Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(\n  {\n    direction = \"vertical\",\n    gap = \"md\",\n    align = \"stretch\",\n    justify = \"start\",\n    wrap = false,\n    as: asTag = \"div\",\n    className,\n    ...rest\n  },\n  ref,\n) {\n  const TagEl = asTag as ElementType;\n  return (\n    <TagEl\n      ref={ref as never}\n      className={[\n        \"ds-stack\",\n        `ds-stack--${direction}`,\n        `ds-grid--gap-${gap}`,\n        `ds-stack--align-${align}`,\n        `ds-stack--justify-${justify}`,\n        wrap ? \"ds-stack--wrap\" : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      {...rest}\n    />\n  );\n});\n"],"mappings":";;;AA8BA,IAAaC,IAAOC,EAAsC,SACxD,EACE,aAAU,QACV,SAAM,MACN,WACA,oBAAiB,+BACjB,WAAQ,WACR,IAAIC,IAAQ,OACZ,cACA,UACA,GAAGC,KAEL,GACA;CAEA,OACE,kBAACJ,GAAD;EACO;EACL,WAAW;GACT;GACA,iBAAiBK;GACjB,gBAAgBC;GAChBC,IAAS,oBAAoBA,MAAW;GACxC,kBAAkBC;GAClBC;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EACX,OAAO;GAAE,qBAAqBC;GAAgB,GAAGC;EAAM;EACvD,GAAIP;CACL,CAAA;AAEL,CAAC,GASYQ,IAAWV,EAA0C,SAChE,EAAE,UAAO,GAAG,IAAIC,IAAQ,OAAO,cAAW,GAAGC,KAC7C,GACA;CAEA,OACE,kBAACJ,GAAD;EACO;EACL,WAAW;GAAC;GAAiB,uBAAuBa;GAAQJ;EAAS,CAAC,CACnE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EACX,GAAIL;CACL,CAAA;AAEL,CAAC,GAcYU,IAAQZ,EAAuC,SAC1D,EACE,eAAY,YACZ,SAAM,MACN,WAAQ,WACR,aAAU,SACV,UAAO,IACP,IAAIC,IAAQ,OACZ,cACA,GAAGC,KAEL,GACA;CAEA,OACE,kBAACJ,GAAD;EACO;EACL,WAAW;GACT;GACA,aAAae;GACb,gBAAgBT;GAChB,mBAAmBE;GACnB,qBAAqBQ;GACrBC,IAAO,mBAAmB;GAC1BR;EACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EACX,GAAIL;CACL,CAAA;AAEL,CAAC"}

package/dist/components/Grid/style.css

@@ -0,0 +1,226 @@
+@layer components {
+  /* One gap scale, shared by Grid and Stack. Children never carry margins —
+   * the wrapper owns all the space between things. */
+  .ds-grid--gap-none {
+    --grid-gap: 0;
+  }
+
+  .ds-grid--gap-xs {
+    --grid-gap: var(--space-1);
+  }
+
+  .ds-grid--gap-sm {
+    --grid-gap: var(--space-2);
+  }
+
+  .ds-grid--gap-md {
+    --grid-gap: var(--space-4);
+  }
+
+  .ds-grid--gap-lg {
+    --grid-gap: var(--space-6);
+  }
+
+  .ds-grid--gap-xl {
+    --grid-gap: var(--space-8);
+  }
+
+  .ds-grid--gap-2xl {
+    --grid-gap: var(--space-12);
+  }
+
+  .ds-grid--row-gap-none {
+    --grid-row-gap: 0;
+  }
+
+  .ds-grid--row-gap-xs {
+    --grid-row-gap: var(--space-1);
+  }
+
+  .ds-grid--row-gap-sm {
+    --grid-row-gap: var(--space-2);
+  }
+
+  .ds-grid--row-gap-md {
+    --grid-row-gap: var(--space-4);
+  }
+
+  .ds-grid--row-gap-lg {
+    --grid-row-gap: var(--space-6);
+  }
+
+  .ds-grid--row-gap-xl {
+    --grid-row-gap: var(--space-8);
+  }
+
+  .ds-grid--row-gap-2xl {
+    --grid-row-gap: var(--space-12);
+  }
+
+  .ds-grid {
+    display: grid;
+    gap: var(--grid-row-gap, var(--grid-gap)) var(--grid-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    container-type: inline-size;
+  }
+
+  .ds-grid--cols-auto {
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min-column)), 1fr));
+  }
+
+  .ds-grid--cols-1 {
+    grid-template-columns: repeat(1, minmax(0, 1fr));
+  }
+
+  .ds-grid--cols-2 {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .ds-grid--cols-3 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .ds-grid--cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .ds-grid--cols-6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .ds-grid--cols-12 {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+
+  .ds-grid--align-start {
+    align-items: start;
+  }
+
+  .ds-grid--align-center {
+    align-items: center;
+  }
+
+  .ds-grid--align-end {
+    align-items: end;
+  }
+
+  .ds-grid--align-stretch {
+    align-items: stretch;
+  }
+
+  .ds-grid__item--span-1 {
+    grid-column: span 1;
+  }
+
+  .ds-grid__item--span-2 {
+    grid-column: span 2;
+  }
+
+  .ds-grid__item--span-3 {
+    grid-column: span 3;
+  }
+
+  .ds-grid__item--span-4 {
+    grid-column: span 4;
+  }
+
+  .ds-grid__item--span-6 {
+    grid-column: span 6;
+  }
+
+  .ds-grid__item--span-12 {
+    grid-column: span 12;
+  }
+
+  .ds-grid__item--span-full {
+    grid-column: 1 / -1;
+  }
+
+  /* A grid steps down inside a narrow container, not a narrow window, so it
+   * behaves the same in a page, a drawer and a modal. */
+  @container (max-width: 60rem) {
+    .ds-grid--cols-12 {
+      grid-template-columns: repeat(6, minmax(0, 1fr));
+    }
+
+    .ds-grid--cols-6 {
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
+
+    .ds-grid--cols-4 {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  @container (max-width: 40rem) {
+    .ds-grid--cols-12,
+    .ds-grid--cols-6,
+    .ds-grid--cols-4,
+    .ds-grid--cols-3,
+    .ds-grid--cols-2 {
+      grid-template-columns: repeat(1, minmax(0, 1fr));
+    }
+
+    .ds-grid__item {
+      grid-column: 1 / -1;
+    }
+  }
+
+  .ds-stack {
+    display: flex;
+    gap: var(--grid-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .ds-stack--vertical {
+    flex-direction: column;
+  }
+
+  .ds-stack--horizontal {
+    flex-direction: row;
+  }
+
+  .ds-stack--wrap {
+    flex-wrap: wrap;
+  }
+
+  .ds-stack--align-start {
+    align-items: flex-start;
+  }
+
+  .ds-stack--align-center {
+    align-items: center;
+  }
+
+  .ds-stack--align-end {
+    align-items: flex-end;
+  }
+
+  .ds-stack--align-stretch {
+    align-items: stretch;
+  }
+
+  .ds-stack--align-baseline {
+    align-items: baseline;
+  }
+
+  .ds-stack--justify-start {
+    justify-content: flex-start;
+  }
+
+  .ds-stack--justify-center {
+    justify-content: center;
+  }
+
+  .ds-stack--justify-end {
+    justify-content: flex-end;
+  }
+
+  .ds-stack--justify-between {
+    justify-content: space-between;
+  }
+}

package/dist/components/Icon/icons.d.cts

@@ -0,0 +1,64 @@
+/**
+ * The finite icon set. Adding a glyph means adding a line here — a visible
+ * decision rather than an import someone typed at a call site.
+ */
+export declare const icons: {
+    readonly "alert-triangle": import("lucide-react").LucideIcon;
+    readonly archive: import("lucide-react").LucideIcon;
+    readonly bold: import("lucide-react").LucideIcon;
+    readonly code: import("lucide-react").LucideIcon;
+    readonly "heading-2": import("lucide-react").LucideIcon;
+    readonly "heading-3": import("lucide-react").LucideIcon;
+    readonly italic: import("lucide-react").LucideIcon;
+    readonly "link-off": import("lucide-react").LucideIcon;
+    readonly list: import("lucide-react").LucideIcon;
+    readonly "list-ordered": import("lucide-react").LucideIcon;
+    readonly quote: import("lucide-react").LucideIcon;
+    readonly redo: import("lucide-react").LucideIcon;
+    readonly strikethrough: import("lucide-react").LucideIcon;
+    readonly undo: import("lucide-react").LucideIcon;
+    readonly "arrow-left": import("lucide-react").LucideIcon;
+    readonly "arrow-right": import("lucide-react").LucideIcon;
+    readonly calendar: import("lucide-react").LucideIcon;
+    readonly check: import("lucide-react").LucideIcon;
+    readonly "chevron-down": import("lucide-react").LucideIcon;
+    readonly "chevron-left": import("lucide-react").LucideIcon;
+    readonly "chevron-up": import("lucide-react").LucideIcon;
+    readonly minus: import("lucide-react").LucideIcon;
+    readonly "chevron-right": import("lucide-react").LucideIcon;
+    readonly clock: import("lucide-react").LucideIcon;
+    readonly copy: import("lucide-react").LucideIcon;
+    readonly download: import("lucide-react").LucideIcon;
+    readonly eye: import("lucide-react").LucideIcon;
+    readonly filter: import("lucide-react").LucideIcon;
+    readonly bell: import("lucide-react").LucideIcon;
+    readonly "chevrons-left": import("lucide-react").LucideIcon;
+    readonly "chevrons-right": import("lucide-react").LucideIcon;
+    readonly "file-text": import("lucide-react").LucideIcon;
+    readonly folder: import("lucide-react").LucideIcon;
+    readonly globe: import("lucide-react").LucideIcon;
+    readonly home: import("lucide-react").LucideIcon;
+    readonly "layout-grid": import("lucide-react").LucideIcon;
+    readonly menu: import("lucide-react").LucideIcon;
+    readonly users: import("lucide-react").LucideIcon;
+    readonly "grip-horizontal": import("lucide-react").LucideIcon;
+    readonly "grip-vertical": import("lucide-react").LucideIcon;
+    readonly image: import("lucide-react").LucideIcon;
+    readonly info: import("lucide-react").LucideIcon;
+    readonly link: import("lucide-react").LucideIcon;
+    readonly spinner: import("lucide-react").LucideIcon;
+    readonly "more-horizontal": import("lucide-react").LucideIcon;
+    readonly pencil: import("lucide-react").LucideIcon;
+    readonly plus: import("lucide-react").LucideIcon;
+    readonly "rotate-ccw": import("lucide-react").LucideIcon;
+    readonly "rotate-cw": import("lucide-react").LucideIcon;
+    readonly search: import("lucide-react").LucideIcon;
+    readonly settings: import("lucide-react").LucideIcon;
+    readonly trash: import("lucide-react").LucideIcon;
+    readonly upload: import("lucide-react").LucideIcon;
+    readonly user: import("lucide-react").LucideIcon;
+    readonly x: import("lucide-react").LucideIcon;
+};
+export type IconName = keyof typeof icons;
+export declare const iconNames: IconName[];
+//# sourceMappingURL=icons.d.cts.map

package/dist/components/Icon/icons.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.cts","sourceRoot":"","sources":["../../../src/components/Icon/icons.ts"],"names":[],"mappings":"AA0DA;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDR,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,KAAK,CAAC;AAE1C,eAAO,MAAM,SAAS,EAAyB,QAAQ,EAAE,CAAC"}

package/dist/components/Icon/icons.d.ts

@@ -0,0 +1,64 @@
+/**
+ * The finite icon set. Adding a glyph means adding a line here — a visible
+ * decision rather than an import someone typed at a call site.
+ */
+export declare const icons: {
+    readonly "alert-triangle": import("lucide-react").LucideIcon;
+    readonly archive: import("lucide-react").LucideIcon;
+    readonly bold: import("lucide-react").LucideIcon;
+    readonly code: import("lucide-react").LucideIcon;
+    readonly "heading-2": import("lucide-react").LucideIcon;
+    readonly "heading-3": import("lucide-react").LucideIcon;
+    readonly italic: import("lucide-react").LucideIcon;
+    readonly "link-off": import("lucide-react").LucideIcon;
+    readonly list: import("lucide-react").LucideIcon;
+    readonly "list-ordered": import("lucide-react").LucideIcon;
+    readonly quote: import("lucide-react").LucideIcon;
+    readonly redo: import("lucide-react").LucideIcon;
+    readonly strikethrough: import("lucide-react").LucideIcon;
+    readonly undo: import("lucide-react").LucideIcon;
+    readonly "arrow-left": import("lucide-react").LucideIcon;
+    readonly "arrow-right": import("lucide-react").LucideIcon;
+    readonly calendar: import("lucide-react").LucideIcon;
+    readonly check: import("lucide-react").LucideIcon;
+    readonly "chevron-down": import("lucide-react").LucideIcon;
+    readonly "chevron-left": import("lucide-react").LucideIcon;
+    readonly "chevron-up": import("lucide-react").LucideIcon;
+    readonly minus: import("lucide-react").LucideIcon;
+    readonly "chevron-right": import("lucide-react").LucideIcon;
+    readonly clock: import("lucide-react").LucideIcon;
+    readonly copy: import("lucide-react").LucideIcon;
+    readonly download: import("lucide-react").LucideIcon;
+    readonly eye: import("lucide-react").LucideIcon;
+    readonly filter: import("lucide-react").LucideIcon;
+    readonly bell: import("lucide-react").LucideIcon;
+    readonly "chevrons-left": import("lucide-react").LucideIcon;
+    readonly "chevrons-right": import("lucide-react").LucideIcon;
+    readonly "file-text": import("lucide-react").LucideIcon;
+    readonly folder: import("lucide-react").LucideIcon;
+    readonly globe: import("lucide-react").LucideIcon;
+    readonly home: import("lucide-react").LucideIcon;
+    readonly "layout-grid": import("lucide-react").LucideIcon;
+    readonly menu: import("lucide-react").LucideIcon;
+    readonly users: import("lucide-react").LucideIcon;
+    readonly "grip-horizontal": import("lucide-react").LucideIcon;
+    readonly "grip-vertical": import("lucide-react").LucideIcon;
+    readonly image: import("lucide-react").LucideIcon;
+    readonly info: import("lucide-react").LucideIcon;
+    readonly link: import("lucide-react").LucideIcon;
+    readonly spinner: import("lucide-react").LucideIcon;
+    readonly "more-horizontal": import("lucide-react").LucideIcon;
+    readonly pencil: import("lucide-react").LucideIcon;
+    readonly plus: import("lucide-react").LucideIcon;
+    readonly "rotate-ccw": import("lucide-react").LucideIcon;
+    readonly "rotate-cw": import("lucide-react").LucideIcon;
+    readonly search: import("lucide-react").LucideIcon;
+    readonly settings: import("lucide-react").LucideIcon;
+    readonly trash: import("lucide-react").LucideIcon;
+    readonly upload: import("lucide-react").LucideIcon;
+    readonly user: import("lucide-react").LucideIcon;
+    readonly x: import("lucide-react").LucideIcon;
+};
+export type IconName = keyof typeof icons;
+export declare const iconNames: IconName[];
+//# sourceMappingURL=icons.d.ts.map

package/dist/components/Icon/icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/icons.ts"],"names":[],"mappings":"AA0DA;;;GAGG;AACH,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDR,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,KAAK,CAAC;AAE1C,eAAO,MAAM,SAAS,EAAyB,QAAQ,EAAE,CAAC"}

package/dist/components/Icon/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");exports.Icon=e.t;

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

@@ -0,0 +1,15 @@
+import { type SVGProps } from "react";
+import { type IconName } from "./icons.cjs";
+export type IconSize = 16 | 20 | 24;
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    /** Glyph name from the curated set in `icons.ts`. */
+    name: IconName;
+    /** 16 inside controls, 20 standalone, 24 for empty states. No other sizes. */
+    size?: IconSize;
+}
+/**
+ * A glyph that clarifies an action or a status. Inherits `currentColor`, so it
+ * takes its colour from the control it sits in — it never carries its own.
+ */
+export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+//# sourceMappingURL=index.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAS,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEpC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC;IACrE,qDAAqD;IACrD,IAAI,EAAE,QAAQ,CAAC;IACf,8EAA8E;IAC9E,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED;;;GAGG;AACH,eAAO,MAAM,IAAI,qGAiBf,CAAC"}

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

@@ -0,0 +1,15 @@
+import { type SVGProps } from "react";
+import { type IconName } from "./icons.js";
+export type IconSize = 16 | 20 | 24;
+export interface IconProps extends Omit<SVGProps<SVGSVGElement>, "ref"> {
+    /** Glyph name from the curated set in `icons.ts`. */
+    name: IconName;
+    /** 16 inside controls, 20 standalone, 24 for empty states. No other sizes. */
+    size?: IconSize;
+}
+/**
+ * A glyph that clarifies an action or a status. Inherits `currentColor`, so it
+ * takes its colour from the control it sits in — it never carries its own.
+ */
+export declare const Icon: import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAS,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,QAAQ,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAEpC,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC;IACrE,qDAAqD;IACrD,IAAI,EAAE,QAAQ,CAAC;IACf,8EAA8E;IAC9E,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AAED;;;GAGG;AACH,eAAO,MAAM,IAAI,qGAiBf,CAAC"}

package/dist/components/Icon/index.js

@@ -0,0 +1 @@
+export { t as Icon } from "../../chunks/Icon-CGY1FNXT.js";

package/dist/components/Icon/style.css

@@ -0,0 +1,10 @@
+@layer components {
+  .ds-icon {
+    flex: none;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: var(--icon-stroke);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+}

package/dist/components/ImageCropper/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../Button/index.cjs"),t=require("../ButtonGroup/index.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=[{label:`1:1`,value:1},{label:`4:5`,value:4/5},{label:`4:3`,value:4/3},{label:`16:9`,value:16/9}],a=1,o={offsetX:0,offsetY:0,zoom:1,rotation:0},s=(0,n.forwardRef)(function({src:i,alt:s=``,aspect:c=1,ratios:l,onAspectChange:u,maxZoom:d=3,rotatable:f=!0,onChange:p,className:m,...h},g){let _=(0,n.useRef)(null),[v,y]=(0,n.useState)({width:0,height:0}),[b,x]=(0,n.useState)({width:0,height:0}),[S,C]=(0,n.useState)(o),[w,T]=(0,n.useState)(c),E=(0,n.useRef)(null),D=(0,n.useRef)(null);(0,n.useEffect)(()=>{T(c),C(e=>({...o,rotation:e.rotation}))},[c]);let O=e=>{T(e),C(e=>({...o,rotation:e.rotation})),u?.(e)},k=e=>C(t=>({...o,rotation:(t.rotation+e+360)%360})),A=(0,n.useCallback)(e=>{e.naturalWidth&&(x({width:e.naturalWidth,height:e.naturalHeight}),C(o))},[]);(0,n.useEffect)(()=>{let e=D.current;e?.complete&&A(e)},[A,i]);let j=S.rotation%180!=0,M={width:j?b.height:b.width,height:j?b.width:b.height},N=M.width&&v.width?Math.max(v.width/M.width,v.height/M.height):0,P=N*S.zoom,F=P?Math.max(0,(M.width*P-v.width)/2):0,I=P?Math.max(0,(M.height*P-v.height)/2):0;(0,n.useLayoutEffect)(()=>{let e=_.current;if(!e)return;let t=()=>y({width:e.clientWidth,height:e.clientHeight});t();let n=new ResizeObserver(t);return n.observe(e),()=>n.disconnect()},[]);let L=(0,n.useCallback)(e=>{let t=N*e.zoom,n=t?Math.max(0,(M.width*t-v.width)/2):0,r=t?Math.max(0,(M.height*t-v.height)/2):0;return{rotation:e.rotation,zoom:Math.min(d,Math.max(a,e.zoom)),offsetX:Math.min(n,Math.max(-n,e.offsetX)),offsetY:Math.min(r,Math.max(-r,e.offsetY))}},[N,d,M.height,M.width,v.height,v.width]);(0,n.useEffect)(()=>{if(!P||!v.width)return;let e=v.width/P,t=v.height/P;p?.({x:Math.round(M.width/2-S.offsetX/P-e/2),y:Math.round(M.height/2-S.offsetY/P-t/2),width:Math.round(e),height:Math.round(t)},S)},[P,v.width,v.height,M.width,M.height,S]);let R=e=>{e.button===0&&(E.current={pointerId:e.pointerId,x:e.clientX,y:e.clientY},e.currentTarget.setPointerCapture(e.pointerId))},z=e=>{let t=E.current;if(!t||t.pointerId!==e.pointerId)return;let n=e.clientX-t.x,r=e.clientY-t.y;E.current={...t,x:e.clientX,y:e.clientY},C(e=>L({...e,offsetX:e.offsetX+n,offsetY:e.offsetY+r}))},B=e=>{E.current?.pointerId===e.pointerId&&(E.current=null,e.currentTarget.releasePointerCapture?.(e.pointerId))},V=(e,t)=>C(n=>L({...n,offsetX:n.offsetX+e,offsetY:n.offsetY+t}));return(0,r.jsxs)(`div`,{ref:g,className:[`ds-cropper`,m].filter(Boolean).join(` `),...h,children:[l&&l.length>1&&(0,r.jsx)(t.ButtonGroup,{"aria-label":`Crop ratio`,className:`ds-cropper__ratios`,children:l.map(t=>(0,r.jsx)(e.Button,{size:`sm`,variant:t.value===w?`active`:`neutral`,"aria-pressed":t.value===w,onClick:()=>O(t.value),children:t.label},t.label))}),(0,r.jsxs)(`div`,{role:`application`,"aria-label":`Crop area — drag to reposition, arrow keys to nudge`,tabIndex:0,className:`ds-cropper__stage`,style:{"--cropper-aspect":String(w)},onPointerDown:R,onPointerMove:z,onPointerUp:B,onPointerCancel:B,onKeyDown:e=>{let t=e.shiftKey?24:8,n={ArrowLeft:[-t,0],ArrowRight:[t,0],ArrowUp:[0,-t],ArrowDown:[0,t]}[e.key];n&&(e.preventDefault(),V(n[0],n[1]))},children:[(0,r.jsx)(`img`,{ref:D,src:i,alt:s,draggable:!1,className:`ds-cropper__image`,onLoad:e=>A(e.currentTarget),style:{inlineSize:b.width*P||void 0,blockSize:b.height*P||void 0,transform:`translate(calc(-50% + ${S.offsetX}px), calc(-50% + ${S.offsetY}px)) rotate(${S.rotation}deg)`}}),(0,r.jsx)(`div`,{className:`ds-cropper__frame`,ref:_,"aria-hidden":`true`,children:(0,r.jsx)(`div`,{className:`ds-cropper__guides`})})]}),(0,r.jsxs)(`div`,{className:`ds-cropper__controls`,children:[(0,r.jsxs)(`label`,{className:`ds-cropper__zoom`,children:[(0,r.jsx)(`span`,{className:`ds-cropper__zoom-label`,children:`Zoom`}),(0,r.jsx)(`input`,{type:`range`,min:a,max:d,step:.01,value:S.zoom,className:`ds-cropper__slider`,onChange:e=>C(t=>L({...t,zoom:Number(e.target.value)}))}),(0,r.jsxs)(`span`,{className:`ds-cropper__value`,children:[S.zoom.toFixed(2),`×`]})]}),(0,r.jsxs)(t.ButtonGroup,{"aria-label":`Crop actions`,children:[f&&(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(e.Button,{size:`sm`,iconStart:`rotate-ccw`,"aria-label":`Rotate left`,onClick:()=>k(-90)}),(0,r.jsx)(e.Button,{size:`sm`,iconStart:`rotate-cw`,"aria-label":`Rotate right`,onClick:()=>k(90)})]}),(0,r.jsx)(e.Button,{size:`sm`,onClick:()=>C(o),children:`Reset`})]})]}),(0,r.jsxs)(`p`,{className:`ds-cropper__hint`,children:[`Drag the picture to reposition it. Nothing is written until you save —`,` `,F===0&&I===0?`at this zoom the whole picture is in frame.`:`the veiled edges are what gets trimmed.`]})]})});async function c(e,t,{outputWidth:n,rotation:r=0,type:i=`image/png`,quality:a=.92}={}){let o=new Image;o.crossOrigin=`anonymous`,o.src=e,await o.decode();let s=r%180!=0,c=document.createElement(`canvas`);c.width=s?o.naturalHeight:o.naturalWidth,c.height=s?o.naturalWidth:o.naturalHeight;let l=c.getContext(`2d`);if(!l)throw Error(`Canvas 2D context unavailable`);l.translate(c.width/2,c.height/2),l.rotate(r*Math.PI/180),l.drawImage(o,-o.naturalWidth/2,-o.naturalHeight/2);let u=n??t.width,d=Math.round(t.height/t.width*u),f=document.createElement(`canvas`);f.width=u,f.height=d;let p=f.getContext(`2d`);if(!p)throw Error(`Canvas 2D context unavailable`);return p.drawImage(c,t.x,t.y,t.width,t.height,0,0,u,d),new Promise((e,t)=>{f.toBlob(n=>n?e(n):t(Error(`Could not encode the crop`)),i,a)})}exports.ImageCropper=s,exports.cropRatios=i,exports.cropToBlob=c;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["forwardRef","useRef","useState","useCallback","ButtonGroup","Button","_Fragment","require_components_Button_index","require_components_ButtonGroup_index","react","react_jsx_runtime","cropRatios","MIN_ZOOM","REST","ImageCropper","rest","frameRef","frame","setFrame","natural","setNatural","state","setState","ratio","setRatio","aspect","dragRef","imageRef","prev","chooseRatio","next","onAspectChange","turn","by","adopt","img","src","quarter","view","baseScale","scale","maxOffsetX","maxOffsetY","node","measure","observer","clamp","nextScale","limitX","limitY","maxZoom","width","height","onChange","onPointerDown","event","onPointerMove","drag","dx","dy","endDrag","nudge","className","ratios","option","step","move","rotatable","cropToBlob","image","rotation","turned","turnedContext","outputWidth","crop","canvas","context","blob","resolve","reject","type","quality"],"sources":["../../../src/components/ImageCropper/index.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type CSSProperties,\n  type HTMLAttributes,\n  type PointerEvent as ReactPointerEvent,\n} from \"react\";\nimport { Button } from \"../Button\";\nimport { ButtonGroup } from \"../ButtonGroup\";\nimport \"./style.css\";\n\nexport interface CropRect {\n  /** Left edge of the crop, in the (rotated) image's own pixels. */\n  x: number;\n  /** Top edge of the crop, in the (rotated) image's own pixels. */\n  y: number;\n  width: number;\n  height: number;\n}\n\nexport interface CropState {\n  /** Pan, in stage pixels, from the centre. */\n  offsetX: number;\n  offsetY: number;\n  /** 1 is \"cover the crop window exactly\". */\n  zoom: number;\n  /** Quarter turns applied to the picture, clockwise: 0, 90, 180 or 270. */\n  rotation: number;\n}\n\n/** One offered output shape. `value` is width / height. */\nexport interface CropRatio {\n  label: string;\n  value: number;\n}\n\n/** The house set: square, portrait, landscape, wide. */\nexport const cropRatios: CropRatio[] = [\n  { label: \"1:1\", value: 1 },\n  { label: \"4:5\", value: 4 / 5 },\n  { label: \"4:3\", value: 4 / 3 },\n  { label: \"16:9\", value: 16 / 9 },\n];\n\nexport interface ImageCropperProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  src: string;\n  /** Describes the picture for people who cannot see the stage. */\n  alt?: string;\n  /** Output shape, width / height. 1 for an avatar, 16 / 9 for a hero. */\n  aspect?: number;\n  /**\n   * Offer the reader a choice of output shapes. Omit it — or pass one ratio —\n   * when the shape is fixed by the slot the picture is going into.\n   */\n  ratios?: CropRatio[];\n  /** Fires when the reader picks a different shape. */\n  onAspectChange?: (aspect: number) => void;\n  /** Highest allowed zoom. Past 3 the result is mush on most uploads. */\n  maxZoom?: number;\n  /** Offer the quarter-turn controls. */\n  rotatable?: boolean;\n  /** Fires on every pan, zoom, turn and reset, with the crop in image pixels. */\n  onChange?: (crop: CropRect, state: CropState) => void;\n}\n\nconst MIN_ZOOM = 1;\nconst REST: CropState = { offsetX: 0, offsetY: 0, zoom: 1, rotation: 0 };\n\n/**\n * Pan-and-zoom cropping over a fixed frame. The frame never moves — the\n * picture does — and the parts that fall outside it stay visible under a\n * veil, so the reader can see what they are trimming away.\n * Drag with a pointer, or focus the stage and use the arrow keys.\n */\nexport const ImageCropper = forwardRef<HTMLDivElement, ImageCropperProps>(\n  function ImageCropper(\n    {\n      src,\n      alt = \"\",\n      aspect = 1,\n      ratios,\n      onAspectChange,\n      maxZoom = 3,\n      rotatable = true,\n      onChange,\n      className,\n      ...rest\n    },\n    ref,\n  ) {\n    const frameRef = useRef<HTMLDivElement | null>(null);\n    const [frame, setFrame] = useState({ width: 0, height: 0 });\n    const [natural, setNatural] = useState({ width: 0, height: 0 });\n    const [state, setState] = useState<CropState>(REST);\n    const [ratio, setRatio] = useState(aspect);\n    const dragRef = useRef<{ pointerId: number; x: number; y: number } | null>(null);\n    const imageRef = useRef<HTMLImageElement | null>(null);\n\n    // The prop stays the source of truth when the caller drives the shape.\n    useEffect(() => {\n      setRatio(aspect);\n      setState((prev) => ({ ...REST, rotation: prev.rotation }));\n    }, [aspect]);\n\n    const chooseRatio = (next: number) => {\n      setRatio(next);\n      setState((prev) => ({ ...REST, rotation: prev.rotation }));\n      onAspectChange?.(next);\n    };\n\n    const turn = (by: number) =>\n      setState((prev) => ({ ...REST, rotation: (prev.rotation + by + 360) % 360 }));\n\n    /** Take the picture's own pixels and start from a centred, unzoomed view. */\n    const adopt = useCallback((img: HTMLImageElement) => {\n      if (!img.naturalWidth) return;\n      setNatural({ width: img.naturalWidth, height: img.naturalHeight });\n      setState(REST);\n    }, []);\n\n    // A cached or server-rendered image can already be decoded before React\n    // attaches onLoad, and then that event never fires.\n    useEffect(() => {\n      const img = imageRef.current;\n      if (img?.complete) adopt(img);\n    }, [adopt, src]);\n\n    // After a quarter turn the picture presents its other side to the frame.\n    const quarter = state.rotation % 180 !== 0;\n    const view = {\n      width: quarter ? natural.height : natural.width,\n      height: quarter ? natural.width : natural.height,\n    };\n\n    // The scale at which the image exactly covers the frame; zoom multiplies it.\n    const baseScale =\n      view.width && frame.width\n        ? Math.max(frame.width / view.width, frame.height / view.height)\n        : 0;\n    const scale = baseScale * state.zoom;\n    const maxOffsetX = scale ? Math.max(0, (view.width * scale - frame.width) / 2) : 0;\n    const maxOffsetY = scale ? Math.max(0, (view.height * scale - frame.height) / 2) : 0;\n\n    useLayoutEffect(() => {\n      const node = frameRef.current;\n      if (!node) return;\n      const measure = () =>\n        setFrame({ width: node.clientWidth, height: node.clientHeight });\n      measure();\n      const observer = new ResizeObserver(measure);\n      observer.observe(node);\n      return () => observer.disconnect();\n    }, []);\n\n    const clamp = useCallback(\n      (next: CropState): CropState => {\n        const nextScale = baseScale * next.zoom;\n        const limitX = nextScale\n          ? Math.max(0, (view.width * nextScale - frame.width) / 2)\n          : 0;\n        const limitY = nextScale\n          ? Math.max(0, (view.height * nextScale - frame.height) / 2)\n          : 0;\n        return {\n          rotation: next.rotation,\n          zoom: Math.min(maxZoom, Math.max(MIN_ZOOM, next.zoom)),\n          offsetX: Math.min(limitX, Math.max(-limitX, next.offsetX)),\n          offsetY: Math.min(limitY, Math.max(-limitY, next.offsetY)),\n        };\n      },\n      [baseScale, maxZoom, view.height, view.width, frame.height, frame.width],\n    );\n\n    useEffect(() => {\n      if (!scale || !frame.width) return;\n      const width = frame.width / scale;\n      const height = frame.height / scale;\n      onChange?.(\n        {\n          x: Math.round(view.width / 2 - state.offsetX / scale - width / 2),\n          y: Math.round(view.height / 2 - state.offsetY / scale - height / 2),\n          width: Math.round(width),\n          height: Math.round(height),\n        },\n        state,\n      );\n      // onChange is intentionally not a dependency: callers pass inline handlers.\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [scale, frame.width, frame.height, view.width, view.height, state]);\n\n    const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (event.button !== 0) return;\n      dragRef.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY };\n      event.currentTarget.setPointerCapture(event.pointerId);\n    };\n\n    const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n      const drag = dragRef.current;\n      if (!drag || drag.pointerId !== event.pointerId) return;\n      const dx = event.clientX - drag.x;\n      const dy = event.clientY - drag.y;\n      dragRef.current = { ...drag, x: event.clientX, y: event.clientY };\n      setState((prev) => clamp({ ...prev, offsetX: prev.offsetX + dx, offsetY: prev.offsetY + dy }));\n    };\n\n    const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {\n      if (dragRef.current?.pointerId !== event.pointerId) return;\n      dragRef.current = null;\n      event.currentTarget.releasePointerCapture?.(event.pointerId);\n    };\n\n    const nudge = (dx: number, dy: number) =>\n      setState((prev) => clamp({ ...prev, offsetX: prev.offsetX + dx, offsetY: prev.offsetY + dy }));\n\n    return (\n      <div ref={ref} className={[\"ds-cropper\", className].filter(Boolean).join(\" \")} {...rest}>\n        {ratios && ratios.length > 1 && (\n          <ButtonGroup aria-label=\"Crop ratio\" className=\"ds-cropper__ratios\">\n            {ratios.map((option) => (\n              <Button\n                key={option.label}\n                size=\"sm\"\n                variant={option.value === ratio ? \"active\" : \"neutral\"}\n                aria-pressed={option.value === ratio}\n                onClick={() => chooseRatio(option.value)}\n              >\n                {option.label}\n              </Button>\n            ))}\n          </ButtonGroup>\n        )}\n        <div\n          role=\"application\"\n          aria-label=\"Crop area — drag to reposition, arrow keys to nudge\"\n          tabIndex={0}\n          className=\"ds-cropper__stage\"\n          style={{ \"--cropper-aspect\": String(ratio) } as CSSProperties}\n          onPointerDown={onPointerDown}\n          onPointerMove={onPointerMove}\n          onPointerUp={endDrag}\n          onPointerCancel={endDrag}\n          onKeyDown={(event) => {\n            const step = event.shiftKey ? 24 : 8;\n            const moves: Record<string, [number, number]> = {\n              ArrowLeft: [-step, 0],\n              ArrowRight: [step, 0],\n              ArrowUp: [0, -step],\n              ArrowDown: [0, step],\n            };\n            const move = moves[event.key];\n            if (!move) return;\n            event.preventDefault();\n            nudge(move[0], move[1]);\n          }}\n        >\n          <img\n            ref={imageRef}\n            src={src}\n            alt={alt}\n            draggable={false}\n            className=\"ds-cropper__image\"\n            onLoad={(event) => adopt(event.currentTarget)}\n            style={{\n              inlineSize: natural.width * scale || undefined,\n              blockSize: natural.height * scale || undefined,\n              transform: `translate(calc(-50% + ${state.offsetX}px), calc(-50% + ${state.offsetY}px)) rotate(${state.rotation}deg)`,\n            }}\n          />\n          {/* The window: everything outside it is veiled, not hidden. */}\n          <div className=\"ds-cropper__frame\" ref={frameRef} aria-hidden=\"true\">\n            <div className=\"ds-cropper__guides\" />\n          </div>\n        </div>\n\n        <div className=\"ds-cropper__controls\">\n          <label className=\"ds-cropper__zoom\">\n            <span className=\"ds-cropper__zoom-label\">Zoom</span>\n            <input\n              type=\"range\"\n              min={MIN_ZOOM}\n              max={maxZoom}\n              step={0.01}\n              value={state.zoom}\n              className=\"ds-cropper__slider\"\n              onChange={(event) =>\n                setState((prev) => clamp({ ...prev, zoom: Number(event.target.value) }))\n              }\n            />\n            <span className=\"ds-cropper__value\">{state.zoom.toFixed(2)}×</span>\n          </label>\n          <ButtonGroup aria-label=\"Crop actions\">\n            {rotatable && (\n              <>\n                <Button\n                  size=\"sm\"\n                  iconStart=\"rotate-ccw\"\n                  aria-label=\"Rotate left\"\n                  onClick={() => turn(-90)}\n                />\n                <Button\n                  size=\"sm\"\n                  iconStart=\"rotate-cw\"\n                  aria-label=\"Rotate right\"\n                  onClick={() => turn(90)}\n                />\n              </>\n            )}\n            <Button size=\"sm\" onClick={() => setState(REST)}>\n              Reset\n            </Button>\n          </ButtonGroup>\n        </div>\n\n        <p className=\"ds-cropper__hint\">\n          Drag the picture to reposition it. Nothing is written until you save —{\" \"}\n          {maxOffsetX === 0 && maxOffsetY === 0\n            ? \"at this zoom the whole picture is in frame.\"\n            : \"the veiled edges are what gets trimmed.\"}\n        </p>\n      </div>\n    );\n  },\n);\n\nexport interface CropToBlobOptions {\n  /** Width of the output in pixels; the height follows the crop's aspect. */\n  outputWidth?: number;\n  /** Quarter turns applied before cropping — pass `state.rotation`. */\n  rotation?: number;\n  type?: \"image/png\" | \"image/jpeg\" | \"image/webp\";\n  quality?: number;\n}\n\n/**\n * Renders a `CropRect` to an image blob in the browser. Same-origin or\n * CORS-enabled sources only — a tainted canvas cannot be exported.\n */\nexport async function cropToBlob(\n  src: string,\n  crop: CropRect,\n  { outputWidth, rotation = 0, type = \"image/png\", quality = 0.92 }: CropToBlobOptions = {},\n): Promise<Blob> {\n  const image = new Image();\n  image.crossOrigin = \"anonymous\";\n  image.src = src;\n  await image.decode();\n\n  // The crop is expressed against the turned picture, so turn it first.\n  const quarter = rotation % 180 !== 0;\n  const turned = document.createElement(\"canvas\");\n  turned.width = quarter ? image.naturalHeight : image.naturalWidth;\n  turned.height = quarter ? image.naturalWidth : image.naturalHeight;\n  const turnedContext = turned.getContext(\"2d\");\n  if (!turnedContext) throw new Error(\"Canvas 2D context unavailable\");\n  turnedContext.translate(turned.width / 2, turned.height / 2);\n  turnedContext.rotate((rotation * Math.PI) / 180);\n  turnedContext.drawImage(image, -image.naturalWidth / 2, -image.naturalHeight / 2);\n\n  const width = outputWidth ?? crop.width;\n  const height = Math.round((crop.height / crop.width) * width);\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = width;\n  canvas.height = height;\n  const context = canvas.getContext(\"2d\");\n  if (!context) throw new Error(\"Canvas 2D context unavailable\");\n  context.drawImage(turned, crop.x, crop.y, crop.width, crop.height, 0, 0, width, height);\n\n  return new Promise((resolve, reject) => {\n    canvas.toBlob(\n      (blob) => (blob ? resolve(blob) : reject(new Error(\"Could not encode the crop\"))),\n      type,\n      quality,\n    );\n  });\n}\n"],"mappings":"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"}