@namroodinc/liquid-editorial 0.1.7 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (134) hide show
  1. package/AGENTS.md +2 -0
  2. package/README.md +1 -1
  3. package/UPGRADING.md +50 -0
  4. package/dist/chunks/Board-BLhB5_xx.cjs +2 -0
  5. package/dist/chunks/Board-BLhB5_xx.cjs.map +1 -0
  6. package/dist/chunks/Board-BTFSzn6c.js +239 -0
  7. package/dist/chunks/Board-BTFSzn6c.js.map +1 -0
  8. package/dist/chunks/EntryEditor-CcyYtH74.js +191 -0
  9. package/dist/chunks/EntryEditor-CcyYtH74.js.map +1 -0
  10. package/dist/chunks/EntryEditor-DIpc1iPF.cjs +2 -0
  11. package/dist/chunks/EntryEditor-DIpc1iPF.cjs.map +1 -0
  12. package/dist/chunks/{RichTextEditor-DC_0oN1s.cjs → RichTextEditor-BxtlbjXj.cjs} +2 -2
  13. package/dist/chunks/RichTextEditor-BxtlbjXj.cjs.map +1 -0
  14. package/dist/chunks/{RichTextEditor-CSpjsL1z.js → RichTextEditor-Dnx4i7bQ.js} +104 -93
  15. package/dist/chunks/RichTextEditor-Dnx4i7bQ.js.map +1 -0
  16. package/dist/chunks/mergeRefs-Bc3qS0Tt.cjs +2 -0
  17. package/dist/chunks/mergeRefs-Bc3qS0Tt.cjs.map +1 -0
  18. package/dist/chunks/mergeRefs-DGM402mE.js +10 -0
  19. package/dist/chunks/mergeRefs-DGM402mE.js.map +1 -0
  20. package/dist/components/AssetCard/index.cjs +2 -0
  21. package/dist/components/AssetCard/index.cjs.map +1 -0
  22. package/dist/components/AssetCard/index.d.cts +41 -0
  23. package/dist/components/AssetCard/index.d.cts.map +1 -0
  24. package/dist/components/AssetCard/index.d.ts +41 -0
  25. package/dist/components/AssetCard/index.d.ts.map +1 -0
  26. package/dist/components/AssetCard/index.js +159 -0
  27. package/dist/components/AssetCard/index.js.map +1 -0
  28. package/dist/components/AssetCard/style.css +204 -0
  29. package/dist/components/AssetGrid/index.cjs +1 -1
  30. package/dist/components/AssetGrid/index.cjs.map +1 -1
  31. package/dist/components/AssetGrid/index.d.cts +5 -30
  32. package/dist/components/AssetGrid/index.d.cts.map +1 -1
  33. package/dist/components/AssetGrid/index.d.ts +5 -30
  34. package/dist/components/AssetGrid/index.d.ts.map +1 -1
  35. package/dist/components/AssetGrid/index.js +20 -107
  36. package/dist/components/AssetGrid/index.js.map +1 -1
  37. package/dist/components/AssetGrid/style.css +0 -161
  38. package/dist/components/Board/index.cjs +1 -2
  39. package/dist/components/Board/index.d.cts.map +1 -1
  40. package/dist/components/Board/index.d.ts.map +1 -1
  41. package/dist/components/Board/index.js +1 -231
  42. package/dist/components/Board/keyboard.d.cts +7 -0
  43. package/dist/components/Board/keyboard.d.cts.map +1 -0
  44. package/dist/components/Board/keyboard.d.ts +7 -0
  45. package/dist/components/Board/keyboard.d.ts.map +1 -0
  46. package/dist/components/Board/keyboard.test.d.cts +2 -0
  47. package/dist/components/Board/keyboard.test.d.cts.map +1 -0
  48. package/dist/components/Board/keyboard.test.d.ts +2 -0
  49. package/dist/components/Board/keyboard.test.d.ts.map +1 -0
  50. package/dist/components/Board/moves.d.cts +5 -0
  51. package/dist/components/Board/moves.d.cts.map +1 -0
  52. package/dist/components/Board/moves.d.ts +5 -0
  53. package/dist/components/Board/moves.d.ts.map +1 -0
  54. package/dist/components/Board/moves.test.d.cts +2 -0
  55. package/dist/components/Board/moves.test.d.cts.map +1 -0
  56. package/dist/components/Board/moves.test.d.ts +2 -0
  57. package/dist/components/Board/moves.test.d.ts.map +1 -0
  58. package/dist/components/Button/index.cjs +1 -1
  59. package/dist/components/Button/index.cjs.map +1 -1
  60. package/dist/components/Button/index.js +1 -1
  61. package/dist/components/Button/index.js.map +1 -1
  62. package/dist/components/Button/style.css +0 -16
  63. package/dist/components/DatePicker/index.cjs +1 -1
  64. package/dist/components/DatePicker/index.cjs.map +1 -1
  65. package/dist/components/DatePicker/index.d.cts.map +1 -1
  66. package/dist/components/DatePicker/index.d.ts.map +1 -1
  67. package/dist/components/DatePicker/index.js +39 -36
  68. package/dist/components/DatePicker/index.js.map +1 -1
  69. package/dist/components/Drawer/index.cjs +1 -1
  70. package/dist/components/Drawer/index.cjs.map +1 -1
  71. package/dist/components/Drawer/index.d.cts.map +1 -1
  72. package/dist/components/Drawer/index.d.ts.map +1 -1
  73. package/dist/components/Drawer/index.js +69 -62
  74. package/dist/components/Drawer/index.js.map +1 -1
  75. package/dist/components/EntryEditor/index.cjs +1 -1
  76. package/dist/components/EntryEditor/index.d.cts.map +1 -1
  77. package/dist/components/EntryEditor/index.d.ts.map +1 -1
  78. package/dist/components/EntryEditor/index.js +1 -1
  79. package/dist/components/EntryEditor/model.d.cts.map +1 -1
  80. package/dist/components/EntryEditor/model.d.ts.map +1 -1
  81. package/dist/components/Icon/style.css +18 -0
  82. package/dist/components/ImageCropper/index.cjs +1 -1
  83. package/dist/components/ImageCropper/index.cjs.map +1 -1
  84. package/dist/components/ImageCropper/index.d.cts +16 -1
  85. package/dist/components/ImageCropper/index.d.cts.map +1 -1
  86. package/dist/components/ImageCropper/index.d.ts +16 -1
  87. package/dist/components/ImageCropper/index.d.ts.map +1 -1
  88. package/dist/components/ImageCropper/index.js +143 -107
  89. package/dist/components/ImageCropper/index.js.map +1 -1
  90. package/dist/components/Pagination/index.cjs +1 -1
  91. package/dist/components/Pagination/index.cjs.map +1 -1
  92. package/dist/components/Pagination/index.js +1 -1
  93. package/dist/components/Pagination/index.js.map +1 -1
  94. package/dist/components/Pagination/style.css +0 -1
  95. package/dist/components/RichTextEditor/index.cjs +1 -1
  96. package/dist/components/RichTextEditor/index.d.cts.map +1 -1
  97. package/dist/components/RichTextEditor/index.d.ts.map +1 -1
  98. package/dist/components/RichTextEditor/index.js +1 -1
  99. package/dist/components/Select/index.cjs +1 -1
  100. package/dist/components/Select/index.cjs.map +1 -1
  101. package/dist/components/Select/index.d.cts.map +1 -1
  102. package/dist/components/Select/index.d.ts.map +1 -1
  103. package/dist/components/Select/index.js +32 -18
  104. package/dist/components/Select/index.js.map +1 -1
  105. package/dist/components/SortableList/index.cjs +1 -1
  106. package/dist/components/SortableList/index.cjs.map +1 -1
  107. package/dist/components/SortableList/index.d.cts.map +1 -1
  108. package/dist/components/SortableList/index.d.ts.map +1 -1
  109. package/dist/components/SortableList/index.js +49 -50
  110. package/dist/components/SortableList/index.js.map +1 -1
  111. package/dist/index.cjs +1 -1
  112. package/dist/index.d.cts +3 -1
  113. package/dist/index.d.cts.map +1 -1
  114. package/dist/index.d.ts +3 -1
  115. package/dist/index.d.ts.map +1 -1
  116. package/dist/index.js +34 -33
  117. package/dist/internal/mergeRefs.d.cts +4 -0
  118. package/dist/internal/mergeRefs.d.cts.map +1 -0
  119. package/dist/internal/mergeRefs.d.ts +4 -0
  120. package/dist/internal/mergeRefs.d.ts.map +1 -0
  121. package/dist/styles.css +1 -0
  122. package/dist/test/dragEvent.d.cts +3 -0
  123. package/dist/test/dragEvent.d.cts.map +1 -0
  124. package/dist/test/dragEvent.d.ts +3 -0
  125. package/dist/test/dragEvent.d.ts.map +1 -0
  126. package/package.json +2 -2
  127. package/dist/chunks/EntryEditor-C32lKKnV.cjs +0 -2
  128. package/dist/chunks/EntryEditor-C32lKKnV.cjs.map +0 -1
  129. package/dist/chunks/EntryEditor-xVuiqtFo.js +0 -181
  130. package/dist/chunks/EntryEditor-xVuiqtFo.js.map +0 -1
  131. package/dist/chunks/RichTextEditor-CSpjsL1z.js.map +0 -1
  132. package/dist/chunks/RichTextEditor-DC_0oN1s.cjs.map +0 -1
  133. package/dist/components/Board/index.cjs.map +0 -1
  134. package/dist/components/Board/index.js.map +0 -1
