@krizaka/ui 3.53.0 → 3.55.0

package/dist/force-update-screen.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/force-update-screen/force-update-screen.tsx"],"sourcesContent":["// Server-safe. The blocking screen: this version can no longer run. It replaces the app, it is not laid over it —\n// nothing behind it is reachable. Every word is a prop; the store URL and the versions come from the backend.\nimport { Button } from \"@krizaka/ui/button\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const forceUpdateScreen = tv({\n  slots: {\n    root: \"mx-auto flex min-h-dvh w-full max-w-md flex-col items-center justify-center gap-4 px-6 py-12 text-center text-fg\",\n    mark: \"flex h-24 w-24 items-center justify-center [&>svg]:h-24 [&>svg]:w-24\",\n    title: \"text-2xl font-semibold text-fg\",\n    message: \"text-fg-secondary\",\n    version: \"font-mono text-xs text-fg-tertiary\",\n    actions: \"mt-2 flex w-full flex-col gap-2\",\n  },\n});\n\nexport type ForceUpdateScreenProps = Omit<React.ComponentProps<\"main\">, \"title\"> & {\n  /** The headline (“Update to keep going”). */\n  title: React.ReactNode;\n  /** Why, in a sentence — the backend's localized `message`. */\n  message?: React.ReactNode;\n  /** The versions, in words and mono (“You have 1.1.0 · 1.2.0 or later is required”). */\n  versionLabel?: React.ReactNode;\n  /** The product's mark or mascot (decorative). */\n  mark?: React.ReactNode;\n  /** The button that updates (“Update the app”). */\n  updateLabel: string;\n  /** Opens the store page. */\n  onUpdate: () => void;\n  /** A secondary way (“Check again”) once the update is installed — optional. */\n  retryLabel?: string;\n  /** Checks the backend again. */\n  onRetry?: () => void;\n};\n\n/** The forced update: one thing to do, and the way to do it. */\nexport function ForceUpdateScreen({ title, message, versionLabel, mark, updateLabel, onUpdate, retryLabel, onRetry, className, ...props }: ForceUpdateScreenProps) {\n  const s = forceUpdateScreen();\n  return (\n    <main data-kind=\"update-force\" className={s.root({ className })} {...props}>\n      {mark && (\n        <div aria-hidden className={s.mark()}>\n          {mark}\n        </div>\n      )}\n      <h1 className={s.title()}>{title}</h1>\n      {message && <p className={s.message()}>{message}</p>}\n      {versionLabel && <p className={s.version()}>{versionLabel}</p>}\n      <div className={s.actions()}>\n        <Button variant=\"primary\" size=\"lg\" autoFocus onClick={onUpdate}>\n          {updateLabel}\n        </Button>\n        {retryLabel && onRetry && (\n          <Button variant=\"ghost\" onClick={onRetry}>\n            {retryLabel}\n          </Button>\n        )}\n      </div>\n    </main>\n  );\n}\n"],"mappings":";;;;;;;;;AAIA,SAAS,UAAU;AAsCX,cAOF,YAPE;AApCD,IAAM,oBAAoB,GAAG;AAAA,EAClC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF,CAAC;AAsBM,SAAS,kBAAkB,EAAE,OAAO,SAAS,cAAc,MAAM,aAAa,UAAU,YAAY,SAAS,WAAW,GAAG,MAAM,GAA2B;AACjK,QAAM,IAAI,kBAAkB;AAC5B,SACE,qBAAC,UAAK,aAAU,gBAAe,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAClE;AAAA,YACC,oBAAC,SAAI,eAAW,MAAC,WAAW,EAAE,KAAK,GAChC,gBACH;AAAA,IAEF,oBAAC,QAAG,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,WAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,IAC/C,gBAAgB,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,wBAAa;AAAA,IAC1D,qBAAC,SAAI,WAAW,EAAE,QAAQ,GACxB;AAAA,0BAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,WAAS,MAAC,SAAS,UACpD,uBACH;AAAA,MACC,cAAc,WACb,oBAAC,UAAO,SAAQ,SAAQ,SAAS,SAC9B,sBACH;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../src/force-update-screen/force-update-screen.tsx"],"sourcesContent":["// Server-safe. The blocking screen: this version can no longer run. It replaces the app, it is not laid over it —\n// nothing behind it is reachable. Every word is a prop; the store URL and the versions come from the backend.\nimport { Button } from \"@krizaka/ui/button\";\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { warnDeprecated } from \"../deprecated\";\n\n/** @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0. */\nexport const forceUpdateScreen = tv({\n  slots: {\n    root: \"mx-auto flex min-h-dvh w-full max-w-md flex-col items-center justify-center gap-4 px-6 py-12 text-center text-fg\",\n    mark: \"flex h-24 w-24 items-center justify-center [&>svg]:h-24 [&>svg]:w-24\",\n    title: \"text-2xl font-semibold text-fg\",\n    message: \"text-fg-secondary\",\n    version: \"font-mono text-xs text-fg-tertiary\",\n    actions: \"mt-2 flex w-full flex-col gap-2\",\n  },\n});\n\nexport type ForceUpdateScreenProps = Omit<React.ComponentProps<\"main\">, \"title\"> & {\n  /** The headline (“Update to keep going”). */\n  title: React.ReactNode;\n  /** Why, in a sentence — the backend's localized `message`. */\n  message?: React.ReactNode;\n  /** The versions, in words and mono (“You have 1.1.0 · 1.2.0 or later is required”). */\n  versionLabel?: React.ReactNode;\n  /** The product's mark or mascot (decorative). */\n  mark?: React.ReactNode;\n  /** The button that updates (“Update the app”). */\n  updateLabel: string;\n  /** Opens the store page. */\n  onUpdate: () => void;\n  /** A secondary way (“Check again”) once the update is installed — optional. */\n  retryLabel?: string;\n  /** Checks the backend again. */\n  onRetry?: () => void;\n};\n\n/**\n * The forced update: one thing to do, and the way to do it.\n * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.\n */\nexport function ForceUpdateScreen({ title, message, versionLabel, mark, updateLabel, onUpdate, retryLabel, onRetry, className, ...props }: ForceUpdateScreenProps) {\n  warnDeprecated(\"force-update-screen\");\n  const s = forceUpdateScreen();\n  return (\n    <main data-kind=\"update-force\" className={s.root({ className })} {...props}>\n      {mark && (\n        <div aria-hidden className={s.mark()}>\n          {mark}\n        </div>\n      )}\n      <h1 className={s.title()}>{title}</h1>\n      {message && <p className={s.message()}>{message}</p>}\n      {versionLabel && <p className={s.version()}>{versionLabel}</p>}\n      <div className={s.actions()}>\n        <Button variant=\"primary\" size=\"lg\" autoFocus onClick={onUpdate}>\n          {updateLabel}\n        </Button>\n        {retryLabel && onRetry && (\n          <Button variant=\"ghost\" onClick={onRetry}>\n            {retryLabel}\n          </Button>\n        )}\n      </div>\n    </main>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAIA,SAAS,UAAU;AA6CX,cAOF,YAPE;AAxCD,IAAM,oBAAoB,GAAG;AAAA,EAClC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,IACN,OAAO;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AACF,CAAC;AAyBM,SAAS,kBAAkB,EAAE,OAAO,SAAS,cAAc,MAAM,aAAa,UAAU,YAAY,SAAS,WAAW,GAAG,MAAM,GAA2B;AACjK,iBAAe,qBAAqB;AACpC,QAAM,IAAI,kBAAkB;AAC5B,SACE,qBAAC,UAAK,aAAU,gBAAe,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAClE;AAAA,YACC,oBAAC,SAAI,eAAW,MAAC,WAAW,EAAE,KAAK,GAChC,gBACH;AAAA,IAEF,oBAAC,QAAG,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,WAAW,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,mBAAQ;AAAA,IAC/C,gBAAgB,oBAAC,OAAE,WAAW,EAAE,QAAQ,GAAI,wBAAa;AAAA,IAC1D,qBAAC,SAAI,WAAW,EAAE,QAAQ,GACxB;AAAA,0BAAC,UAAO,SAAQ,WAAU,MAAK,MAAK,WAAS,MAAC,SAAS,UACpD,uBACH;AAAA,MACC,cAAc,WACb,oBAAC,UAAO,SAAQ,SAAQ,SAAS,SAC9B,sBACH;AAAA,OAEJ;AAAA,KACF;AAEJ;","names":[]}

package/dist/gallery-page.d.ts

@@ -44,7 +44,10 @@ type GalleryPageProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
     /** The app's link component (Next's `Link`). */
     linkAs?: LinkComponent;
 };