@@ -1,5 +1,5 @@
1
1
  import { type HTMLAttributes, type ReactNode } from "react";
2
- import type { IconName } from "../Icon/icons.js";
2
+ import { type AssetCardSkeletonProps } from "../AssetCard/index.js";
3
3
  export interface AssetGridProps extends HTMLAttributes<HTMLDivElement> {
4
4
  /**
5
5
  * Renders placeholder tiles instead of children. The grid keeps its
@@ -8,6 +8,8 @@ export interface AssetGridProps extends HTMLAttributes<HTMLDivElement> {
8
8
  isLoading?: boolean;
9
9
  /** How many placeholder tiles to show while loading. */
10
10
  loadingCount?: number;
11
+ /** Slots each placeholder reserves; match the cards that replace them. */
12
+ loadingCard?: Omit<AssetCardSkeletonProps, "index">;
11
13
  children?: ReactNode;
12
14
  }
13
15
  /**
@@ -15,35 +17,8 @@ export interface AssetGridProps extends HTMLAttributes<HTMLDivElement> {
15
17
  * a `TableFrame` when it is the page's collection, bare inside a drawer.
16
18
  */
17
19
  export declare const AssetGrid: import("react").ForwardRefExoticComponent<AssetGridProps & import("react").RefAttributes<HTMLDivElement>>;
18
- export interface AssetTileSkeletonProps {
19
- /** Position in the grid — drives the stagger, nothing else. */
20
- index?: number;
21
- }
22
- /** One loading tile: thumbnail block, name line, meta line. */
23
- export declare function AssetTileSkeleton({ index }: AssetTileSkeletonProps): import("react").JSX.Element;
24
- export interface AssetTileProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect" | "title"> {
25
- /** File name, shown in full — asset names are how people find things again. */
26
- name: string;
27
- /** Thumbnail source. Omit for a non-image asset and pass an `icon` instead. */
28
- src?: string;
29
- /** Glyph shown when there is no thumbnail, or while one fails to load. */
30
- icon?: IconName;
31
- /** Second line: dimensions, size, date — whatever the library sorts by. */
32
- meta?: ReactNode;
33
- /** Paints the soft fill and the solid rail. Never changes the tile's size. */
34
- isSelected?: boolean;
35
- /** The asset is still uploading or processing: dimmed, with a spinner. */
36
- isPending?: boolean;
37
- /** Makes the whole tile a selection target. */
38
- onSelect?: () => void;
39
- /** Badges or a menu, pinned to the top of the thumbnail. */
40
- actions?: ReactNode;
41
- }
42
- /**
43
- * One asset in the library. Selection paints a fill and a rail exactly like a
44
- * table row, so a grid and a list read as the same collection in two shapes.
45
- */
46
- export declare const AssetTile: import("react").ForwardRefExoticComponent<AssetTileProps & import("react").RefAttributes<HTMLDivElement>>;
20
+ export { AssetCard as AssetTile, AssetCardSkeleton as AssetTileSkeleton } from "../AssetCard/index.js";
21
+ export type { AssetCardProps as AssetTileProps, AssetCardSkeletonProps as AssetTileSkeletonProps } from "../AssetCard/index.js";
47
22
  export interface AssetGridEmptyProps {
48
23
  title: string;
49
24
  description?: ReactNode;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AssetGrid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,2GAmBpB,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACrC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,+DAA+D;AAC/D,wBAAgB,iBAAiB,CAAC,EAAE,KAAS,EAAE,EAAE,sBAAsB,+BAWtE;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAClE,+EAA+E;IAC/E,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,2GAyEpB,CAAC;AAEH,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,sEAAsE;AACtE,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BASjF"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AssetGrid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAqB,KAAK,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAC9E,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0EAA0E;IAC1E,WAAW,CAAC,EAAE,IAAI,CAAC,sBAAsB,EAAE,OAAO,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,2GAmBpB,CAAC;AAGH,OAAO,EAAE,SAAS,IAAI,SAAS,EAAE,iBAAiB,IAAI,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAC9F,YAAY,EAAE,cAAc,IAAI,cAAc,EAAE,sBAAsB,IAAI,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAEvH,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,sEAAsE;AACtE,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BASjF"}
@@ -1,127 +1,40 @@
1
1
  import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
2
- import { Button as t } from "../Button/index.js";
3
- import { Grid as n } from "../Grid/index.js";
4
- import { Skeleton as r } from "../Skeleton/index.js";
5
- import { forwardRef as i, useState as a } from "react";
6
- import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
2
+ import { Grid as t } from "../Grid/index.js";
3
+ import { AssetCard as n, AssetCardSkeleton as r } from "../AssetCard/index.js";
4
+ import { forwardRef as i } from "react";
5
+ import { jsx as a, jsxs as o } from "react/jsx-runtime";
7
6
  //#region src/components/AssetGrid/index.tsx