-/** A demo or a gallery: hero, filters, media in staggered columns, closing call. */
+/**
+ * A demo or a gallery: hero, filters, media in staggered columns, closing call.
+ * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.
+ */
 declare function GalleryPage({ brand, back, eyebrow, title, lead, actions, filters, galleryLabel, items, closing, linkAs, className, children, ...props }: GalleryPageProps): React.JSX.Element;
 
 export { type GalleryItem, GalleryPage, type GalleryPageProps };

package/dist/gallery-page.js

@@ -1,6 +1,9 @@
 import {
   cn
 } from "./chunk-KH3JOEPY.js";
+import {
+  warnDeprecated
+} from "./chunk-KGLRZMCY.js";
 
 // src/gallery-page/gallery-page.tsx
 import { CtaPanel } from "@krizaka/ui/cta-panel";
@@ -8,6 +11,7 @@ import { Section } from "@krizaka/ui/page";
 import { PageHero } from "@krizaka/ui/page-hero";
 import { jsx, jsxs } from "react/jsx-runtime";
 function GalleryPage({ brand, back, eyebrow, title, lead, actions, filters, galleryLabel, items, closing, linkAs, className, children, ...props }) {
+  warnDeprecated("gallery-page");
   return /* @__PURE__ */ jsxs("div", { className: cn(brand && "brand-" + brand, className), ...props, children: [
     /* @__PURE__ */ jsx(PageHero, { back, linkAs, eyebrow, title, lead, align: "center", backdrop: "plain", children: actions }),
     /* @__PURE__ */ jsxs(Section, { "aria-label": galleryLabel, spacing: "sm", children: [

package/dist/gallery-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/gallery-page/gallery-page.tsx"],"sourcesContent":["// Server-safe. A demo or a gallery (blocks.css `.kz-tpl-gallery`): the hero, the filters as chips, then the pieces in\n// columns of different heights — each a framed media with its title and caption (a recording of the real product, an\n// image it generated, with its prompt) — and the closing call.\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\n\nexport interface GalleryItem {\n  /** A stable key. */\n  id: string;\n  /** The media: an `<img>` with its `alt`, a `<video>` with its label, a VideoPlayer. */\n  media: React.ReactNode;\n  /** Its title. */\n  title: React.ReactNode;\n  /** One line: what it shows, how it was made (a prompt, a seed). */\n  caption?: React.ReactNode;\n}\n\nexport type GalleryPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The brand the page wears (`.brand-<id>`). */\n  brand?: string;\n  /** The way back. */\n  back?: { href: string; label: string };\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1`. */\n  title: React.ReactNode;\n  /** One or two sentences under it. */\n  lead?: React.ReactNode;\n  /** The hero's actions. */\n  actions?: React.ReactNode;\n  /** Above the pieces: the filters (ChipLink, a Chip group) — the address says which one is on. */\n  filters?: React.ReactNode;\n  /** The gallery's accessible name. */\n  galleryLabel: string;\n  /** The pieces, featured first. */\n  items: readonly GalleryItem[];\n  /** After the gallery: how it was made, the facts. */\n  children?: React.ReactNode;\n  /** The closing call. */\n  closing?: { title: React.ReactNode; body?: React.ReactNode; actions: React.ReactNode };\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/** A demo or a gallery: hero, filters, media in staggered columns, closing call. */\nexport function GalleryPage({ brand, back, eyebrow, title, lead, actions, filters, galleryLabel, items, closing, linkAs, className, children, ...props }: GalleryPageProps) {\n  return (\n    <div className={cn(brand && \"brand-\" + brand, className)} {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} align=\"center\" backdrop=\"plain\">\n        {actions}\n      </PageHero>\n      <Section aria-label={galleryLabel} spacing=\"sm\">\n        {filters && <div className=\"kz-tpl-filters\">{filters}</div>}\n        <ul className=\"kz-tpl-gallery\">\n          {items.map((item) => (\n            <li key={item.id}>\n              <figure className=\"kz-tpl-figure\">\n                <div className=\"kz-tpl-figure-media\">{item.media}</div>\n                <figcaption>\n                  <strong>{item.title}</strong>\n                  {item.caption && <span>{item.caption}</span>}\n                </figcaption>\n              </figure>\n            </li>\n          ))}\n        </ul>\n      </Section>\n      {children}\n      {closing && (\n        <Section spacing=\"sm\" aria-labelledby=\"gallery-closing\">\n          <CtaPanel id=\"gallery-closing\" title={closing.title} body={closing.body} reveal>\n            {closing.actions}\n          </CtaPanel>\n        </Section>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;AAGA,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAExB,SAAS,gBAAgB;AA+CnB,cAUU,YAVV;AAHC,SAAS,YAAY,EAAE,OAAO,MAAM,SAAS,OAAO,MAAM,SAAS,SAAS,cAAc,OAAO,SAAS,QAAQ,WAAW,UAAU,GAAG,MAAM,GAAqB;AAC1K,SACE,qBAAC,SAAI,WAAW,GAAG,SAAS,WAAW,OAAO,SAAS,GAAI,GAAG,OAC5D;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,OAAM,UAAS,UAAS,SACvG,mBACH;AAAA,IACA,qBAAC,WAAQ,cAAY,cAAc,SAAQ,MACxC;AAAA,iBAAW,oBAAC,SAAI,WAAU,kBAAkB,mBAAQ;AAAA,MACrD,oBAAC,QAAG,WAAU,kBACX,gBAAM,IAAI,CAAC,SACV,oBAAC,QACC,+BAAC,YAAO,WAAU,iBAChB;AAAA,4BAAC,SAAI,WAAU,uBAAuB,eAAK,OAAM;AAAA,QACjD,qBAAC,gBACC;AAAA,8BAAC,YAAQ,eAAK,OAAM;AAAA,UACnB,KAAK,WAAW,oBAAC,UAAM,eAAK,SAAQ;AAAA,WACvC;AAAA,SACF,KAPO,KAAK,EAQd,CACD,GACH;AAAA,OACF;AAAA,IACC;AAAA,IACA,WACC,oBAAC,WAAQ,SAAQ,MAAK,mBAAgB,mBACpC,8BAAC,YAAS,IAAG,mBAAkB,OAAO,QAAQ,OAAO,MAAM,QAAQ,MAAM,QAAM,MAC5E,kBAAQ,SACX,GACF;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../src/gallery-page/gallery-page.tsx"],"sourcesContent":["// Server-safe. A demo or a gallery (blocks.css `.kz-tpl-gallery`): the hero, the filters as chips, then the pieces in\n// columns of different heights — each a framed media with its title and caption (a recording of the real product, an\n// image it generated, with its prompt) — and the closing call.\nimport { CtaPanel } from \"@krizaka/ui/cta-panel\";\nimport { Section } from \"@krizaka/ui/page\";\nimport type { LinkComponent } from \"@krizaka/ui/page-hero\";\nimport { PageHero } from \"@krizaka/ui/page-hero\";\nimport type * as React from \"react\";\n\nimport { cn } from \"../cn\";\nimport { warnDeprecated } from \"../deprecated\";\n\nexport interface GalleryItem {\n  /** A stable key. */\n  id: string;\n  /** The media: an `<img>` with its `alt`, a `<video>` with its label, a VideoPlayer. */\n  media: React.ReactNode;\n  /** Its title. */\n  title: React.ReactNode;\n  /** One line: what it shows, how it was made (a prompt, a seed). */\n  caption?: React.ReactNode;\n}\n\nexport type GalleryPageProps = Omit<React.HTMLAttributes<HTMLElement>, \"title\"> & {\n  /** The brand the page wears (`.brand-<id>`). */\n  brand?: string;\n  /** The way back. */\n  back?: { href: string; label: string };\n  /** A mono line above the title. */\n  eyebrow?: React.ReactNode;\n  /** The page's `h1`. */\n  title: React.ReactNode;\n  /** One or two sentences under it. */\n  lead?: React.ReactNode;\n  /** The hero's actions. */\n  actions?: React.ReactNode;\n  /** Above the pieces: the filters (ChipLink, a Chip group) — the address says which one is on. */\n  filters?: React.ReactNode;\n  /** The gallery's accessible name. */\n  galleryLabel: string;\n  /** The pieces, featured first. */\n  items: readonly GalleryItem[];\n  /** After the gallery: how it was made, the facts. */\n  children?: React.ReactNode;\n  /** The closing call. */\n  closing?: { title: React.ReactNode; body?: React.ReactNode; actions: React.ReactNode };\n  /** The app's link component (Next's `Link`). */\n  linkAs?: LinkComponent;\n};\n\n/**\n * A demo or a gallery: hero, filters, media in staggered columns, closing call.\n * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.\n */\nexport function GalleryPage({ brand, back, eyebrow, title, lead, actions, filters, galleryLabel, items, closing, linkAs, className, children, ...props }: GalleryPageProps) {\n  warnDeprecated(\"gallery-page\");\n  return (\n    <div className={cn(brand && \"brand-\" + brand, className)} {...props}>\n      <PageHero back={back} linkAs={linkAs} eyebrow={eyebrow} title={title} lead={lead} align=\"center\" backdrop=\"plain\">\n        {actions}\n      </PageHero>\n      <Section aria-label={galleryLabel} spacing=\"sm\">\n        {filters && <div className=\"kz-tpl-filters\">{filters}</div>}\n        <ul className=\"kz-tpl-gallery\">\n          {items.map((item) => (\n            <li key={item.id}>\n              <figure className=\"kz-tpl-figure\">\n                <div className=\"kz-tpl-figure-media\">{item.media}</div>\n                <figcaption>\n                  <strong>{item.title}</strong>\n                  {item.caption && <span>{item.caption}</span>}\n                </figcaption>\n              </figure>\n            </li>\n          ))}\n        </ul>\n      </Section>\n      {children}\n      {closing && (\n        <Section spacing=\"sm\" aria-labelledby=\"gallery-closing\">\n          <CtaPanel id=\"gallery-closing\" title={closing.title} body={closing.body} reveal>\n            {closing.actions}\n          </CtaPanel>\n        </Section>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;AAGA,SAAS,gBAAgB;AACzB,SAAS,eAAe;AAExB,SAAS,gBAAgB;AAoDnB,cAUU,YAVV;AAJC,SAAS,YAAY,EAAE,OAAO,MAAM,SAAS,OAAO,MAAM,SAAS,SAAS,cAAc,OAAO,SAAS,QAAQ,WAAW,UAAU,GAAG,MAAM,GAAqB;AAC1K,iBAAe,cAAc;AAC7B,SACE,qBAAC,SAAI,WAAW,GAAG,SAAS,WAAW,OAAO,SAAS,GAAI,GAAG,OAC5D;AAAA,wBAAC,YAAS,MAAY,QAAgB,SAAkB,OAAc,MAAY,OAAM,UAAS,UAAS,SACvG,mBACH;AAAA,IACA,qBAAC,WAAQ,cAAY,cAAc,SAAQ,MACxC;AAAA,iBAAW,oBAAC,SAAI,WAAU,kBAAkB,mBAAQ;AAAA,MACrD,oBAAC,QAAG,WAAU,kBACX,gBAAM,IAAI,CAAC,SACV,oBAAC,QACC,+BAAC,YAAO,WAAU,iBAChB;AAAA,4BAAC,SAAI,WAAU,uBAAuB,eAAK,OAAM;AAAA,QACjD,qBAAC,gBACC;AAAA,8BAAC,YAAQ,eAAK,OAAM;AAAA,UACnB,KAAK,WAAW,oBAAC,UAAM,eAAK,SAAQ;AAAA,WACvC;AAAA,SACF,KAPO,KAAK,EAQd,CACD,GACH;AAAA,OACF;AAAA,IACC;AAAA,IACA,WACC,oBAAC,WAAQ,SAAQ,MAAK,mBAAgB,mBACpC,8BAAC,YAAS,IAAG,mBAAkB,OAAO,QAAQ,OAAO,MAAM,QAAQ,MAAM,QAAM,MAC5E,kBAAQ,SACX,GACF;AAAA,KAEJ;AAEJ;","names":[]}

package/dist/genui.js

@@ -7,19 +7,19 @@ import {
 } from "./chunk-YKOLME7R.js";
 import {
   DataTable
-} from "./chunk-YHKTYFOQ.js";
-import "./chunk-YGIN2YIY.js";
+} from "./chunk-QWKCNSPF.js";
+import "./chunk-3X3OF4TI.js";
 import "./chunk-JXLDUDTD.js";
 import "./chunk-3DHNN5V7.js";
 import "./chunk-KVDB4GXV.js";
-import "./chunk-ZQW7LF4Y.js";
-import "./chunk-HHFWK2HH.js";
+import "./chunk-OIMXKRXF.js";
+import "./chunk-VIPSZXO4.js";
 import "./chunk-D3T54RSL.js";
 import "./chunk-J3NC6ER4.js";
 import {
   cn
 } from "./chunk-NSLXEDIS.js";
-import "./chunk-7NRSPHAF.js";
+import "./chunk-VB7MWE2N.js";
 import "./chunk-ZIXB33X7.js";
 import "./chunk-FZBWEDQI.js";
 import "./chunk-CPA5CF35.js";

package/dist/image-cropper.d.ts

@@ -1,6 +1,7 @@
 import * as tailwind_variants from 'tailwind-variants';
 import * as React from 'react';
 
+/** @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0. */
 declare const imageCropper: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
@@ -56,7 +57,10 @@ type CropValue = {
     y: number;
     zoom: number;
 };
-/** The crop in pixels of the source: what to cut from an image of `width` × `height` for a frame of `aspect`. */
+/**
+ * The crop in pixels of the source: what to cut from an image of `width` × `height` for a frame of `aspect`.
+ * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.
+ */
 declare function cropRect(value: CropValue, source: {
     width: number;
     height: number;
@@ -74,6 +78,7 @@ type ImageCropperLabels = {
     /** The zoom slider ("Zoom"). */
     zoom: string;
 };
+/** @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0. */
 declare const imageCropperLabels: ImageCropperLabels;
 type ImageCropperProps = {
     /** The picture to crop. Or `children`: a `<video>` (with the class it is given through `mediaClassName`). */
@@ -109,7 +114,10 @@ type ImageCropperProps = {
     /** Classes merged on the root. */
     className?: string;
 };
-/** Chooses what a fixed frame keeps of a picture or a video: drag, zoom, keyboard; a focus point and a zoom out. */
+/**
+ * Chooses what a fixed frame keeps of a picture or a video: drag, zoom, keyboard; a focus point and a zoom out.
+ * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.
+ */
 declare function ImageCropper({ src, alt, children, naturalSize, aspect, round, value: valueProp, defaultValue, onValueChange, maxZoom, showZoom, labels: given, className, }: ImageCropperProps): React.JSX.Element;
 
 export { type CropValue, ImageCropper, type ImageCropperLabels, type ImageCropperProps, cropRect, imageCropper, imageCropperLabels };

package/dist/image-cropper.js

@@ -2,6 +2,9 @@
 import {
   Slider
 } from "./chunk-ADRUEPYC.js";
+import {
+  warnDeprecated
+} from "./chunk-BDIU5LZB.js";
 import "./chunk-HJFRHYCI.js";
 import "./chunk-NSLXEDIS.js";
 import {
@@ -49,6 +52,7 @@ function ImageCropper({
   labels: given,
   className
 }) {
+  warnDeprecated("image-cropper");
   const labels = { ...imageCropperLabels, ...given };
   const s = imageCropper();
   const frame = React.useRef(null);

package/dist/image-cropper.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/image-cropper/image-cropper.tsx"],"sourcesContent":["// Client. A fixed frame (a profile picture's square, a vertical 9:16, a banner) over a picture or a video the person\n// drags and zooms to choose what stays in. The value is a focus point (0–1 on each axis) and a zoom — independent of\n// the screen, the same on the server — and `cropRect` turns it into pixels of the source. Keyboard: the frame takes the\n// focus, the arrows move (Shift: faster), + / − zoom; the zoom is also a slider. No motion but the person's own.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { clamp } from \"../media\";\nimport { Slider } from \"../slider\";\n\nexport const imageCropper = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-3\",\n    frame:\n      \"relative w-full cursor-grab touch-none overflow-hidden rounded-xl bg-media active:cursor-grabbing \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0\",\n    media: \"pointer-events-none absolute max-w-none select-none\",\n    grid:\n      \"pointer-events-none absolute inset-0 rounded-xl border-2 border-fg-on-media/80 \" +\n      \"bg-[linear-gradient(to_right,transparent_33.2%,var(--kz-text-on-media)_33.3%,transparent_33.5%,transparent_66.5%,var(--kz-text-on-media)_66.6%,transparent_66.8%),linear-gradient(to_bottom,transparent_33.2%,var(--kz-text-on-media)_33.3%,transparent_33.5%,transparent_66.5%,var(--kz-text-on-media)_66.6%,transparent_66.8%)] opacity-40\",\n    round: \"pointer-events-none absolute inset-0 rounded-full shadow-[0_0_0_9999px_var(--kz-scrim-strong)]\",\n  },\n});\n\n/** Where the frame looks: the focus point (0–1 from the left and the top of the source) and the zoom (1 = covers). */\nexport type CropValue = { x: number; y: number; zoom: number };\n\n/** The crop in pixels of the source: what to cut from an image of `width` × `height` for a frame of `aspect`. */\nexport function cropRect(value: CropValue, source: { width: number; height: number }, aspect: number) {\n  const mediaAspect = source.width / source.height;\n  const width = (mediaAspect > aspect ? source.height * aspect : source.width) / value.zoom;\n  const height = width / aspect;\n  const x = clamp(value.x * source.width - width / 2, 0, source.width - width);\n  const y = clamp(value.y * source.height - height / 2, 0, source.height - height);\n  return { x: Math.round(x), y: Math.round(y), width: Math.round(width), height: Math.round(height) };\n}\n\nexport type ImageCropperLabels = {\n  /** The frame's accessible name (\"Crop area\"). */\n  frame: string;\n  /** How to use it with the keyboard, read with the frame (\"Use the arrow keys to move the picture, + and − to zoom.\"). */\n  instructions: string;\n  /** The zoom slider (\"Zoom\"). */\n  zoom: string;\n};\n\nexport const imageCropperLabels: ImageCropperLabels = {\n  frame: \"Crop area\",\n  instructions: \"Drag or use the arrow keys to move the picture, + and − to zoom.\",\n  zoom: \"Zoom\",\n};\n\nexport type ImageCropperProps = {\n  /** The picture to crop. Or `children`: a `<video>` (with the class it is given through `mediaClassName`). */\n  src?: string;\n  /** The picture's alternative text, passed translated (empty when the frame's name says enough). */\n  alt?: string;\n  /** A media element instead of `src` — a `<video>` to choose the frame of a clip. Its natural size is in `naturalSize`. */\n  children?: React.ReactElement<{ className?: string; style?: React.CSSProperties }>;\n  /** The source's size when `children` is a video: `{ width: video.videoWidth, height: video.videoHeight }`. */\n  naturalSize?: { width: number; height: number };\n  /** The frame's width / height: 1 (a square), 9 / 16 (vertical), 3 (a banner). */\n  aspect: number;\n  /** A round mask over the square frame (a profile picture). */\n  round?: boolean;\n  /** The crop (controlled). */\n  value?: CropValue;\n  /** The crop at first, uncontrolled. Default: centred, no zoom. */\n  defaultValue?: CropValue;\n  /** Called on every move. */\n  onValueChange?: (value: CropValue) => void;\n  /** The largest zoom. Default 4. */\n  maxZoom?: number;\n  /** Shows the zoom slider under the frame. Default `true`. */\n  showZoom?: boolean;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<ImageCropperLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** Chooses what a fixed frame keeps of a picture or a video: drag, zoom, keyboard; a focus point and a zoom out. */\nexport function ImageCropper({\n  src,\n  alt = \"\",\n  children,\n  naturalSize,\n  aspect,\n  round,\n  value: valueProp,\n  defaultValue = { x: 0.5, y: 0.5, zoom: 1 },\n  onValueChange,\n  maxZoom = 4,\n  showZoom = true,\n  labels: given,\n  className,\n}: ImageCropperProps) {\n  const labels = { ...imageCropperLabels, ...given };\n  const s = imageCropper();\n  const frame = React.useRef<HTMLDivElement>(null);\n  const drag = React.useRef<{ x: number; y: number; from: CropValue } | null>(null);\n  const [inner, setInner] = React.useState(defaultValue);\n  const [loaded, setLoaded] = React.useState<{ width: number; height: number } | null>(null);\n  const value = valueProp ?? inner;\n  const id = React.useId();\n  const size = naturalSize ?? loaded;\n  const mediaAspect = size ? size.width / size.height : aspect;\n\n  // The media's box, in % of the frame: it covers the frame at zoom 1.\n  const widthPct = (mediaAspect > aspect ? (mediaAspect / aspect) * 100 : 100) * value.zoom;\n  const heightPct = (mediaAspect > aspect ? 100 : (aspect / mediaAspect) * 100) * value.zoom;\n  // The focus point's limits: the media never leaves a gap in the frame.\n  const halfX = 50 / widthPct;\n  const halfY = 50 / heightPct;\n\n  const set = (next: CropValue) => {\n    const zoom = clamp(next.zoom, 1, maxZoom);\n    const wPct = (mediaAspect > aspect ? (mediaAspect / aspect) * 100 : 100) * zoom;\n    const hPct = (mediaAspect > aspect ? 100 : (aspect / mediaAspect) * 100) * zoom;\n    const fixed = { x: clamp(next.x, 50 / wPct, 1 - 50 / wPct), y: clamp(next.y, 50 / hPct, 1 - 50 / hPct), zoom };\n    if (!valueProp) setInner(fixed);\n    onValueChange?.(fixed);\n  };\n\n  const x = clamp(value.x, halfX, 1 - halfX);\n  const y = clamp(value.y, halfY, 1 - halfY);\n  // Rounded: float noise (5e-15) is not a length every parser takes, and a dropped `top` is a gap.\n  const pct = (n: number) => `${Math.round(n * 1e4) / 1e4}%`;\n  const style: React.CSSProperties = {\n    width: pct(widthPct),\n    height: pct(heightPct),\n    left: pct(50 - x * widthPct),\n    top: pct(50 - y * heightPct),\n  };\n\n  return (\n    <div className={s.root({ className })}>\n      <div\n        ref={frame}\n        role=\"group\"\n        tabIndex={0}\n        aria-label={labels.frame}\n        aria-describedby={`${id}-help`}\n        className={s.frame()}\n        style={{ aspectRatio: String(aspect) }}\n        onPointerDown={(event) => {\n          frame.current?.setPointerCapture?.(event.pointerId);\n          drag.current = { x: event.clientX, y: event.clientY, from: { x, y, zoom: value.zoom } };\n        }}\n        onPointerMove={(event) => {\n          const start = drag.current;\n          const box = frame.current?.getBoundingClientRect();\n          if (!start || !box?.width) return;\n          set({\n            x: start.from.x - (event.clientX - start.x) / ((box.width * widthPct) / 100),\n            y: start.from.y - (event.clientY - start.y) / ((box.height * heightPct) / 100),\n            zoom: value.zoom,\n          });\n        }}\n        onPointerUp={() => {\n          drag.current = null;\n        }}\n        onWheel={(event) => {\n          if (!event.ctrlKey && !event.metaKey) return;\n          event.preventDefault();\n          set({ x, y, zoom: value.zoom - event.deltaY * 0.01 });\n        }}\n        onKeyDown={(event) => {\n          const nudge = event.shiftKey ? 0.1 : 0.02;\n          const moves: Record<string, CropValue> = {\n            ArrowLeft: { x: x - nudge, y, zoom: value.zoom },\n            ArrowRight: { x: x + nudge, y, zoom: value.zoom },\n            ArrowUp: { x, y: y - nudge, zoom: value.zoom },\n            ArrowDown: { x, y: y + nudge, zoom: value.zoom },\n            \"+\": { x, y, zoom: value.zoom + 0.1 },\n            \"=\": { x, y, zoom: value.zoom + 0.1 },\n            \"-\": { x, y, zoom: value.zoom - 0.1 },\n          };\n          const next = moves[event.key];\n          if (!next) return;\n          event.preventDefault();\n          set(next);\n        }}\n      >\n        {children ? (\n          React.cloneElement(children, { className: s.media({ className: children.props.className }), style: { ...children.props.style, ...style } })\n        ) : src ? (\n          <img\n            src={src}\n            alt={alt}\n            draggable={false}\n            className={s.media()}\n            style={style}\n            // A picture already in the cache (or rendered on the server) is complete before React attaches: no load event.\n            ref={(img) => {\n              if (img?.complete && img.naturalWidth > 0) setLoaded((was) => (was?.width === img.naturalWidth && was.height === img.naturalHeight ? was : { width: img.naturalWidth, height: img.naturalHeight }));\n            }}\n            onLoad={(event) => setLoaded({ width: event.currentTarget.naturalWidth, height: event.currentTarget.naturalHeight })}\n          />\n        ) : null}\n        <span className={round ? s.round() : s.grid()} aria-hidden />\n        <span id={`${id}-help`} className=\"sr-only\">\n          {labels.instructions}\n        </span>\n      </div>\n      {showZoom && (\n        <Slider\n          label={labels.zoom}\n          min={1}\n          max={maxZoom}\n          step={0.05}\n          value={value.zoom}\n          onValueChange={(zoom) => set({ x, y, zoom })}\n          formatValue={(v) => `${Math.round(v * 100)} %`}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/image-cropper/image-cropper.tsx"],"sourcesContent":["// Client. A fixed frame (a profile picture's square, a vertical 9:16, a banner) over a picture or a video the person\n// drags and zooms to choose what stays in. The value is a focus point (0–1 on each axis) and a zoom — independent of\n// the screen, the same on the server — and `cropRect` turns it into pixels of the source. Keyboard: the frame takes the\n// focus, the arrows move (Shift: faster), + / − zoom; the zoom is also a slider. No motion but the person's own.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { warnDeprecated } from \"../deprecated\";\nimport { clamp } from \"../media\";\nimport { Slider } from \"../slider\";\n\n/** @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0. */\nexport const imageCropper = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-3\",\n    frame:\n      \"relative w-full cursor-grab touch-none overflow-hidden rounded-xl bg-media active:cursor-grabbing \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0\",\n    media: \"pointer-events-none absolute max-w-none select-none\",\n    grid:\n      \"pointer-events-none absolute inset-0 rounded-xl border-2 border-fg-on-media/80 \" +\n      \"bg-[linear-gradient(to_right,transparent_33.2%,var(--kz-text-on-media)_33.3%,transparent_33.5%,transparent_66.5%,var(--kz-text-on-media)_66.6%,transparent_66.8%),linear-gradient(to_bottom,transparent_33.2%,var(--kz-text-on-media)_33.3%,transparent_33.5%,transparent_66.5%,var(--kz-text-on-media)_66.6%,transparent_66.8%)] opacity-40\",\n    round: \"pointer-events-none absolute inset-0 rounded-full shadow-[0_0_0_9999px_var(--kz-scrim-strong)]\",\n  },\n});\n\n/** Where the frame looks: the focus point (0–1 from the left and the top of the source) and the zoom (1 = covers). */\nexport type CropValue = { x: number; y: number; zoom: number };\n\n/**\n * The crop in pixels of the source: what to cut from an image of `width` × `height` for a frame of `aspect`.\n * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.\n */\nexport function cropRect(value: CropValue, source: { width: number; height: number }, aspect: number) {\n  const mediaAspect = source.width / source.height;\n  const width = (mediaAspect > aspect ? source.height * aspect : source.width) / value.zoom;\n  const height = width / aspect;\n  const x = clamp(value.x * source.width - width / 2, 0, source.width - width);\n  const y = clamp(value.y * source.height - height / 2, 0, source.height - height);\n  return { x: Math.round(x), y: Math.round(y), width: Math.round(width), height: Math.round(height) };\n}\n\nexport type ImageCropperLabels = {\n  /** The frame's accessible name (\"Crop area\"). */\n  frame: string;\n  /** How to use it with the keyboard, read with the frame (\"Use the arrow keys to move the picture, + and − to zoom.\"). */\n  instructions: string;\n  /** The zoom slider (\"Zoom\"). */\n  zoom: string;\n};\n\n/** @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0. */\nexport const imageCropperLabels: ImageCropperLabels = {\n  frame: \"Crop area\",\n  instructions: \"Drag or use the arrow keys to move the picture, + and − to zoom.\",\n  zoom: \"Zoom\",\n};\n\nexport type ImageCropperProps = {\n  /** The picture to crop. Or `children`: a `<video>` (with the class it is given through `mediaClassName`). */\n  src?: string;\n  /** The picture's alternative text, passed translated (empty when the frame's name says enough). */\n  alt?: string;\n  /** A media element instead of `src` — a `<video>` to choose the frame of a clip. Its natural size is in `naturalSize`. */\n  children?: React.ReactElement<{ className?: string; style?: React.CSSProperties }>;\n  /** The source's size when `children` is a video: `{ width: video.videoWidth, height: video.videoHeight }`. */\n  naturalSize?: { width: number; height: number };\n  /** The frame's width / height: 1 (a square), 9 / 16 (vertical), 3 (a banner). */\n  aspect: number;\n  /** A round mask over the square frame (a profile picture). */\n  round?: boolean;\n  /** The crop (controlled). */\n  value?: CropValue;\n  /** The crop at first, uncontrolled. Default: centred, no zoom. */\n  defaultValue?: CropValue;\n  /** Called on every move. */\n  onValueChange?: (value: CropValue) => void;\n  /** The largest zoom. Default 4. */\n  maxZoom?: number;\n  /** Shows the zoom slider under the frame. Default `true`. */\n  showZoom?: boolean;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<ImageCropperLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/**\n * Chooses what a fixed frame keeps of a picture or a video: drag, zoom, keyboard; a focus point and a zoom out.\n * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.\n */\nexport function ImageCropper({\n  src,\n  alt = \"\",\n  children,\n  naturalSize,\n  aspect,\n  round,\n  value: valueProp,\n  defaultValue = { x: 0.5, y: 0.5, zoom: 1 },\n  onValueChange,\n  maxZoom = 4,\n  showZoom = true,\n  labels: given,\n  className,\n}: ImageCropperProps) {\n  warnDeprecated(\"image-cropper\");\n  const labels = { ...imageCropperLabels, ...given };\n  const s = imageCropper();\n  const frame = React.useRef<HTMLDivElement>(null);\n  const drag = React.useRef<{ x: number; y: number; from: CropValue } | null>(null);\n  const [inner, setInner] = React.useState(defaultValue);\n  const [loaded, setLoaded] = React.useState<{ width: number; height: number } | null>(null);\n  const value = valueProp ?? inner;\n  const id = React.useId();\n  const size = naturalSize ?? loaded;\n  const mediaAspect = size ? size.width / size.height : aspect;\n\n  // The media's box, in % of the frame: it covers the frame at zoom 1.\n  const widthPct = (mediaAspect > aspect ? (mediaAspect / aspect) * 100 : 100) * value.zoom;\n  const heightPct = (mediaAspect > aspect ? 100 : (aspect / mediaAspect) * 100) * value.zoom;\n  // The focus point's limits: the media never leaves a gap in the frame.\n  const halfX = 50 / widthPct;\n  const halfY = 50 / heightPct;\n\n  const set = (next: CropValue) => {\n    const zoom = clamp(next.zoom, 1, maxZoom);\n    const wPct = (mediaAspect > aspect ? (mediaAspect / aspect) * 100 : 100) * zoom;\n    const hPct = (mediaAspect > aspect ? 100 : (aspect / mediaAspect) * 100) * zoom;\n    const fixed = { x: clamp(next.x, 50 / wPct, 1 - 50 / wPct), y: clamp(next.y, 50 / hPct, 1 - 50 / hPct), zoom };\n    if (!valueProp) setInner(fixed);\n    onValueChange?.(fixed);\n  };\n\n  const x = clamp(value.x, halfX, 1 - halfX);\n  const y = clamp(value.y, halfY, 1 - halfY);\n  // Rounded: float noise (5e-15) is not a length every parser takes, and a dropped `top` is a gap.\n  const pct = (n: number) => `${Math.round(n * 1e4) / 1e4}%`;\n  const style: React.CSSProperties = {\n    width: pct(widthPct),\n    height: pct(heightPct),\n    left: pct(50 - x * widthPct),\n    top: pct(50 - y * heightPct),\n  };\n\n  return (\n    <div className={s.root({ className })}>\n      <div\n        ref={frame}\n        role=\"group\"\n        tabIndex={0}\n        aria-label={labels.frame}\n        aria-describedby={`${id}-help`}\n        className={s.frame()}\n        style={{ aspectRatio: String(aspect) }}\n        onPointerDown={(event) => {\n          frame.current?.setPointerCapture?.(event.pointerId);\n          drag.current = { x: event.clientX, y: event.clientY, from: { x, y, zoom: value.zoom } };\n        }}\n        onPointerMove={(event) => {\n          const start = drag.current;\n          const box = frame.current?.getBoundingClientRect();\n          if (!start || !box?.width) return;\n          set({\n            x: start.from.x - (event.clientX - start.x) / ((box.width * widthPct) / 100),\n            y: start.from.y - (event.clientY - start.y) / ((box.height * heightPct) / 100),\n            zoom: value.zoom,\n          });\n        }}\n        onPointerUp={() => {\n          drag.current = null;\n        }}\n        onWheel={(event) => {\n          if (!event.ctrlKey && !event.metaKey) return;\n          event.preventDefault();\n          set({ x, y, zoom: value.zoom - event.deltaY * 0.01 });\n        }}\n        onKeyDown={(event) => {\n          const nudge = event.shiftKey ? 0.1 : 0.02;\n          const moves: Record<string, CropValue> = {\n            ArrowLeft: { x: x - nudge, y, zoom: value.zoom },\n            ArrowRight: { x: x + nudge, y, zoom: value.zoom },\n            ArrowUp: { x, y: y - nudge, zoom: value.zoom },\n            ArrowDown: { x, y: y + nudge, zoom: value.zoom },\n            \"+\": { x, y, zoom: value.zoom + 0.1 },\n            \"=\": { x, y, zoom: value.zoom + 0.1 },\n            \"-\": { x, y, zoom: value.zoom - 0.1 },\n          };\n          const next = moves[event.key];\n          if (!next) return;\n          event.preventDefault();\n          set(next);\n        }}\n      >\n        {children ? (\n          React.cloneElement(children, { className: s.media({ className: children.props.className }), style: { ...children.props.style, ...style } })\n        ) : src ? (\n          <img\n            src={src}\n            alt={alt}\n            draggable={false}\n            className={s.media()}\n            style={style}\n            // A picture already in the cache (or rendered on the server) is complete before React attaches: no load event.\n            ref={(img) => {\n              if (img?.complete && img.naturalWidth > 0) setLoaded((was) => (was?.width === img.naturalWidth && was.height === img.naturalHeight ? was : { width: img.naturalWidth, height: img.naturalHeight }));\n            }}\n            onLoad={(event) => setLoaded({ width: event.currentTarget.naturalWidth, height: event.currentTarget.naturalHeight })}\n          />\n        ) : null}\n        <span className={round ? s.round() : s.grid()} aria-hidden />\n        <span id={`${id}-help`} className=\"sr-only\">\n          {labels.instructions}\n        </span>\n      </div>\n      {showZoom && (\n        <Slider\n          label={labels.zoom}\n          min={1}\n          max={maxZoom}\n          step={0.05}\n          value={value.zoom}\n          onValueChange={(zoom) => set({ x, y, zoom })}\n          formatValue={(v) => `${Math.round(v * 100)} %`}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/kanban.d.ts

@@ -1,6 +1,7 @@
 import * as tailwind_variants from 'tailwind-variants';
 import * as React from 'react';
 
+/** @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0. */
 declare const kanban: tailwind_variants.TVReturnType<{
     [key: string]: {
         [key: string]: tailwind_variants.ClassValue | {
@@ -100,6 +101,7 @@ type KanbanLabels = {
     /** A column without card (“No card”). */
     empty: string;
 };
+/** @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0. */
 declare const kanbanLabels: KanbanLabels;
 type KanbanProps<T> = {
     /** The columns, in order. */
@@ -126,6 +128,7 @@ type KanbanProps<T> = {
 /**
  * A board of cards in columns — a moderation queue, a release plan: drag and drop with the pointer, or Space and the
  * arrow keys, every step announced. Column limits show in the counts.
+ * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.
  */
 declare function Kanban<T>({ columns, cards, getId, getColumn, getTitle, renderCard, onMove, "aria-label": label, labels: words, className }: KanbanProps<T>): React.JSX.Element;
 

package/dist/kanban.js

@@ -1,4 +1,7 @@
 "use client";
+import {
+  warnDeprecated
+} from "./chunk-BDIU5LZB.js";
 
 // src/kanban/kanban.tsx
 import * as React from "react";
@@ -25,6 +28,7 @@ var kanbanLabels = {
   empty: "No card"
 };
 function Kanban({ columns, cards, getId, getColumn, getTitle, renderCard, onMove, "aria-label": label, labels: words, className }) {
+  warnDeprecated("kanban");
   const labels = { ...kanbanLabels, ...words };
   const s = kanban();
   const instructionsId = React.useId();

package/dist/kanban.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/kanban/kanban.tsx"],"sourcesContent":["// Client (the drag, the keyboard move, the announcements). Cards in columns that move by drag and drop — and by the\n// keyboard: Space picks a card up, the arrows carry it (← → between columns, ↑ ↓ within one), Space drops it, Esc puts it\n// back. Every move is announced in words. The app owns the data: `onMove` says where a card went.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const kanban = tv({\n  slots: {\n    root: \"flex w-full gap-3 overflow-x-auto pb-2\",\n    column: \"flex w-72 shrink-0 flex-col rounded-xl border border-border-default bg-surface-1 data-[over]:border-accent data-[over]:bg-accent-soft/40\",\n    header: \"flex items-center gap-2 px-3 pb-2 pt-3\",\n    title: \"min-w-0 flex-1 truncate text-sm font-semibold text-fg\",\n    count: \"rounded-sm bg-surface-3 px-2 text-xs font-semibold tabular-nums text-fg-secondary data-[over-limit]:bg-danger data-[over-limit]:text-on-accent\",\n    list: \"m-0 flex min-h-16 list-none flex-col gap-2 p-2 pt-0\",\n    card:\n      \"cursor-grab rounded-lg border border-border-default bg-surface-0 p-3 text-sm text-fg shadow-xs outline-hidden transition-shadow \" +\n      \"focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing data-[grabbed]:ring-2 data-[grabbed]:ring-accent data-[grabbed]:shadow-lg data-[dragging]:opacity-40\",\n    empty: \"rounded-lg border border-dashed border-border-default px-3 py-4 text-center text-xs text-fg-secondary\",\n  },\n});\n\nexport type KanbanColumn = {\n  /** A stable id. */\n  id: string;\n  /** Its name — passed translated (“To review”). */\n  title: string;\n  /** The most cards it should hold: the count turns to danger past it. */\n  limit?: number;\n};\n\nexport type KanbanMove = {\n  /** The card moved. */\n  cardId: string;\n  /** Where it came from. */\n  from: string;\n  /** The column it went to. */\n  to: string;\n  /** Its position in that column (0 = top). */\n  index: number;\n};\n\nexport type KanbanLabels = {\n  /** The hint read on a card: how to move it with the keyboard. */\n  instructions: string;\n  /** Announced when a card is picked up: `(card, column) => …`. */\n  grabbed: (card: string, column: string) => string;\n  /** Announced as it moves: `(card, column, position, total) => …`. */\n  moved: (card: string, column: string, position: number, total: number) => string;\n  /** Announced when it is dropped. */\n  dropped: (card: string, column: string, position: number) => string;\n  /** Announced when the move is cancelled. */\n  cancelled: (card: string) => string;\n  /** A column without card (“No card”). */\n  empty: string;\n};\n\nexport const kanbanLabels: KanbanLabels = {\n  instructions: \"Press Space to pick it up, the arrow keys to move it, Space to drop it, Escape to cancel.\",\n  grabbed: (card, column) => `${card} picked up, in ${column}.`,\n  moved: (card, column, position, total) => `${card}: ${column}, position ${position} of ${total}.`,\n  dropped: (card, column, position) => `${card} dropped in ${column}, position ${position}.`,\n  cancelled: (card) => `Move of ${card} cancelled.`,\n  empty: \"No card\",\n};\n\nexport type KanbanProps<T> = {\n  /** The columns, in order. */\n  columns: readonly KanbanColumn[];\n  /** The cards, in their order within each column. */\n  cards: readonly T[];\n  /** A card's id. */\n  getId: (card: T) => string;\n  /** A card's column. */\n  getColumn: (card: T) => string;\n  /** A card's name, for the announcements. */\n  getTitle: (card: T) => string;\n  /** What a card shows. */\n  renderCard: (card: T) => React.ReactNode;\n  /** Called when a card is dropped somewhere new: update the data here. */\n  onMove: (move: KanbanMove) => void;\n  /** The board's accessible name (“Moderation queue”). */\n  \"aria-label\": string;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<KanbanLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\ntype Placement = { column: string; index: number };\n\n/**\n * A board of cards in columns — a moderation queue, a release plan: drag and drop with the pointer, or Space and the\n * arrow keys, every step announced. Column limits show in the counts.\n */\nexport function Kanban<T>({ columns, cards, getId, getColumn, getTitle, renderCard, onMove, \"aria-label\": label, labels: words, className }: KanbanProps<T>) {\n  const labels = { ...kanbanLabels, ...words };\n  const s = kanban();\n  const instructionsId = React.useId();\n  const [grab, setGrab] = React.useState<{ id: string; origin: Placement; at: Placement } | null>(null);\n  const [dragging, setDragging] = React.useState<string | null>(null);\n  const [over, setOver] = React.useState<Placement | null>(null);\n  const [message, setMessage] = React.useState(\"\");\n  const refs = React.useRef(new Map<string, HTMLLIElement>());\n  const byColumn = (column: string, without?: string) => cards.filter((c) => getColumn(c) === column && getId(c) !== without);\n  const titleOf = (id: string) => {\n    const card = cards.find((c) => getId(c) === id);\n    return card ? getTitle(card) : id;\n  };\n  const columnTitle = (id: string) => columns.find((c) => c.id === id)?.title ?? id;\n  const placementOf = (id: string): Placement => {\n    const card = cards.find((c) => getId(c) === id)!;\n    const column = getColumn(card);\n    return { column, index: byColumn(column).findIndex((c) => getId(c) === id) };\n  };\n  const commit = (id: string, from: Placement, to: Placement) => {\n    if (from.column !== to.column || from.index !== to.index) onMove({ cardId: id, from: from.column, to: to.column, index: to.index });\n  };\n  // The cards of a column as shown, with the grabbed card at its keyboard position.\n  const shown = (column: string) => {\n    const list = byColumn(column, grab?.id);\n    if (grab && grab.at.column === column) {\n      const card = cards.find((c) => getId(c) === grab.id);\n      if (card) list.splice(grab.at.index, 0, card);\n    }\n    return list;\n  };\n  React.useEffect(() => {\n    if (grab) refs.current.get(grab.id)?.focus();\n  }, [grab]);\n\n  const onKeyDown = (event: React.KeyboardEvent, id: string) => {\n    const title = titleOf(id);\n    if (!grab) {\n      if (event.key === \" \" || event.key === \"Enter\") {\n        event.preventDefault();\n        const origin = placementOf(id);\n        setGrab({ id, origin, at: origin });\n        setMessage(labels.grabbed(title, columnTitle(origin.column)));\n      }\n      return;\n    }\n    const { at, origin } = grab;\n    const columnIndex = columns.findIndex((c) => c.id === at.column);\n    let next: Placement | null = null;\n    if (event.key === \"ArrowLeft\" && columnIndex > 0) next = { column: columns[columnIndex - 1]!.id, index: Math.min(at.index, byColumn(columns[columnIndex - 1]!.id, id).length) };\n    if (event.key === \"ArrowRight\" && columnIndex < columns.length - 1) next = { column: columns[columnIndex + 1]!.id, index: Math.min(at.index, byColumn(columns[columnIndex + 1]!.id, id).length) };\n    if (event.key === \"ArrowUp\" && at.index > 0) next = { ...at, index: at.index - 1 };\n    if (event.key === \"ArrowDown\" && at.index < byColumn(at.column, id).length) next = { ...at, index: at.index + 1 };\n    if (next) {\n      event.preventDefault();\n      setGrab({ ...grab, at: next });\n      setMessage(labels.moved(title, columnTitle(next.column), next.index + 1, byColumn(next.column, id).length + 1));\n      return;\n    }\n    if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n      setGrab(null);\n      commit(id, origin, at);\n      setMessage(labels.dropped(title, columnTitle(at.column), at.index + 1));\n    } else if (event.key === \"Escape\") {\n      event.preventDefault();\n      setGrab(null);\n      setMessage(labels.cancelled(title));\n    }\n  };\n\n  const indexAt = (column: string, y: number) => {\n    const list = byColumn(column, dragging ?? undefined);\n    const i = list.findIndex((c) => {\n      const box = refs.current.get(getId(c))?.getBoundingClientRect();\n      return box ? y < box.top + box.height / 2 : false;\n    });\n    return i === -1 ? list.length : i;\n  };\n\n  return (\n    <div role=\"group\" aria-label={label} className={s.root({ className })}>\n      <p id={instructionsId} className=\"sr-only\">\n        {labels.instructions}\n      </p>\n      <p className=\"sr-only\" aria-live=\"assertive\">\n        {message}\n      </p>\n      {columns.map((column) => {\n        const list = shown(column.id);\n        const overLimit = column.limit !== undefined && list.length > column.limit;\n        return (\n          <section\n            key={column.id}\n            aria-label={column.title}\n            data-over={over?.column === column.id || undefined}\n            className={s.column()}\n            onDragOver={(e) => {\n              if (!dragging) return;\n              e.preventDefault();\n              setOver({ column: column.id, index: indexAt(column.id, e.clientY) });\n            }}\n            onDragLeave={(e) => {\n              if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setOver(null);\n            }}\n            onDrop={(e) => {\n              e.preventDefault();\n              if (dragging) commit(dragging, placementOf(dragging), { column: column.id, index: indexAt(column.id, e.clientY) });\n              setDragging(null);\n              setOver(null);\n            }}\n          >\n            <header className={s.header()}>\n              <h3 className={s.title()}>{column.title}</h3>\n              <span className={s.count()} data-over-limit={overLimit || undefined}>\n                {column.limit !== undefined ? `${list.length}/${column.limit}` : list.length}\n              </span>\n            </header>\n            <ul className={s.list()}>\n              {list.length === 0 ? <li className={s.empty()}>{labels.empty}</li> : null}\n              {list.map((card) => {\n                const id = getId(card);\n                return (\n                  <li\n                    key={id}\n                    ref={(el) => {\n                      if (el) refs.current.set(id, el);\n                      else refs.current.delete(id);\n                    }}\n                    tabIndex={0}\n                    draggable\n                    aria-describedby={instructionsId}\n                    aria-roledescription=\"card\"\n                    data-grabbed={grab?.id === id || undefined}\n                    data-dragging={dragging === id || undefined}\n                    className={s.card()}\n                    onKeyDown={(e) => onKeyDown(e, id)}\n                    onFocus={() => {\n                      // Tab to another card while one is carried: the carried one goes back.\n                      if (grab && grab.id !== id) {\n                        setMessage(labels.cancelled(titleOf(grab.id)));\n                        setGrab(null);\n                      }\n                    }}\n                    onDragStart={(e) => {\n                      e.dataTransfer.effectAllowed = \"move\";\n                      e.dataTransfer.setData(\"text/plain\", id);\n                      setDragging(id);\n                    }}\n                    onDragEnd={() => {\n                      setDragging(null);\n                      setOver(null);\n                    }}\n                  >\n                    {renderCard(card)}\n                  </li>\n                );\n              })}\n            </ul>\n          </section>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","names":["origin"]}
+{"version":3,"sources":["../src/kanban/kanban.tsx"],"sourcesContent":["// Client (the drag, the keyboard move, the announcements). Cards in columns that move by drag and drop — and by the\n// keyboard: Space picks a card up, the arrows carry it (← → between columns, ↑ ↓ within one), Space drops it, Esc puts it\n// back. Every move is announced in words. The app owns the data: `onMove` says where a card went.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { warnDeprecated } from \"../deprecated\";\n\n/** @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0. */\nexport const kanban = tv({\n  slots: {\n    root: \"flex w-full gap-3 overflow-x-auto pb-2\",\n    column: \"flex w-72 shrink-0 flex-col rounded-xl border border-border-default bg-surface-1 data-[over]:border-accent data-[over]:bg-accent-soft/40\",\n    header: \"flex items-center gap-2 px-3 pb-2 pt-3\",\n    title: \"min-w-0 flex-1 truncate text-sm font-semibold text-fg\",\n    count: \"rounded-sm bg-surface-3 px-2 text-xs font-semibold tabular-nums text-fg-secondary data-[over-limit]:bg-danger data-[over-limit]:text-on-accent\",\n    list: \"m-0 flex min-h-16 list-none flex-col gap-2 p-2 pt-0\",\n    card:\n      \"cursor-grab rounded-lg border border-border-default bg-surface-0 p-3 text-sm text-fg shadow-xs outline-hidden transition-shadow \" +\n      \"focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing data-[grabbed]:ring-2 data-[grabbed]:ring-accent data-[grabbed]:shadow-lg data-[dragging]:opacity-40\",\n    empty: \"rounded-lg border border-dashed border-border-default px-3 py-4 text-center text-xs text-fg-secondary\",\n  },\n});\n\nexport type KanbanColumn = {\n  /** A stable id. */\n  id: string;\n  /** Its name — passed translated (“To review”). */\n  title: string;\n  /** The most cards it should hold: the count turns to danger past it. */\n  limit?: number;\n};\n\nexport type KanbanMove = {\n  /** The card moved. */\n  cardId: string;\n  /** Where it came from. */\n  from: string;\n  /** The column it went to. */\n  to: string;\n  /** Its position in that column (0 = top). */\n  index: number;\n};\n\nexport type KanbanLabels = {\n  /** The hint read on a card: how to move it with the keyboard. */\n  instructions: string;\n  /** Announced when a card is picked up: `(card, column) => …`. */\n  grabbed: (card: string, column: string) => string;\n  /** Announced as it moves: `(card, column, position, total) => …`. */\n  moved: (card: string, column: string, position: number, total: number) => string;\n  /** Announced when it is dropped. */\n  dropped: (card: string, column: string, position: number) => string;\n  /** Announced when the move is cancelled. */\n  cancelled: (card: string) => string;\n  /** A column without card (“No card”). */\n  empty: string;\n};\n\n/** @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0. */\nexport const kanbanLabels: KanbanLabels = {\n  instructions: \"Press Space to pick it up, the arrow keys to move it, Space to drop it, Escape to cancel.\",\n  grabbed: (card, column) => `${card} picked up, in ${column}.`,\n  moved: (card, column, position, total) => `${card}: ${column}, position ${position} of ${total}.`,\n  dropped: (card, column, position) => `${card} dropped in ${column}, position ${position}.`,\n  cancelled: (card) => `Move of ${card} cancelled.`,\n  empty: \"No card\",\n};\n\nexport type KanbanProps<T> = {\n  /** The columns, in order. */\n  columns: readonly KanbanColumn[];\n  /** The cards, in their order within each column. */\n  cards: readonly T[];\n  /** A card's id. */\n  getId: (card: T) => string;\n  /** A card's column. */\n  getColumn: (card: T) => string;\n  /** A card's name, for the announcements. */\n  getTitle: (card: T) => string;\n  /** What a card shows. */\n  renderCard: (card: T) => React.ReactNode;\n  /** Called when a card is dropped somewhere new: update the data here. */\n  onMove: (move: KanbanMove) => void;\n  /** The board's accessible name (“Moderation queue”). */\n  \"aria-label\": string;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<KanbanLabels>;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\ntype Placement = { column: string; index: number };\n\n/**\n * A board of cards in columns — a moderation queue, a release plan: drag and drop with the pointer, or Space and the\n * arrow keys, every step announced. Column limits show in the counts.\n * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.\n */\nexport function Kanban<T>({ columns, cards, getId, getColumn, getTitle, renderCard, onMove, \"aria-label\": label, labels: words, className }: KanbanProps<T>) {\n  warnDeprecated(\"kanban\");\n  const labels = { ...kanbanLabels, ...words };\n  const s = kanban();\n  const instructionsId = React.useId();\n  const [grab, setGrab] = React.useState<{ id: string; origin: Placement; at: Placement } | null>(null);\n  const [dragging, setDragging] = React.useState<string | null>(null);\n  const [over, setOver] = React.useState<Placement | null>(null);\n  const [message, setMessage] = React.useState(\"\");\n  const refs = React.useRef(new Map<string, HTMLLIElement>());\n  const byColumn = (column: string, without?: string) => cards.filter((c) => getColumn(c) === column && getId(c) !== without);\n  const titleOf = (id: string) => {\n    const card = cards.find((c) => getId(c) === id);\n    return card ? getTitle(card) : id;\n  };\n  const columnTitle = (id: string) => columns.find((c) => c.id === id)?.title ?? id;\n  const placementOf = (id: string): Placement => {\n    const card = cards.find((c) => getId(c) === id)!;\n    const column = getColumn(card);\n    return { column, index: byColumn(column).findIndex((c) => getId(c) === id) };\n  };\n  const commit = (id: string, from: Placement, to: Placement) => {\n    if (from.column !== to.column || from.index !== to.index) onMove({ cardId: id, from: from.column, to: to.column, index: to.index });\n  };\n  // The cards of a column as shown, with the grabbed card at its keyboard position.\n  const shown = (column: string) => {\n    const list = byColumn(column, grab?.id);\n    if (grab && grab.at.column === column) {\n      const card = cards.find((c) => getId(c) === grab.id);\n      if (card) list.splice(grab.at.index, 0, card);\n    }\n    return list;\n  };\n  React.useEffect(() => {\n    if (grab) refs.current.get(grab.id)?.focus();\n  }, [grab]);\n\n  const onKeyDown = (event: React.KeyboardEvent, id: string) => {\n    const title = titleOf(id);\n    if (!grab) {\n      if (event.key === \" \" || event.key === \"Enter\") {\n        event.preventDefault();\n        const origin = placementOf(id);\n        setGrab({ id, origin, at: origin });\n        setMessage(labels.grabbed(title, columnTitle(origin.column)));\n      }\n      return;\n    }\n    const { at, origin } = grab;\n    const columnIndex = columns.findIndex((c) => c.id === at.column);\n    let next: Placement | null = null;\n    if (event.key === \"ArrowLeft\" && columnIndex > 0) next = { column: columns[columnIndex - 1]!.id, index: Math.min(at.index, byColumn(columns[columnIndex - 1]!.id, id).length) };\n    if (event.key === \"ArrowRight\" && columnIndex < columns.length - 1) next = { column: columns[columnIndex + 1]!.id, index: Math.min(at.index, byColumn(columns[columnIndex + 1]!.id, id).length) };\n    if (event.key === \"ArrowUp\" && at.index > 0) next = { ...at, index: at.index - 1 };\n    if (event.key === \"ArrowDown\" && at.index < byColumn(at.column, id).length) next = { ...at, index: at.index + 1 };\n    if (next) {\n      event.preventDefault();\n      setGrab({ ...grab, at: next });\n      setMessage(labels.moved(title, columnTitle(next.column), next.index + 1, byColumn(next.column, id).length + 1));\n      return;\n    }\n    if (event.key === \" \" || event.key === \"Enter\") {\n      event.preventDefault();\n      setGrab(null);\n      commit(id, origin, at);\n      setMessage(labels.dropped(title, columnTitle(at.column), at.index + 1));\n    } else if (event.key === \"Escape\") {\n      event.preventDefault();\n      setGrab(null);\n      setMessage(labels.cancelled(title));\n    }\n  };\n\n  const indexAt = (column: string, y: number) => {\n    const list = byColumn(column, dragging ?? undefined);\n    const i = list.findIndex((c) => {\n      const box = refs.current.get(getId(c))?.getBoundingClientRect();\n      return box ? y < box.top + box.height / 2 : false;\n    });\n    return i === -1 ? list.length : i;\n  };\n\n  return (\n    <div role=\"group\" aria-label={label} className={s.root({ className })}>\n      <p id={instructionsId} className=\"sr-only\">\n        {labels.instructions}\n      </p>\n      <p className=\"sr-only\" aria-live=\"assertive\">\n        {message}\n      </p>\n      {columns.map((column) => {\n        const list = shown(column.id);\n        const overLimit = column.limit !== undefined && list.length > column.limit;\n        return (\n          <section\n            key={column.id}\n            aria-label={column.title}\n            data-over={over?.column === column.id || undefined}\n            className={s.column()}\n            onDragOver={(e) => {\n              if (!dragging) return;\n              e.preventDefault();\n              setOver({ column: column.id, index: indexAt(column.id, e.clientY) });\n            }}\n            onDragLeave={(e) => {\n              if (!e.currentTarget.contains(e.relatedTarget as Node | null)) setOver(null);\n            }}\n            onDrop={(e) => {\n              e.preventDefault();\n              if (dragging) commit(dragging, placementOf(dragging), { column: column.id, index: indexAt(column.id, e.clientY) });\n              setDragging(null);\n              setOver(null);\n            }}\n          >\n            <header className={s.header()}>\n              <h3 className={s.title()}>{column.title}</h3>\n              <span className={s.count()} data-over-limit={overLimit || undefined}>\n                {column.limit !== undefined ? `${list.length}/${column.limit}` : list.length}\n              </span>\n            </header>\n            <ul className={s.list()}>\n              {list.length === 0 ? <li className={s.empty()}>{labels.empty}</li> : null}\n              {list.map((card) => {\n                const id = getId(card);\n                return (\n                  <li\n                    key={id}\n                    ref={(el) => {\n                      if (el) refs.current.set(id, el);\n                      else refs.current.delete(id);\n                    }}\n                    tabIndex={0}\n                    draggable\n                    aria-describedby={instructionsId}\n                    aria-roledescription=\"card\"\n                    data-grabbed={grab?.id === id || undefined}\n                    data-dragging={dragging === id || undefined}\n                    className={s.card()}\n                    onKeyDown={(e) => onKeyDown(e, id)}\n                    onFocus={() => {\n                      // Tab to another card while one is carried: the carried one goes back.\n                      if (grab && grab.id !== id) {\n                        setMessage(labels.cancelled(titleOf(grab.id)));\n                        setGrab(null);\n                      }\n                    }}\n                    onDragStart={(e) => {\n                      e.dataTransfer.effectAllowed = \"move\";\n                      e.dataTransfer.setData(\"text/plain\", id);\n                      setDragging(id);\n                    }}\n                    onDragEnd={() => {\n                      setDragging(null);\n                      setOver(null);\n                    }}\n                  >\n                    {renderCard(card)}\n                  </li>\n                );\n              })}\n            </ul>\n          </section>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","names":["origin"]}

package/dist/landscape.d.ts

@@ -35,7 +35,10 @@ type LandscapeProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
      */
     fade?: boolean;
 };
-/** The Krizaka landscape: a decorative backdrop for a hero or a page's end (`aria-hidden`). */
+/**
+ * The Krizaka landscape: a decorative backdrop for a hero or a page's end (`aria-hidden`).
+ * @deprecated Since 3.55 (ADR-006, krizaka-ui#674): no product uses it. Removed in 4.0.
+ */
 declare function Landscape({ tone, flock, phoenix, animated, position, fade, className, style, ...props }: LandscapeProps): React.JSX.Element;
 
 export { Landscape, type LandscapeProps };

package/dist/landscape.js

@@ -1,4 +1,7 @@
 "use client";
+import {
+  warnDeprecated
+} from "./chunk-BDIU5LZB.js";
 import {
   cn
 } from "./chunk-WU4VLSEA.js";
@@ -318,6 +321,7 @@ var CSS = `
 }
 `;
 function Landscape({ tone = "own", flock = true, phoenix = true, animated = true, position = "absolute", fade = true, className, style, ...props }) {
+  warnDeprecated("landscape");
   const u = "kzl" + useId().replace(/[^a-zA-Z0-9_-]/g, "");
   const box = position === "absolute" ? { position: "absolute", inset: "auto 0 0 0", height: "100%", width: "100%" } : { position: "relative", width: "100%", height: 440 };
   return /* @__PURE__ */ jsxs(