8
- function l(...e) {
7
+ function s(...e) {
9
8
  return e.filter(Boolean).join(" ");
10
9
  }
11
- var u = i(function({ isLoading: e = !1, loadingCount: t = 8, className: r, children: i, ...a }, o) {
12
- return /* @__PURE__ */ s(n, {
13
- ref: o,
10
+ var c = i(function({ isLoading: e = !1, loadingCount: n = 8, loadingCard: i, className: o, children: c, ...l }, u) {
11
+ return /* @__PURE__ */ a(t, {
12
+ ref: u,
14
13
  columns: "auto",
15
14
  gap: "md",
16
15
  minColumnWidth: "var(--asset-tile-min-width)",
17
- className: l("ds-asset-grid", r),
16
+ className: s("ds-asset-grid", o),
18
17
  "aria-busy": e || void 0,
19
- ...a,
20
- children: e ? Array.from({ length: t }, (e, t) => /* @__PURE__ */ s(d, { index: t }, t)) : i
18
+ ...l,
19
+ children: e ? Array.from({ length: n }, (e, t) => /* @__PURE__ */ a(r, {
20
+ ...i,
21
+ index: t
22
+ }, t)) : c
21
23
  });
22
24
  });
23
- function d({ index: e = 0 }) {
24
- let t = { animationDelay: `calc(var(--skeleton-stagger) * ${e})` };
25
- return /* @__PURE__ */ c("div", {
26
- className: "ds-asset-tile",
27
- "data-loading": "true",
28
- "aria-hidden": "true",
29
- children: [/* @__PURE__ */ s(r, {
30
- shape: "block",
31
- className: "ds-asset-tile__thumb",
32
- style: t
33
- }), /* @__PURE__ */ c("div", {
34
- className: "ds-asset-tile__text",
35
- children: [/* @__PURE__ */ s(r, {
36
- shape: "text",
37
- width: "80%",
38
- style: t
39
- }), /* @__PURE__ */ s(r, {
40
- shape: "text",
41
- width: "45%",
42
- style: t
43
- })]
44
- })]
45
- });
46
- }
47
- var f = i(function({ name: n, src: i, icon: u = "image", meta: d, isSelected: f = !1, isPending: p = !1, onSelect: m, actions: h, className: g, ..._ }, v) {
48
- let [y, b] = a(!1), [x, S] = a(!1), C = !!i && !y;
49
- return /* @__PURE__ */ c("div", {
50
- ref: v,
51
- className: l("ds-asset-tile", g),
52
- "data-selected": f || void 0,
53
- "data-pending": p || void 0,
54
- ..._,
55
- children: [/* @__PURE__ */ c("div", {
56
- className: "ds-asset-tile__thumb",
57
- children: [
58
- C ? /* @__PURE__ */ c(o, { children: [!x && /* @__PURE__ */ s(r, {
59
- shape: "block",
60
- className: "ds-asset-tile__thumb-skeleton"
61
- }), /* @__PURE__ */ s("img", {
62
- src: i,
63
- alt: "",
64
- loading: "lazy",
65
- "data-loaded": x || void 0,
66
- onLoad: () => S(!0),
67
- onError: () => b(!0)
68
- })] }) : /* @__PURE__ */ s("span", {
69
- className: "ds-asset-tile__placeholder",
70
- children: /* @__PURE__ */ s(e, {
71
- name: y ? "alert-triangle" : u,
72
- size: 24
73
- })
74
- }),
75
- p && /* @__PURE__ */ c("span", {
76
- className: "ds-asset-tile__pending",
77
- role: "status",
78
- children: [/* @__PURE__ */ s(e, {
79
- name: "spinner",
80
- size: 20,
81
- className: "ds-asset-tile__spinner"
82
- }), /* @__PURE__ */ s("span", {
83
- className: "ds-asset-tile__pending-label",
84
- children: "Uploading"
85
- })]
86
- }),
87
- h && /* @__PURE__ */ s("div", {
88
- className: "ds-asset-tile__actions",
89
- children: h
90
- }),
91
- m && /* @__PURE__ */ s(t, {
92
- variant: "simple",
93
- className: "ds-asset-tile__hit",
94
- "aria-pressed": f,
95
- "aria-label": n,
96
- isDisabled: p,
97
- onClick: m
98
- })
99
- ]
100
- }), /* @__PURE__ */ c("div", {
101
- className: "ds-asset-tile__text",
102
- children: [/* @__PURE__ */ s("span", {
103
- className: "ds-asset-tile__name",
104
- children: n
105
- }), d && /* @__PURE__ */ s("span", {
106
- className: "ds-asset-tile__meta",
107
- children: d
108
- })]
109
- })]
110
- });
111
- });
112
- function p({ title: t, description: n, action: r }) {
113
- return /* @__PURE__ */ c("div", {
25
+ function l({ title: t, description: n, action: r }) {
26
+ return /* @__PURE__ */ o("div", {
114
27
  className: "ds-asset-empty",
115
28
  children: [
116
- /* @__PURE__ */ s(e, {
29
+ /* @__PURE__ */ a(e, {
117
30
  name: "image",
118
31
  size: 24
119
32
  }),
120
- /* @__PURE__ */ s("span", {
33
+ /* @__PURE__ */ a("span", {
121
34
  className: "ds-asset-empty__title",
122
35
  children: t
123
36
  }),
124
- n && /* @__PURE__ */ s("span", {
37
+ n && /* @__PURE__ */ a("span", {
125
38
  className: "ds-asset-empty__description",
126
39
  children: n
127
40
  }),
@@ -130,6 +43,6 @@ function p({ title: t, description: n, action: r }) {
130
43
  });
131
44
  }
132
45
  //#endregion
133
- export { u as AssetGrid, p as AssetGridEmpty, f as AssetTile, d as AssetTileSkeleton };
46
+ export { c as AssetGrid, l as AssetGridEmpty, n as AssetTile, r as AssetTileSkeleton };
134
47
 
135
48
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["_Fragment","Icon","Fragment$1","cx","parts","AssetGrid","forwardRef","rest","Grid","className","isLoading","loadingCount","AssetTileSkeleton","i","children","delay","index","Skeleton","AssetTile","hasFailed","setHasFailed","useState","isLoaded","setIsLoaded","showImage","src","isSelected","isPending","icon","actions","onSelect","Button","name","meta","AssetGridEmpty","title","description","action"],"sources":["../../../src/components/AssetGrid/index.tsx"],"sourcesContent":["import {\n forwardRef,\n useState,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { Grid } from \"../Grid\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport { Skeleton } from \"../Skeleton\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n return parts.filter(Boolean).join(\" \");\n}\n\nexport interface AssetGridProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Renders placeholder tiles instead of children. The grid keeps its\n * geometry, so nothing moves when the real assets arrive.\n */\n isLoading?: boolean;\n /** How many placeholder tiles to show while loading. */\n loadingCount?: number;\n children?: ReactNode;\n}\n\n/**\n * The media library surface: an auto-filling grid of asset tiles. Sits inside\n * a `TableFrame` when it is the page's collection, bare inside a drawer.\n */\nexport const AssetGrid = forwardRef<HTMLDivElement, AssetGridProps>(function AssetGrid(\n { isLoading = false, loadingCount = 8, className, children, ...rest },\n ref,\n) {\n return (\n <Grid\n ref={ref}\n columns=\"auto\"\n gap=\"md\"\n minColumnWidth=\"var(--asset-tile-min-width)\"\n className={cx(\"ds-asset-grid\", className)}\n aria-busy={isLoading || undefined}\n {...rest}\n >\n {isLoading\n ? Array.from({ length: loadingCount }, (_, i) => <AssetTileSkeleton key={i} index={i} />)\n : children}\n </Grid>\n );\n});\n\nexport interface AssetTileSkeletonProps {\n /** Position in the grid — drives the stagger, nothing else. */\n index?: number;\n}\n\n/** One loading tile: thumbnail block, name line, meta line. */\nexport function AssetTileSkeleton({ index = 0 }: AssetTileSkeletonProps) {\n const delay = { animationDelay: `calc(var(--skeleton-stagger) * ${index})` };\n return (\n <div className=\"ds-asset-tile\" data-loading=\"true\" aria-hidden=\"true\">\n <Skeleton shape=\"block\" className=\"ds-asset-tile__thumb\" style={delay} />\n <div className=\"ds-asset-tile__text\">\n <Skeleton shape=\"text\" width=\"80%\" style={delay} />\n <Skeleton shape=\"text\" width=\"45%\" style={delay} />\n </div>\n </div>\n );\n}\n\nexport interface AssetTileProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\" | \"title\"> {\n /** File name, shown in full — asset names are how people find things again. */\n name: string;\n /** Thumbnail source. Omit for a non-image asset and pass an `icon` instead. */\n src?: string;\n /** Glyph shown when there is no thumbnail, or while one fails to load. */\n icon?: IconName;\n /** Second line: dimensions, size, date — whatever the library sorts by. */\n meta?: ReactNode;\n /** Paints the soft fill and the solid rail. Never changes the tile's size. */\n isSelected?: boolean;\n /** The asset is still uploading or processing: dimmed, with a spinner. */\n isPending?: boolean;\n /** Makes the whole tile a selection target. */\n onSelect?: () => void;\n /** Badges or a menu, pinned to the top of the thumbnail. */\n actions?: ReactNode;\n}\n\n/**\n * One asset in the library. Selection paints a fill and a rail exactly like a\n * table row, so a grid and a list read as the same collection in two shapes.\n */\nexport const AssetTile = forwardRef<HTMLDivElement, AssetTileProps>(function AssetTile(\n {\n name,\n src,\n icon = \"image\",\n meta,\n isSelected = false,\n isPending = false,\n onSelect,\n actions,\n className,\n ...rest\n },\n ref,\n) {\n const [hasFailed, setHasFailed] = useState(false);\n const [isLoaded, setIsLoaded] = useState(false);\n const showImage = Boolean(src) && !hasFailed;\n\n return (\n <div\n ref={ref}\n className={cx(\"ds-asset-tile\", className)}\n data-selected={isSelected || undefined}\n data-pending={isPending || undefined}\n {...rest}\n >\n <div className=\"ds-asset-tile__thumb\">\n {showImage ? (\n <>\n {!isLoaded && <Skeleton shape=\"block\" className=\"ds-asset-tile__thumb-skeleton\" />}\n <img\n src={src}\n alt=\"\"\n loading=\"lazy\"\n data-loaded={isLoaded || undefined}\n onLoad={() => setIsLoaded(true)}\n onError={() => setHasFailed(true)}\n />\n </>\n ) : (\n <span className=\"ds-asset-tile__placeholder\">\n <Icon name={hasFailed ? \"alert-triangle\" : icon} size={24} />\n </span>\n )}\n\n {isPending && (\n <span className=\"ds-asset-tile__pending\" role=\"status\">\n <Icon name=\"spinner\" size={20} className=\"ds-asset-tile__spinner\" />\n <span className=\"ds-asset-tile__pending-label\">Uploading</span>\n </span>\n )}\n\n {actions && <div className=\"ds-asset-tile__actions\">{actions}</div>}\n\n {onSelect && (\n <Button\n variant=\"simple\"\n className=\"ds-asset-tile__hit\"\n aria-pressed={isSelected}\n aria-label={name}\n isDisabled={isPending}\n onClick={onSelect}\n />\n )}\n </div>\n\n <div className=\"ds-asset-tile__text\">\n <span className=\"ds-asset-tile__name\">{name}</span>\n {meta && <span className=\"ds-asset-tile__meta\">{meta}</span>}\n </div>\n </div>\n );\n});\n\nexport interface AssetGridEmptyProps {\n title: string;\n description?: ReactNode;\n action?: ReactNode;\n}\n\n/** Nothing in the library yet — one action, the one that fills it. */\nexport function AssetGridEmpty({ title, description, action }: AssetGridEmptyProps) {\n return (\n <div className=\"ds-asset-empty\">\n <Icon name=\"image\" size={24} />\n <span className=\"ds-asset-empty__title\">{title}</span>\n {description && <span className=\"ds-asset-empty__description\">{description}</span>}\n {action}\n </div>\n );\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["Icon","cx","parts","AssetGrid","forwardRef","rest","Grid","className","isLoading","loadingCount","AssetCardSkeleton","loadingCard","i","children","AssetGridEmpty","title","description","action","AssetCard"],"sources":["../../../src/components/AssetGrid/index.tsx"],"sourcesContent":["import {\n forwardRef,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { Grid } from \"../Grid\";\nimport { Icon } from \"../Icon\";\nimport { AssetCardSkeleton, type AssetCardSkeletonProps } from \"../AssetCard\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n return parts.filter(Boolean).join(\" \");\n}\n\nexport interface AssetGridProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Renders placeholder tiles instead of children. The grid keeps its\n * geometry, so nothing moves when the real assets arrive.\n */\n isLoading?: boolean;\n /** How many placeholder tiles to show while loading. */\n loadingCount?: number;\n /** Slots each placeholder reserves; match the cards that replace them. */\n loadingCard?: Omit<AssetCardSkeletonProps, \"index\">;\n children?: ReactNode;\n}\n\n/**\n * The media library surface: an auto-filling grid of asset tiles. Sits inside\n * a `TableFrame` when it is the page's collection, bare inside a drawer.\n */\nexport const AssetGrid = forwardRef<HTMLDivElement, AssetGridProps>(function AssetGrid(\n { isLoading = false, loadingCount = 8, loadingCard, className, children, ...rest },\n ref,\n) {\n return (\n <Grid\n ref={ref}\n columns=\"auto\"\n gap=\"md\"\n minColumnWidth=\"var(--asset-tile-min-width)\"\n className={cx(\"ds-asset-grid\", className)}\n aria-busy={isLoading || undefined}\n {...rest}\n >\n {isLoading\n ? Array.from({ length: loadingCount }, (_, i) => <AssetCardSkeleton key={i} {...loadingCard} index={i} />)\n : children}\n </Grid>\n );\n});\n\n// Existing entry points remain aliases to the shared card implementation.\nexport { AssetCard as AssetTile, AssetCardSkeleton as AssetTileSkeleton } from \"../AssetCard\";\nexport type { AssetCardProps as AssetTileProps, AssetCardSkeletonProps as AssetTileSkeletonProps } from \"../AssetCard\";\n\nexport interface AssetGridEmptyProps {\n title: string;\n description?: ReactNode;\n action?: ReactNode;\n}\n\n/** Nothing in the library yet — one action, the one that fills it. */\nexport function AssetGridEmpty({ title, description, action }: AssetGridEmptyProps) {\n return (\n <div className=\"ds-asset-empty\">\n <Icon name=\"image\" size={24} />\n <span className=\"ds-asset-empty__title\">{title}</span>\n {description && <span className=\"ds-asset-empty__description\">{description}</span>}\n {action}\n </div>\n );\n}\n"],"mappings":";;;;;;AAUA,SAASC,EAAG,GAAGC,GAAuC;CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACvC;AAmBA,IAAaC,IAAYC,EAA2C,SAClE,EAAE,eAAY,IAAO,kBAAe,GAAG,gBAAa,cAAW,aAAU,GAAGC,KAC5E,GACA;CACA,OACE,kBAACC,GAAD;EACO;EACL,SAAQ;EACR,KAAI;EACJ,gBAAe;EACf,WAAWL,EAAG,iBAAiBM,CAAS;EACxC,aAAWC,KAAa,KAAA;EACxB,GAAIH;EAEH,UAAAG,IACG,MAAM,KAAK,EAAE,QAAQC,EAAa,IAAI,GAAG,MAAM,kBAACC,GAAD;GAA2B,GAAIC;GAAa,OAAOC;EAAI,GAA/BA,CAA+B,CAAC,IACvGC;CACA,CAAA;AAEV,CAAC;AAaD,SAAgBC,EAAe,EAAE,UAAO,gBAAa,aAA+B;CAClF,OACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACE,kBAACd,GAAD;IAAM,MAAK;IAAQ,MAAM;GAAK,CAAA;GAC9B,kBAAC,QAAD;IAAM,WAAU;IAAyB,UAAAe;GAAY,CAAA;GACpDC,KAAe,kBAAC,QAAD;IAAM,WAAU;IAA+B,UAAAA;GAAkB,CAAA;GAChFC;EACE;;AAET"}
@@ -4,156 +4,6 @@
4
4
  padding: var(--space-4);
5
5
  }
6
6
 
7
- .ds-asset-tile {
8
- position: relative;
9
- display: flex;
10
- flex-direction: column;
11
- gap: var(--space-3);
12
- padding: var(--space-3);
13
- background: var(--color-surface);
14
- border: var(--control-border-width) solid var(--control-border-color);
15
- border-radius: var(--radius-md);
16
- /* The rail exists on every tile, so selecting one never shifts the grid. */
17
- box-shadow: inset var(--rail-width) 0 0 0 transparent;
18
- transition:
19
- background-color var(--duration-fast) var(--ease-standard),
20
- box-shadow var(--duration-fast) var(--ease-standard);
21
- }
22
-
23
- .ds-asset-tile:hover:not([data-pending]) {
24
- background: var(--field-hover);
25
- }
26
-
27
- .ds-asset-tile[data-selected] {
28
- background: var(--color-primary-soft);
29
- box-shadow: inset var(--rail-width) 0 0 0 var(--rail-color);
30
- }
31
-
32
- .ds-asset-tile[data-pending] {
33
- opacity: 70%;
34
- }
35
-
36
- .ds-asset-tile[data-loading="true"] {
37
- background: var(--color-surface);
38
- }
39
-
40
- .ds-asset-tile__thumb {
41
- position: relative;
42
- aspect-ratio: var(--asset-thumb-aspect);
43
- overflow: hidden;
44
- border-radius: var(--field-radius);
45
- background: var(--field-rest);
46
- display: grid;
47
- place-content: center;
48
- }
49
-
50
- .ds-asset-tile__thumb img {
51
- position: absolute;
52
- inset: 0;
53
- inline-size: 100%;
54
- block-size: 100%;
55
- object-fit: cover;
56
- opacity: 0;
57
- transition: opacity var(--duration-base) var(--ease-standard);
58
- }
59
-
60
- .ds-asset-tile__thumb img[data-loaded] {
61
- opacity: 100%;
62
- }
63
-
64
- .ds-asset-tile__thumb-skeleton {
65
- position: absolute;
66
- inset: 0;
67
- block-size: 100%;
68
- border-radius: 0;
69
- }
70
-
71
- .ds-asset-tile__placeholder {
72
- display: grid;
73
- place-content: center;
74
- color: var(--color-text-muted);
75
- }
76
-
77
- .ds-asset-tile__pending {
78
- position: absolute;
79
- inset: 0;
80
- display: flex;
81
- flex-direction: column;
82
- align-items: center;
83
- justify-content: center;
84
- gap: var(--space-2);
85
- background: color-mix(in srgb, var(--color-surface) 72%, transparent);
86
- color: var(--color-text-muted);
87
- font-size: var(--font-size-xs);
88
- font-weight: var(--font-weight-bold);
89
- }
90
-
91
- .ds-asset-tile__spinner {
92
- animation: ds-asset-spin 900ms linear infinite;
93
- }
94
-
95
- @keyframes ds-asset-spin {
96
- to {
97
- transform: rotate(360deg);
98
- }
99
- }
100
-
101
- .ds-asset-tile__actions {
102
- position: absolute;
103
- inset-block-start: var(--space-2);
104
- inset-inline: var(--space-2);
105
- z-index: 1;
106
- display: flex;
107
- justify-content: space-between;
108
- gap: var(--space-2);
109
- pointer-events: none;
110
- }
111
-
112
- .ds-asset-tile__actions > * {
113
- pointer-events: auto;
114
- }
115
-
116
- /* The whole thumbnail is the selection target; the name stays readable text
117
- * underneath rather than being swallowed by the button. */
118
- .ds-asset-tile .ds-asset-tile__hit.ds-button {
119
- position: absolute;
120
- inset: 0;
121
- inline-size: 100%;
122
- height: 100%;
123
- padding: 0;
124
- }
125
-
126
- .ds-asset-tile__hit.ds-button:focus-visible {
127
- outline-offset: -2px;
128
- }
129
-
130
- /* Selection reads on the tile, so Button's hover and pressed fills never
131
- * paint over the thumbnail. */
132
- .ds-asset-tile .ds-asset-tile__hit.ds-button:is(:hover, :active):not(:disabled) {
133
- background: transparent;
134
- }
135
-
136
- .ds-asset-tile__text {
137
- display: flex;
138
- flex-direction: column;
139
- gap: var(--space-1);
140
- min-inline-size: 0;
141
- }
142
-
143
- .ds-asset-tile__name {
144
- font-size: var(--font-size-sm);
145
- font-weight: var(--font-weight-bold);
146
- line-height: var(--line-height-body);
147
- overflow-wrap: anywhere;
148
- }
149
-
150
- .ds-asset-tile__meta {
151
- font-family: var(--font-mono);
152
- font-size: var(--font-size-xs);
153
- line-height: var(--line-height-body);
154
- color: var(--color-text-muted);
155
- }
156
-
157
7
  .ds-asset-empty {
158
8
  display: flex;
159
9
  flex-direction: column;
@@ -174,15 +24,4 @@
174
24
  max-inline-size: 34rem;
175
25
  line-height: var(--line-height-body);
176
26
  }
177
-
178
- @media (prefers-reduced-motion: reduce) {
179
- .ds-asset-tile,
180
- .ds-asset-tile__thumb img {
181
- transition: none;
182
- }
183
-
184
- .ds-asset-tile__spinner {
185
- animation: none;
186
- }
187
- }
188
27
  }
@@ -1,2 +1 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("@dnd-kit/core"),a=require("@dnd-kit/sortable"),o=require("@dnd-kit/utilities");var s=(e,t)=>{let{currentCoordinates:n,context:r}=t;if(e.code===`ArrowLeft`||e.code===`ArrowRight`){let t=r.droppableContainers.getEnabled().filter(e=>e.data.current?.type===`column-body`).sort((e,t)=>(e.rect.current?.left??0)-(t.rect.current?.left??0)),i=r.active?.rect.current.translated;if(!i)return;let a=t[t.findIndex(e=>(e.rect.current?.left??0)<=i.left+1&&(e.rect.current?.right??0)>=i.left-1)+(e.code===`ArrowRight`?1:-1)]?.rect.current;return a?(e.preventDefault(),{x:a.left+a.width/2-i.width/2,y:n.y}):void 0}return(0,a.sortableKeyboardCoordinates)(e,t)},c=e=>{let t=e.active.data.current?.type===`column`,n=e.droppableContainers.filter(e=>{let n=e.data.current?.type;return t?n===`column`:n!==`column`}),r={...e,droppableContainers:n};if(t)return(0,i.closestCorners)(r);let a=(0,i.pointerWithin)(r);if(a.length>0){let e=e=>n.find(t=>t.id===e)?.data.current?.type===`card`?0:1;return[...a].sort((t,n)=>e(t.id)-e(n.id))}return(0,i.closestCorners)(r)},l=(0,n.createContext)({activeId:null,activeType:null,overColumnId:null}),u=(0,n.forwardRef)(function({columnIds:t,onMove:o,onColumnMove:u,renderDragOverlay:d,renderColumnDragOverlay:f,className:p,children:m,...h},g){let _=(0,n.useId)(),[v,y]=(0,n.useState)(null),[b,x]=(0,n.useState)(null),[S,C]=(0,n.useState)(null),w=(0,i.useSensors)((0,i.useSensor)(i.PointerSensor,{activationConstraint:{distance:4}}),(0,i.useSensor)(i.KeyboardSensor,{coordinateGetter:s})),T=(0,n.useCallback)(e=>{y(String(e.active.id)),x(e.active.data.current?.type===`column`?`column`:`card`)},[]),E=(0,n.useCallback)(e=>{let t=e.over;if(!t){C(null);return}let n=t.data.current??{},r=n.type===`column`?String(t.id):String(n.columnId??``);C(r||null)},[]),D=(0,n.useCallback)(()=>{y(null),x(null),C(null)},[]),O=(0,n.useCallback)(e=>{let{active:n,over:r}=e;if(D(),!r)return;let i=n.data.current??{},a=r.data.current??{};if(i.type===`column`){let e=t??[],i=a.type===`column`?String(r.id):String(a.columnId??``),o=e.indexOf(i);if(o<0||i===String(n.id))return;u?.({columnId:String(n.id),toIndex:o});return}let s=String(i.columnId??``),c=``,l=0;a.type===`card`?(c=String(a.columnId??``),l=a.sortable?.index??0):(c=String(a.columnId??r.id),l=(a.items??[]).length),c&&(s!==c||String(n.id)!==String(r.id))&&o?.({cardId:String(n.id),fromColumnId:s,toColumnId:c,toIndex:l})},[t,u,o,D]),k=(0,n.useMemo)(()=>({activeId:v,activeType:b,overColumnId:S}),[v,b,S]),A=(0,r.jsx)(`div`,{ref:g,className:[`ds-board`,p].filter(Boolean).join(` `),...h,children:m});return(0,r.jsx)(l.Provider,{value:k,children:(0,r.jsxs)(i.DndContext,{id:`ds-board-${_}`,sensors:w,collisionDetection:c,measuring:{droppable:{strategy:i.MeasuringStrategy.Always}},onDragStart:T,onDragOver:E,onDragEnd:O,onDragCancel:D,children:[t?(0,r.jsx)(a.SortableContext,{items:t,strategy:a.horizontalListSortingStrategy,children:A}):A,(0,r.jsxs)(i.DragOverlay,{children:[v&&b===`card`?(0,r.jsxs)(`div`,{className:`ds-board-card`,"data-overlay":!0,children:[(0,r.jsx)(`span`,{className:`ds-board-card__handle`,"aria-hidden":`true`,children:(0,r.jsx)(e.t,{name:`grip-vertical`})}),(0,r.jsx)(`div`,{className:`ds-board-card__content`,children:d?.(v)})]}):null,v&&b===`column`?(0,r.jsx)(`div`,{className:`ds-board-column`,"data-overlay":!0,children:f?.(v)}):null]})]})})}),d=(0,n.forwardRef)(function({id:e,title:s,itemIds:c,count:u,action:d,isDraggable:f=!0,className:p,children:m,...h},g){let{activeType:_,overColumnId:v}=(0,n.useContext)(l),{setNodeRef:y}=(0,i.useDroppable)({id:`${e}::body`,data:{type:`column-body`,columnId:e,items:c}}),{attributes:b,listeners:x,setNodeRef:S,transform:C,transition:w,isDragging:T}=(0,a.useSortable)({id:e,disabled:!f,data:{type:`column`,columnId:e,items:c}});return(0,r.jsxs)(`section`,{ref:e=>{S(e),typeof g==`function`?g(e):g&&(g.current=e)},style:{transform:o.CSS.Translate.toString(C),transition:w},className:[`ds-board-column`,p].filter(Boolean).join(` `),"data-over":_===`card`&&v===e||void 0,"data-dragging":T||void 0,"aria-label":s,...h,children:[f&&(0,r.jsx)(t.Button,{variant:`simple`,size:`sm`,iconStart:`grip-horizontal`,className:`ds-board-column__grip`,"aria-label":`Reorder ${s}`,...b,...x}),(0,r.jsxs)(`header`,{className:`ds-board-column__head`,children:[(0,r.jsx)(`span`,{className:`ds-board-column__title`,children:s}),(0,r.jsx)(`span`,{className:`ds-board-column__count`,children:u??c.length}),d&&(0,r.jsx)(`span`,{className:`ds-board-column__action`,children:d})]}),(0,r.jsx)(`div`,{ref:y,className:`ds-board-column__body`,children:(0,r.jsx)(a.SortableContext,{items:c,strategy:a.verticalListSortingStrategy,children:m})})]})}),f=(0,n.forwardRef)(function({id:e,columnId:i,label:s,className:c,children:u,...d},f){let{attributes:p,listeners:m,setNodeRef:h,transform:g,transition:_,isDragging:v}=(0,a.useSortable)({id:e,data:{type:`card`,columnId:i}}),{activeId:y}=(0,n.useContext)(l);return(0,r.jsxs)(`div`,{ref:e=>{h(e),typeof f==`function`?f(e):f&&(f.current=e)},style:{transform:o.CSS.Translate.toString(g),transition:_},className:[`ds-board-card`,c].filter(Boolean).join(` `),"data-dragging":v||void 0,"data-idle":y&&y!==e?``:void 0,...d,children:[(0,r.jsx)(t.Button,{variant:`simple`,size:`sm`,isIconOnly:!0,iconStart:`grip-vertical`,className:`ds-board-card__handle`,"aria-label":s?`Move ${s}`:`Move card`,...p,...m}),(0,r.jsx)(`div`,{className:`ds-board-card__content`,children:u})]})});exports.Board=u,exports.BoardCard=f,exports.BoardColumn=d;
2
- //# sourceMappingURL=index.cjs.map
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Board-BLhB5_xx.cjs");exports.Board=e.t,exports.BoardCard=e.n,exports.BoardColumn=e.r;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Board/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AA6Bf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB;AAkED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IACnF,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,wDAAwD;IACxD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,qEAAqE;IACrE,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAC;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,uGA2IhB,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,0GA8DvB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,2GAkCpB,CAAC"}
1
+ {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/Board/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AA8Bf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB;AAwCD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IACnF,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,wDAAwD;IACxD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,qEAAqE;IACrE,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAC;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,uGAoHhB,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,0GA0DvB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,2GA8BpB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Board/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AA6Bf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB;AAkED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IACnF,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,wDAAwD;IACxD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,qEAAqE;IACrE,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAC;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,uGA2IhB,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,0GA8DvB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,2GAkCpB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Board/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AA8Bf,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;CACjB;AAwCD,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,WAAW,CAAC;IACnF,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACnC,wDAAwD;IACxD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,mEAAmE;IACnE,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,SAAS,CAAC;IAClD,qEAAqE;IACrE,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,SAAS,CAAC;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,uGAoHhB,CAAC;AAEH,MAAM,WAAW,gBAAiB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,0GA0DvB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,4DAA4D;IAC5D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,2GA8BpB,CAAC"}