@namroodinc/liquid-editorial 0.1.5 → 0.1.7

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 (168) hide show
  1. package/AGENTS.md +2 -0
  2. package/README.md +149 -4
  3. package/UPGRADING.md +127 -4
  4. package/dist/components/AppShell/index.cjs +2 -0
  5. package/dist/components/AppShell/index.cjs.map +1 -0
  6. package/dist/components/AppShell/index.d.cts +15 -0
  7. package/dist/components/AppShell/index.d.cts.map +1 -0
  8. package/dist/components/AppShell/index.d.ts +15 -0
  9. package/dist/components/AppShell/index.d.ts.map +1 -0
  10. package/dist/components/AppShell/index.js +93 -0
  11. package/dist/components/AppShell/index.js.map +1 -0
  12. package/dist/components/AppShell/style.css +79 -0
  13. package/dist/components/AssetGrid/index.cjs +1 -1
  14. package/dist/components/AssetGrid/index.cjs.map +1 -1
  15. package/dist/components/AssetGrid/index.d.cts.map +1 -1
  16. package/dist/components/AssetGrid/index.d.ts.map +1 -1
  17. package/dist/components/AssetGrid/index.js +57 -59
  18. package/dist/components/AssetGrid/index.js.map +1 -1
  19. package/dist/components/AssetGrid/style.css +8 -16
  20. package/dist/components/Board/index.cjs +1 -1
  21. package/dist/components/Board/index.cjs.map +1 -1
  22. package/dist/components/Board/index.d.cts.map +1 -1
  23. package/dist/components/Board/index.d.ts.map +1 -1
  24. package/dist/components/Board/index.js +88 -84
  25. package/dist/components/Board/index.js.map +1 -1
  26. package/dist/components/Board/style.css +17 -28
  27. package/dist/components/Button/index.cjs +1 -1
  28. package/dist/components/Button/index.cjs.map +1 -1
  29. package/dist/components/Button/index.d.cts +3 -2
  30. package/dist/components/Button/index.d.cts.map +1 -1
  31. package/dist/components/Button/index.d.ts +3 -2
  32. package/dist/components/Button/index.d.ts.map +1 -1
  33. package/dist/components/Button/index.js +1 -1
  34. package/dist/components/Button/index.js.map +1 -1
  35. package/dist/components/Button/style.css +21 -15
  36. package/dist/components/DatePicker/index.cjs +1 -1
  37. package/dist/components/DatePicker/index.cjs.map +1 -1
  38. package/dist/components/DatePicker/index.d.cts.map +1 -1
  39. package/dist/components/DatePicker/index.d.ts.map +1 -1
  40. package/dist/components/DatePicker/index.js +46 -45
  41. package/dist/components/DatePicker/index.js.map +1 -1
  42. package/dist/components/DatePicker/style.css +4 -61
  43. package/dist/components/Drawer/index.cjs +1 -1
  44. package/dist/components/Drawer/index.cjs.map +1 -1
  45. package/dist/components/Drawer/index.d.cts +10 -1
  46. package/dist/components/Drawer/index.d.cts.map +1 -1
  47. package/dist/components/Drawer/index.d.ts +10 -1
  48. package/dist/components/Drawer/index.d.ts.map +1 -1
  49. package/dist/components/Drawer/index.js +69 -47
  50. package/dist/components/Drawer/index.js.map +1 -1
  51. package/dist/components/Drawer/style.css +106 -0
  52. package/dist/components/EntryPicker/index.cjs +1 -1
  53. package/dist/components/EntryPicker/index.cjs.map +1 -1
  54. package/dist/components/EntryPicker/index.d.cts.map +1 -1
  55. package/dist/components/EntryPicker/index.d.ts.map +1 -1
  56. package/dist/components/EntryPicker/index.js +12 -11
  57. package/dist/components/EntryPicker/index.js.map +1 -1
  58. package/dist/components/EntryPicker/style.css +3 -30
  59. package/dist/components/Field/style.css +11 -3
  60. package/dist/components/ImageCropper/index.cjs +1 -1
  61. package/dist/components/ImageCropper/index.cjs.map +1 -1
  62. package/dist/components/ImageCropper/index.d.cts +3 -17
  63. package/dist/components/ImageCropper/index.d.cts.map +1 -1
  64. package/dist/components/ImageCropper/index.d.ts +3 -17
  65. package/dist/components/ImageCropper/index.d.ts.map +1 -1
  66. package/dist/components/ImageCropper/index.js +143 -180
  67. package/dist/components/ImageCropper/index.js.map +1 -1
  68. package/dist/components/ImageCropper/style.css +2 -94
  69. package/dist/components/Menu/index.cjs +1 -1
  70. package/dist/components/Menu/index.cjs.map +1 -1
  71. package/dist/components/Menu/index.d.cts.map +1 -1
  72. package/dist/components/Menu/index.d.ts.map +1 -1
  73. package/dist/components/Menu/index.js +11 -16
  74. package/dist/components/Menu/index.js.map +1 -1
  75. package/dist/components/Menu/style.css +7 -41
  76. package/dist/components/Modal/index.cjs +1 -1
  77. package/dist/components/Modal/index.cjs.map +1 -1
  78. package/dist/components/Modal/index.d.cts.map +1 -1
  79. package/dist/components/Modal/index.d.ts.map +1 -1
  80. package/dist/components/Modal/index.js +12 -12
  81. package/dist/components/Modal/index.js.map +1 -1
  82. package/dist/components/NumberField/index.cjs +1 -1
  83. package/dist/components/NumberField/index.cjs.map +1 -1
  84. package/dist/components/NumberField/index.js +13 -17
  85. package/dist/components/NumberField/index.js.map +1 -1
  86. package/dist/components/NumberField/style.css +1 -41
  87. package/dist/components/Pagination/index.cjs +2 -0
  88. package/dist/components/Pagination/index.cjs.map +1 -0
  89. package/dist/components/Pagination/index.d.cts +24 -0
  90. package/dist/components/Pagination/index.d.cts.map +1 -0
  91. package/dist/components/Pagination/index.d.ts +24 -0
  92. package/dist/components/Pagination/index.d.ts.map +1 -0
  93. package/dist/components/Pagination/index.js +96 -0
  94. package/dist/components/Pagination/index.js.map +1 -0
  95. package/dist/components/Pagination/style.css +52 -0
  96. package/dist/components/Popover/index.cjs +1 -1
  97. package/dist/components/Popover/index.cjs.map +1 -1
  98. package/dist/components/Popover/index.d.cts +5 -1
  99. package/dist/components/Popover/index.d.cts.map +1 -1
  100. package/dist/components/Popover/index.d.ts +5 -1
  101. package/dist/components/Popover/index.d.ts.map +1 -1
  102. package/dist/components/Popover/index.js +27 -26
  103. package/dist/components/Popover/index.js.map +1 -1
  104. package/dist/components/SearchField/index.cjs +1 -1
  105. package/dist/components/SearchField/index.cjs.map +1 -1
  106. package/dist/components/SearchField/index.d.cts.map +1 -1
  107. package/dist/components/SearchField/index.d.ts.map +1 -1
  108. package/dist/components/SearchField/index.js +26 -27
  109. package/dist/components/SearchField/index.js.map +1 -1
  110. package/dist/components/SearchField/style.css +0 -21
  111. package/dist/components/Select/index.cjs +1 -1
  112. package/dist/components/Select/index.cjs.map +1 -1
  113. package/dist/components/Select/index.d.cts +3 -0
  114. package/dist/components/Select/index.d.cts.map +1 -1
  115. package/dist/components/Select/index.d.ts +3 -0
  116. package/dist/components/Select/index.d.ts.map +1 -1
  117. package/dist/components/Select/index.js +82 -73
  118. package/dist/components/Select/index.js.map +1 -1
  119. package/dist/components/Select/style.css +5 -38
  120. package/dist/components/SideNav/index.cjs +1 -1
  121. package/dist/components/SideNav/index.cjs.map +1 -1
  122. package/dist/components/SideNav/index.d.cts.map +1 -1
  123. package/dist/components/SideNav/index.d.ts.map +1 -1
  124. package/dist/components/SideNav/index.js +52 -49
  125. package/dist/components/SideNav/index.js.map +1 -1
  126. package/dist/components/SideNav/style.css +2 -27
  127. package/dist/components/Slider/style.css +14 -5
  128. package/dist/components/SortableList/index.cjs +1 -1
  129. package/dist/components/SortableList/index.cjs.map +1 -1
  130. package/dist/components/SortableList/index.d.cts.map +1 -1
  131. package/dist/components/SortableList/index.d.ts.map +1 -1
  132. package/dist/components/SortableList/index.js +42 -39
  133. package/dist/components/SortableList/index.js.map +1 -1
  134. package/dist/components/SortableList/style.css +9 -15
  135. package/dist/components/Stepper/index.cjs +1 -1
  136. package/dist/components/Stepper/index.cjs.map +1 -1
  137. package/dist/components/Stepper/index.d.cts.map +1 -1
  138. package/dist/components/Stepper/index.d.ts.map +1 -1
  139. package/dist/components/Stepper/index.js +48 -39
  140. package/dist/components/Stepper/index.js.map +1 -1
  141. package/dist/components/Stepper/style.css +24 -18
  142. package/dist/components/SubNav/index.cjs +1 -1
  143. package/dist/components/SubNav/index.cjs.map +1 -1
  144. package/dist/components/SubNav/index.d.cts.map +1 -1
  145. package/dist/components/SubNav/index.d.ts.map +1 -1
  146. package/dist/components/SubNav/index.js +27 -28
  147. package/dist/components/SubNav/index.js.map +1 -1
  148. package/dist/components/SubNav/style.css +13 -0
  149. package/dist/components/Switch/index.cjs +1 -1
  150. package/dist/components/Switch/index.cjs.map +1 -1
  151. package/dist/components/Switch/index.d.cts.map +1 -1
  152. package/dist/components/Switch/index.d.ts.map +1 -1
  153. package/dist/components/Switch/index.js +23 -21
  154. package/dist/components/Switch/index.js.map +1 -1
  155. package/dist/components/Switch/style.css +2 -28
  156. package/dist/components/TagsInput/index.cjs +1 -1
  157. package/dist/components/TagsInput/index.cjs.map +1 -1
  158. package/dist/components/TagsInput/index.js +8 -10
  159. package/dist/components/TagsInput/index.js.map +1 -1
  160. package/dist/components/TagsInput/style.css +2 -24
  161. package/dist/index.cjs +1 -1
  162. package/dist/index.d.cts +7 -3
  163. package/dist/index.d.cts.map +1 -1
  164. package/dist/index.d.ts +7 -3
  165. package/dist/index.d.ts.map +1 -1
  166. package/dist/index.js +36 -34
  167. package/dist/styles.css +2 -0
  168. package/package.json +1 -1
@@ -0,0 +1,79 @@
1
+ @layer components {
2
+ .ds-appshell {
3
+ position: relative;
4
+ container: ds-appshell / inline-size;
5
+ block-size: 100dvh;
6
+ inline-size: 100%;
7
+ overflow: hidden;
8
+ background: var(--color-canvas);
9
+ color: var(--color-text);
10
+ font-family: var(--font-sans);
11
+ }
12
+
13
+ .ds-appshell__frame {
14
+ display: flex;
15
+ flex-direction: column;
16
+ block-size: 100%;
17
+ min-block-size: 0;
18
+ }
19
+
20
+ .ds-appshell .ds-topnav {
21
+ box-sizing: border-box;
22
+ position: sticky;
23
+ inset-block-start: 0;
24
+ z-index: 10;
25
+ flex: none;
26
+ gap: var(--space-3);
27
+ }
28
+
29
+ .ds-appshell__body {
30
+ display: flex;
31
+ flex: 1;
32
+ min-block-size: 0;
33
+ }
34
+
35
+ .ds-appshell__desktop-nav {
36
+ box-sizing: border-box;
37
+ min-block-size: 0;
38
+ overflow-y: auto;
39
+ }
40
+
41
+ .ds-appshell__main {
42
+ flex: 1;
43
+ min-inline-size: 0;
44
+ overflow-y: auto;
45
+ padding: var(--space-8);
46
+ }
47
+
48
+ .ds-appshell__actions {
49
+ display: flex;
50
+ align-items: center;
51
+ gap: var(--space-3);
52
+ }
53
+
54
+ .ds-appshell__toggle.ds-button {
55
+ display: none;
56
+ flex: none;
57
+ margin-inline-start: auto;
58
+ margin-inline-end: calc(-1 * var(--space-2));
59
+ }
60
+
61
+ .ds-appshell__mobile-nav {
62
+ inline-size: 100%;
63
+ min-block-size: 0;
64
+ border: 0;
65
+ overflow-y: auto;
66
+ }
67
+
68
+ .ds-appshell__mobile-nav .ds-sidenav__item {
69
+ min-block-size: calc(var(--space-10) + var(--space-1));
70
+ font-size: var(--field-font-size-md);
71
+ }
72
+
73
+ @container ds-appshell (width < 768px) {
74
+ .ds-appshell .ds-topnav { padding-inline: var(--space-4); }
75
+ .ds-appshell__desktop-nav, .ds-appshell__actions { display: none; }
76
+ .ds-appshell__toggle.ds-button { display: flex; }
77
+ .ds-appshell__main { padding: var(--space-6) var(--space-4); }
78
+ }
79
+ }
@@ -1,2 +1,2 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Grid/index.cjs"),n=require("../Skeleton/index.cjs");let r=require("react"),i=require("react/jsx-runtime");function a(...e){return e.filter(Boolean).join(` `)}var o=(0,r.forwardRef)(function({isLoading:e=!1,loadingCount:n=8,className:r,children:o,...c},l){return(0,i.jsx)(t.Grid,{ref:l,columns:`auto`,gap:`md`,minColumnWidth:`var(--asset-tile-min-width)`,className:a(`ds-asset-grid`,r),"aria-busy":e||void 0,...c,children:e?Array.from({length:n},(e,t)=>(0,i.jsx)(s,{index:t},t)):o})});function s({index:e=0}){let t={animationDelay:`calc(var(--skeleton-stagger) * ${e})`};return(0,i.jsxs)(`div`,{className:`ds-asset-tile`,"data-loading":`true`,"aria-hidden":`true`,children:[(0,i.jsx)(n.Skeleton,{shape:`block`,className:`ds-asset-tile__thumb`,style:t}),(0,i.jsxs)(`div`,{className:`ds-asset-tile__text`,children:[(0,i.jsx)(n.Skeleton,{shape:`text`,width:`80%`,style:t}),(0,i.jsx)(n.Skeleton,{shape:`text`,width:`45%`,style:t})]})]})}var c=(0,r.forwardRef)(function({name:t,src:o,icon:s=`image`,meta:c,isSelected:l=!1,isPending:u=!1,onSelect:d,actions:f,className:p,...m},h){let[g,_]=(0,r.useState)(!1),[v,y]=(0,r.useState)(!1),b=!!o&&!g;return(0,i.jsxs)(`div`,{ref:h,className:a(`ds-asset-tile`,p),"data-selected":l||void 0,"data-pending":u||void 0,...m,children:[(0,i.jsxs)(`div`,{className:`ds-asset-tile__thumb`,children:[b?(0,i.jsxs)(i.Fragment,{children:[!v&&(0,i.jsx)(n.Skeleton,{shape:`block`,className:`ds-asset-tile__thumb-skeleton`}),(0,i.jsx)(`img`,{src:o,alt:``,loading:`lazy`,"data-loaded":v||void 0,onLoad:()=>y(!0),onError:()=>_(!0)})]}):(0,i.jsx)(`span`,{className:`ds-asset-tile__placeholder`,children:(0,i.jsx)(e.t,{name:g?`alert-triangle`:s,size:24})}),u&&(0,i.jsxs)(`span`,{className:`ds-asset-tile__pending`,role:`status`,children:[(0,i.jsx)(e.t,{name:`spinner`,size:20,className:`ds-asset-tile__spinner`}),(0,i.jsx)(`span`,{className:`ds-asset-tile__pending-label`,children:`Uploading`})]}),f&&(0,i.jsx)(`div`,{className:`ds-asset-tile__actions`,children:f}),d&&(0,i.jsx)(`button`,{type:`button`,className:`ds-asset-tile__hit`,"aria-pressed":l,disabled:u,onClick:d,children:(0,i.jsx)(`span`,{className:`ds-asset-tile__hit-label`,children:t})})]}),(0,i.jsxs)(`div`,{className:`ds-asset-tile__text`,children:[(0,i.jsx)(`span`,{className:`ds-asset-tile__name`,children:t}),c&&(0,i.jsx)(`span`,{className:`ds-asset-tile__meta`,children:c})]})]})});function l({title:t,description:n,action:r}){return(0,i.jsxs)(`div`,{className:`ds-asset-empty`,children:[(0,i.jsx)(e.t,{name:`image`,size:24}),(0,i.jsx)(`span`,{className:`ds-asset-empty__title`,children:t}),n&&(0,i.jsx)(`span`,{className:`ds-asset-empty__description`,children:n}),r]})}exports.AssetGrid=o,exports.AssetGridEmpty=l,exports.AssetTile=c,exports.AssetTileSkeleton=s;
1
+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs"),t=require("../Button/index.cjs"),n=require("../Grid/index.cjs"),r=require("../Skeleton/index.cjs");let i=require("react"),a=require("react/jsx-runtime");function o(...e){return e.filter(Boolean).join(` `)}var s=(0,i.forwardRef)(function({isLoading:e=!1,loadingCount:t=8,className:r,children:i,...s},l){return(0,a.jsx)(n.Grid,{ref:l,columns:`auto`,gap:`md`,minColumnWidth:`var(--asset-tile-min-width)`,className:o(`ds-asset-grid`,r),"aria-busy":e||void 0,...s,children:e?Array.from({length:t},(e,t)=>(0,a.jsx)(c,{index:t},t)):i})});function c({index:e=0}){let t={animationDelay:`calc(var(--skeleton-stagger) * ${e})`};return(0,a.jsxs)(`div`,{className:`ds-asset-tile`,"data-loading":`true`,"aria-hidden":`true`,children:[(0,a.jsx)(r.Skeleton,{shape:`block`,className:`ds-asset-tile__thumb`,style:t}),(0,a.jsxs)(`div`,{className:`ds-asset-tile__text`,children:[(0,a.jsx)(r.Skeleton,{shape:`text`,width:`80%`,style:t}),(0,a.jsx)(r.Skeleton,{shape:`text`,width:`45%`,style:t})]})]})}var l=(0,i.forwardRef)(function({name:n,src:s,icon:c=`image`,meta:l,isSelected:u=!1,isPending:d=!1,onSelect:f,actions:p,className:m,...h},g){let[_,v]=(0,i.useState)(!1),[y,b]=(0,i.useState)(!1),x=!!s&&!_;return(0,a.jsxs)(`div`,{ref:g,className:o(`ds-asset-tile`,m),"data-selected":u||void 0,"data-pending":d||void 0,...h,children:[(0,a.jsxs)(`div`,{className:`ds-asset-tile__thumb`,children:[x?(0,a.jsxs)(a.Fragment,{children:[!y&&(0,a.jsx)(r.Skeleton,{shape:`block`,className:`ds-asset-tile__thumb-skeleton`}),(0,a.jsx)(`img`,{src:s,alt:``,loading:`lazy`,"data-loaded":y||void 0,onLoad:()=>b(!0),onError:()=>v(!0)})]}):(0,a.jsx)(`span`,{className:`ds-asset-tile__placeholder`,children:(0,a.jsx)(e.t,{name:_?`alert-triangle`:c,size:24})}),d&&(0,a.jsxs)(`span`,{className:`ds-asset-tile__pending`,role:`status`,children:[(0,a.jsx)(e.t,{name:`spinner`,size:20,className:`ds-asset-tile__spinner`}),(0,a.jsx)(`span`,{className:`ds-asset-tile__pending-label`,children:`Uploading`})]}),p&&(0,a.jsx)(`div`,{className:`ds-asset-tile__actions`,children:p}),f&&(0,a.jsx)(t.Button,{variant:`simple`,className:`ds-asset-tile__hit`,"aria-pressed":u,"aria-label":n,isDisabled:d,onClick:f})]}),(0,a.jsxs)(`div`,{className:`ds-asset-tile__text`,children:[(0,a.jsx)(`span`,{className:`ds-asset-tile__name`,children:n}),l&&(0,a.jsx)(`span`,{className:`ds-asset-tile__meta`,children:l})]})]})});function u({title:t,description:n,action:r}){return(0,a.jsxs)(`div`,{className:`ds-asset-empty`,children:[(0,a.jsx)(e.t,{name:`image`,size:24}),(0,a.jsx)(`span`,{className:`ds-asset-empty__title`,children:t}),n&&(0,a.jsx)(`span`,{className:`ds-asset-empty__description`,children:n}),r]})}exports.AssetGrid=s,exports.AssetGridEmpty=u,exports.AssetTile=l,exports.AssetTileSkeleton=c;
2
2
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","names":["forwardRef","Grid","Skeleton","useState","_Fragment","Icon","require_Icon","require_components_Grid_index","require_components_Skeleton_index","react","react_jsx_runtime","cx","parts","AssetGrid","rest","className","isLoading","loadingCount","AssetTileSkeleton","i","children","delay","index","AssetTile","hasFailed","setHasFailed","isLoaded","setIsLoaded","showImage","src","isSelected","isPending","icon","actions","onSelect","name","meta","AssetGridEmpty","title","description","action"],"sources":["../../../src/components/AssetGrid/index.tsx"],"sourcesContent":["import {\n forwardRef,\n useState,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { Grid } from \"../Grid\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport { Skeleton } from \"../Skeleton\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n return parts.filter(Boolean).join(\" \");\n}\n\nexport interface AssetGridProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Renders placeholder tiles instead of children. The grid keeps its\n * geometry, so nothing moves when the real assets arrive.\n */\n isLoading?: boolean;\n /** How many placeholder tiles to show while loading. */\n loadingCount?: number;\n children?: ReactNode;\n}\n\n/**\n * The media library surface: an auto-filling grid of asset tiles. Sits inside\n * a `TableFrame` when it is the page's collection, bare inside a drawer.\n */\nexport const AssetGrid = forwardRef<HTMLDivElement, AssetGridProps>(function AssetGrid(\n { isLoading = false, loadingCount = 8, className, children, ...rest },\n ref,\n) {\n return (\n <Grid\n ref={ref}\n columns=\"auto\"\n gap=\"md\"\n minColumnWidth=\"var(--asset-tile-min-width)\"\n className={cx(\"ds-asset-grid\", className)}\n aria-busy={isLoading || undefined}\n {...rest}\n >\n {isLoading\n ? Array.from({ length: loadingCount }, (_, i) => <AssetTileSkeleton key={i} index={i} />)\n : children}\n </Grid>\n );\n});\n\nexport interface AssetTileSkeletonProps {\n /** Position in the grid — drives the stagger, nothing else. */\n index?: number;\n}\n\n/** One loading tile: thumbnail block, name line, meta line. */\nexport function AssetTileSkeleton({ index = 0 }: AssetTileSkeletonProps) {\n const delay = { animationDelay: `calc(var(--skeleton-stagger) * ${index})` };\n return (\n <div className=\"ds-asset-tile\" data-loading=\"true\" aria-hidden=\"true\">\n <Skeleton shape=\"block\" className=\"ds-asset-tile__thumb\" style={delay} />\n <div className=\"ds-asset-tile__text\">\n <Skeleton shape=\"text\" width=\"80%\" style={delay} />\n <Skeleton shape=\"text\" width=\"45%\" style={delay} />\n </div>\n </div>\n );\n}\n\nexport interface AssetTileProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\" | \"title\"> {\n /** File name, shown in full — asset names are how people find things again. */\n name: string;\n /** Thumbnail source. Omit for a non-image asset and pass an `icon` instead. */\n src?: string;\n /** Glyph shown when there is no thumbnail, or while one fails to load. */\n icon?: IconName;\n /** Second line: dimensions, size, date — whatever the library sorts by. */\n meta?: ReactNode;\n /** Paints the soft fill and the solid rail. Never changes the tile's size. */\n isSelected?: boolean;\n /** The asset is still uploading or processing: dimmed, with a spinner. */\n isPending?: boolean;\n /** Makes the whole tile a selection target. */\n onSelect?: () => void;\n /** Badges or a menu, pinned to the top of the thumbnail. */\n actions?: ReactNode;\n}\n\n/**\n * One asset in the library. Selection paints a fill and a rail exactly like a\n * table row, so a grid and a list read as the same collection in two shapes.\n */\nexport const AssetTile = forwardRef<HTMLDivElement, AssetTileProps>(function AssetTile(\n {\n name,\n src,\n icon = \"image\",\n meta,\n isSelected = false,\n isPending = false,\n onSelect,\n actions,\n className,\n ...rest\n },\n ref,\n) {\n const [hasFailed, setHasFailed] = useState(false);\n const [isLoaded, setIsLoaded] = useState(false);\n const showImage = Boolean(src) && !hasFailed;\n\n return (\n <div\n ref={ref}\n className={cx(\"ds-asset-tile\", className)}\n data-selected={isSelected || undefined}\n data-pending={isPending || undefined}\n {...rest}\n >\n <div className=\"ds-asset-tile__thumb\">\n {showImage ? (\n <>\n {!isLoaded && <Skeleton shape=\"block\" className=\"ds-asset-tile__thumb-skeleton\" />}\n <img\n src={src}\n alt=\"\"\n loading=\"lazy\"\n data-loaded={isLoaded || undefined}\n onLoad={() => setIsLoaded(true)}\n onError={() => setHasFailed(true)}\n />\n </>\n ) : (\n <span className=\"ds-asset-tile__placeholder\">\n <Icon name={hasFailed ? \"alert-triangle\" : icon} size={24} />\n </span>\n )}\n\n {isPending && (\n <span className=\"ds-asset-tile__pending\" role=\"status\">\n <Icon name=\"spinner\" size={20} className=\"ds-asset-tile__spinner\" />\n <span className=\"ds-asset-tile__pending-label\">Uploading</span>\n </span>\n )}\n\n {actions && <div className=\"ds-asset-tile__actions\">{actions}</div>}\n\n {onSelect && (\n <button\n type=\"button\"\n className=\"ds-asset-tile__hit\"\n aria-pressed={isSelected}\n disabled={isPending}\n onClick={onSelect}\n >\n <span className=\"ds-asset-tile__hit-label\">{name}</span>\n </button>\n )}\n </div>\n\n <div className=\"ds-asset-tile__text\">\n <span className=\"ds-asset-tile__name\">{name}</span>\n {meta && <span className=\"ds-asset-tile__meta\">{meta}</span>}\n </div>\n </div>\n );\n});\n\nexport interface AssetGridEmptyProps {\n title: string;\n description?: ReactNode;\n action?: ReactNode;\n}\n\n/** Nothing in the library yet — one action, the one that fills it. */\nexport function AssetGridEmpty({ title, description, action }: AssetGridEmptyProps) {\n return (\n <div className=\"ds-asset-empty\">\n <Icon name=\"image\" size={24} />\n <span className=\"ds-asset-empty__title\">{title}</span>\n {description && <span className=\"ds-asset-empty__description\">{description}</span>}\n {action}\n </div>\n );\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs","names":["forwardRef","Grid","Skeleton","useState","_Fragment","Icon","Button","require_Icon","require_components_Button_index","require_components_Grid_index","require_components_Skeleton_index","react","react_jsx_runtime","cx","parts","AssetGrid","rest","className","isLoading","loadingCount","AssetTileSkeleton","i","children","delay","index","AssetTile","hasFailed","setHasFailed","isLoaded","setIsLoaded","showImage","src","isSelected","isPending","icon","actions","onSelect","name","meta","AssetGridEmpty","title","description","action"],"sources":["../../../src/components/AssetGrid/index.tsx"],"sourcesContent":["import {\n forwardRef,\n useState,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { Grid } from \"../Grid\";\nimport { 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":"A,8QAaA,SAASa,EAAG,GAAGC,EAAuC,CACpD,OAAOA,EAAM,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,CACvC,CAiBA,IAAaC,GAAA,EAAYf,EAAAA,WAAAA,CAA2C,SAClE,CAAE,YAAY,GAAO,eAAe,EAAG,YAAW,WAAU,GAAGgB,GAC/D,EACA,CACA,OACE,EAAAJ,EAAA,IAAA,CAACX,EAAAA,KAAD,CACO,MACL,QAAQ,OACR,IAAI,KACJ,eAAe,8BACf,UAAWY,EAAG,gBAAiBI,CAAS,EACxC,YAAWC,GAAa,IAAA,GACxB,GAAIF,EAEH,SAAAE,EACG,MAAM,KAAK,CAAE,OAAQC,CAAa,GAAI,EAAG,KAAM,EAAAP,EAAA,IAAA,CAACQ,EAAD,CAA2B,MAAOC,CAAI,EAAdA,CAAc,CAAC,EACtFC,CACA,CAAA,CAEV,CAAC,EAQD,SAAgBF,EAAkB,CAAE,QAAQ,GAA6B,CACvE,IAAMG,EAAQ,CAAE,eAAgB,kCAAkCC,EAAM,EAAG,EAC3E,OACE,EAAAZ,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,gBAAgB,eAAa,OAAO,cAAY,OAA/D,SAAA,EACE,EAAAA,EAAA,IAAA,CAACV,EAAAA,SAAD,CAAU,MAAM,QAAQ,UAAU,uBAAuB,MAAOqB,CAAQ,CAAA,GACxE,EAAAX,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,sBAAf,SAAA,EACE,EAAAA,EAAA,IAAA,CAACV,EAAAA,SAAD,CAAU,MAAM,OAAO,MAAM,MAAM,MAAOqB,CAAQ,CAAA,GAClD,EAAAX,EAAA,IAAA,CAACV,EAAAA,SAAD,CAAU,MAAM,OAAO,MAAM,MAAM,MAAOqB,CAAQ,CAAA,CAC/C,CACF,CAAA,CAAA,C,EAET,CA0BA,IAAaE,GAAA,EAAYzB,EAAAA,WAAAA,CAA2C,SAClE,CACE,OACA,MACA,OAAO,QACP,OACA,aAAa,GACb,YAAY,GACZ,WACA,UACA,YACA,GAAGgB,GAEL,EACA,CACA,GAAM,CAACU,EAAWC,IAAA,EAAgBxB,EAAAA,SAAAA,CAAS,EAAK,EAC1C,CAACyB,EAAUC,IAAA,EAAe1B,EAAAA,SAAAA,CAAS,EAAK,EACxC2B,EAAY,EAAQC,GAAQ,CAACL,EAEnC,OACE,EAAAd,EAAA,KAAA,CAAC,MAAD,CACO,MACL,UAAWC,EAAG,gBAAiBI,CAAS,EACxC,gBAAee,GAAc,IAAA,GAC7B,eAAcC,GAAa,IAAA,GAC3B,GAAIjB,EALN,SAAA,EAOE,EAAAJ,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,uBAAf,SAAA,CACGkB,GACC,EAAAlB,EAAA,KAAA,CAAAR,EAAAA,SAAA,CAAA,SAAA,CACG,CAACwB,IAAY,EAAAhB,EAAA,IAAA,CAACV,EAAAA,SAAD,CAAU,MAAM,QAAQ,UAAU,+BAAiC,CAAA,GACjF,EAAAU,EAAA,IAAA,CAAC,MAAD,CACO,MACL,IAAI,GACJ,QAAQ,OACR,cAAagB,GAAY,IAAA,GACzB,WAAcC,EAAY,EAAI,EAC9B,YAAeF,EAAa,EAAI,CACjC,CAAA,CACD,CAAA,CAAA,GAEF,EAAAf,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,6BACd,UAAA,EAAAA,EAAA,IAAA,CAACP,EAAAA,EAAD,CAAM,KAAMqB,EAAY,iBAAmBQ,EAAM,KAAM,EAAK,CAAA,CACxD,CAAA,EAGPD,IACC,EAAArB,EAAA,KAAA,CAAC,OAAD,CAAM,UAAU,yBAAyB,KAAK,SAA9C,SAAA,EACE,EAAAA,EAAA,IAAA,CAACP,EAAAA,EAAD,CAAM,KAAK,UAAU,KAAM,GAAI,UAAU,wBAA0B,CAAA,GACnE,EAAAO,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,+BAA+B,SAAA,WAAe,CAAA,CAC1D,C,GAGPuB,IAAW,EAAAvB,EAAA,IAAA,CAAC,MAAD,CAAK,UAAU,yBAA0B,SAAAuB,CAAa,CAAA,EAEjEC,IACC,EAAAxB,EAAA,IAAA,CAACN,EAAAA,OAAD,CACE,QAAQ,SACR,UAAU,qBACV,eAAc0B,EACd,aAAYK,EACZ,WAAYJ,EACZ,QAASG,CACV,CAAA,CAEA,CAEL,CAAA,GAAA,EAAAxB,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,sBAAf,SAAA,EACE,EAAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,sBAAuB,SAAAyB,CAAW,CAAA,EACjDC,IAAQ,EAAA1B,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,sBAAuB,SAAA0B,CAAW,CAAA,CACxD,CACF,CAAA,CAAA,C,EAET,CAAC,EASD,SAAgBC,EAAe,CAAE,QAAO,cAAa,UAA+B,CAClF,OACE,EAAA3B,EAAA,KAAA,CAAC,MAAD,CAAK,UAAU,iBAAf,SAAA,EACE,EAAAA,EAAA,IAAA,CAACP,EAAAA,EAAD,CAAM,KAAK,QAAQ,KAAM,EAAK,CAAA,GAC9B,EAAAO,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,wBAAyB,SAAA4B,CAAY,CAAA,EACpDC,IAAe,EAAA7B,EAAA,IAAA,CAAC,OAAD,CAAM,UAAU,8BAA+B,SAAA6B,CAAkB,CAAA,EAChFC,CACE,C,EAET,C"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AssetGrid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,2GAmBpB,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACrC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,+DAA+D;AAC/D,wBAAgB,iBAAiB,CAAC,EAAE,KAAS,EAAE,EAAE,sBAAsB,+BAWtE;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAClE,+EAA+E;IAC/E,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,2GA0EpB,CAAC;AAEH,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,sEAAsE;AACtE,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BASjF"}
1
+ {"version":3,"file":"index.d.cts","sourceRoot":"","sources":["../../../src/components/AssetGrid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;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 +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;AAGf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,aAAa,CAAC;AAMrB,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,cAAc,CAAC;IACpE;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,2GAmBpB,CAAC;AAEH,MAAM,WAAW,sBAAsB;IACrC,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,+DAA+D;AAC/D,wBAAgB,iBAAiB,CAAC,EAAE,KAAS,EAAE,EAAE,sBAAsB,+BAWtE;AAED,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAClE,+EAA+E;IAC/E,IAAI,EAAE,MAAM,CAAC;IACb,+EAA+E;IAC/E,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,0EAA0E;IAC1E,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8EAA8E;IAC9E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4DAA4D;IAC5D,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,2GA0EpB,CAAC;AAEH,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,sEAAsE;AACtE,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,mBAAmB,+BASjF"}
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,41 +1,42 @@
1
1
  import { t as e } from "../../chunks/Icon-CGY1FNXT.js";
2
- import { Grid as t } from "../Grid/index.js";
3
- import { Skeleton as n } from "../Skeleton/index.js";
4
- import { forwardRef as r, useState as i } from "react";
5
- import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
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";
6
7
  //#region src/components/AssetGrid/index.tsx
7
- function c(...e) {
8
+ function l(...e) {
8
9
  return e.filter(Boolean).join(" ");
9
10
  }
10
- var l = r(function({ isLoading: e = !1, loadingCount: n = 8, className: r, children: i, ...a }, s) {
11
- return /* @__PURE__ */ o(t, {
12
- ref: s,
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,
13
14
  columns: "auto",
14
15
  gap: "md",
15
16
  minColumnWidth: "var(--asset-tile-min-width)",
16
- className: c("ds-asset-grid", r),
17
+ className: l("ds-asset-grid", r),
17
18
  "aria-busy": e || void 0,
18
19
  ...a,
19
- children: e ? Array.from({ length: n }, (e, t) => /* @__PURE__ */ o(u, { index: t }, t)) : i
20
+ children: e ? Array.from({ length: t }, (e, t) => /* @__PURE__ */ s(d, { index: t }, t)) : i
20
21
  });
21
22
  });
22
- function u({ index: e = 0 }) {
23
+ function d({ index: e = 0 }) {
23
24
  let t = { animationDelay: `calc(var(--skeleton-stagger) * ${e})` };
24
- return /* @__PURE__ */ s("div", {
25
+ return /* @__PURE__ */ c("div", {
25
26
  className: "ds-asset-tile",
26
27
  "data-loading": "true",
27
28
  "aria-hidden": "true",
28
- children: [/* @__PURE__ */ o(n, {
29
+ children: [/* @__PURE__ */ s(r, {
29
30
  shape: "block",
30
31
  className: "ds-asset-tile__thumb",
31
32
  style: t
32
- }), /* @__PURE__ */ s("div", {
33
+ }), /* @__PURE__ */ c("div", {
33
34
  className: "ds-asset-tile__text",
34
- children: [/* @__PURE__ */ o(n, {
35
+ children: [/* @__PURE__ */ s(r, {
35
36
  shape: "text",
36
37
  width: "80%",
37
38
  style: t
38
- }), /* @__PURE__ */ o(n, {
39
+ }), /* @__PURE__ */ s(r, {
39
40
  shape: "text",
40
41
  width: "45%",
41
42
  style: t
@@ -43,87 +44,84 @@ function u({ index: e = 0 }) {
43
44
  })]
44
45
  });
45
46
  }
46
- var d = r(function({ name: t, src: r, icon: l = "image", meta: u, isSelected: d = !1, isPending: f = !1, onSelect: p, actions: m, className: h, ...g }, _) {
47
- let [v, y] = i(!1), [b, x] = i(!1), S = !!r && !v;
48
- return /* @__PURE__ */ s("div", {
49
- ref: _,
50
- className: c("ds-asset-tile", h),
51
- "data-selected": d || void 0,
52
- "data-pending": f || void 0,
53
- ...g,
54
- children: [/* @__PURE__ */ s("div", {
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", {
55
56
  className: "ds-asset-tile__thumb",
56
57
  children: [
57
- S ? /* @__PURE__ */ s(a, { children: [!b && /* @__PURE__ */ o(n, {
58
+ C ? /* @__PURE__ */ c(o, { children: [!x && /* @__PURE__ */ s(r, {
58
59
  shape: "block",
59
60
  className: "ds-asset-tile__thumb-skeleton"
60
- }), /* @__PURE__ */ o("img", {
61
- src: r,
61
+ }), /* @__PURE__ */ s("img", {
62
+ src: i,
62
63
  alt: "",
63
64
  loading: "lazy",
64
- "data-loaded": b || void 0,
65
- onLoad: () => x(!0),
66
- onError: () => y(!0)
67
- })] }) : /* @__PURE__ */ o("span", {
65
+ "data-loaded": x || void 0,
66
+ onLoad: () => S(!0),
67
+ onError: () => b(!0)
68
+ })] }) : /* @__PURE__ */ s("span", {
68
69
  className: "ds-asset-tile__placeholder",
69
- children: /* @__PURE__ */ o(e, {
70
- name: v ? "alert-triangle" : l,
70
+ children: /* @__PURE__ */ s(e, {
71
+ name: y ? "alert-triangle" : u,
71
72
  size: 24
72
73
  })
73
74
  }),
74
- f && /* @__PURE__ */ s("span", {
75
+ p && /* @__PURE__ */ c("span", {
75
76
  className: "ds-asset-tile__pending",
76
77
  role: "status",
77
- children: [/* @__PURE__ */ o(e, {
78
+ children: [/* @__PURE__ */ s(e, {
78
79
  name: "spinner",
79
80
  size: 20,
80
81
  className: "ds-asset-tile__spinner"
81
- }), /* @__PURE__ */ o("span", {
82
+ }), /* @__PURE__ */ s("span", {
82
83
  className: "ds-asset-tile__pending-label",
83
84
  children: "Uploading"
84
85
  })]
85
86
  }),
86
- m && /* @__PURE__ */ o("div", {
87
+ h && /* @__PURE__ */ s("div", {
87
88
  className: "ds-asset-tile__actions",
88
- children: m
89
+ children: h
89
90
  }),
90
- p && /* @__PURE__ */ o("button", {
91
- type: "button",
91
+ m && /* @__PURE__ */ s(t, {
92
+ variant: "simple",
92
93
  className: "ds-asset-tile__hit",
93
- "aria-pressed": d,
94
- disabled: f,
95
- onClick: p,
96
- children: /* @__PURE__ */ o("span", {
97
- className: "ds-asset-tile__hit-label",
98
- children: t
99
- })
94
+ "aria-pressed": f,
95
+ "aria-label": n,
96
+ isDisabled: p,
97
+ onClick: m
100
98
  })
101
99
  ]
102
- }), /* @__PURE__ */ s("div", {
100
+ }), /* @__PURE__ */ c("div", {
103
101
  className: "ds-asset-tile__text",
104
- children: [/* @__PURE__ */ o("span", {
102
+ children: [/* @__PURE__ */ s("span", {
105
103
  className: "ds-asset-tile__name",
106
- children: t
107
- }), u && /* @__PURE__ */ o("span", {
104
+ children: n
105
+ }), d && /* @__PURE__ */ s("span", {
108
106
  className: "ds-asset-tile__meta",
109
- children: u
107
+ children: d
110
108
  })]
111
109
  })]
112
110
  });
113
111
  });
114
- function f({ title: t, description: n, action: r }) {
115
- return /* @__PURE__ */ s("div", {
112
+ function p({ title: t, description: n, action: r }) {
113
+ return /* @__PURE__ */ c("div", {
116
114
  className: "ds-asset-empty",
117
115
  children: [
118
- /* @__PURE__ */ o(e, {
116
+ /* @__PURE__ */ s(e, {
119
117
  name: "image",
120
118
  size: 24
121
119
  }),
122
- /* @__PURE__ */ o("span", {
120
+ /* @__PURE__ */ s("span", {
123
121
  className: "ds-asset-empty__title",
124
122
  children: t
125
123
  }),
126
- n && /* @__PURE__ */ o("span", {
124
+ n && /* @__PURE__ */ s("span", {
127
125
  className: "ds-asset-empty__description",
128
126
  children: n
129
127
  }),
@@ -132,6 +130,6 @@ function f({ title: t, description: n, action: r }) {
132
130
  });
133
131
  }
134
132
  //#endregion
135
- export { l as AssetGrid, f as AssetGridEmpty, d as AssetTile, u as AssetTileSkeleton };
133
+ export { u as AssetGrid, p as AssetGridEmpty, f as AssetTile, d as AssetTileSkeleton };
136
134
 
137
135
  //# 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","name","meta","AssetGridEmpty","title","description","action"],"sources":["../../../src/components/AssetGrid/index.tsx"],"sourcesContent":["import {\n forwardRef,\n useState,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport { Grid } from \"../Grid\";\nimport { Icon } from \"../Icon\";\nimport type { IconName } from \"../Icon/icons\";\nimport { Skeleton } from \"../Skeleton\";\nimport \"./style.css\";\n\nfunction cx(...parts: (string | undefined | false)[]) {\n return parts.filter(Boolean).join(\" \");\n}\n\nexport interface AssetGridProps extends HTMLAttributes<HTMLDivElement> {\n /**\n * Renders placeholder tiles instead of children. The grid keeps its\n * geometry, so nothing moves when the real assets arrive.\n */\n isLoading?: boolean;\n /** How many placeholder tiles to show while loading. */\n loadingCount?: number;\n children?: ReactNode;\n}\n\n/**\n * The media library surface: an auto-filling grid of asset tiles. Sits inside\n * a `TableFrame` when it is the page's collection, bare inside a drawer.\n */\nexport const AssetGrid = forwardRef<HTMLDivElement, AssetGridProps>(function AssetGrid(\n { isLoading = false, loadingCount = 8, className, children, ...rest },\n ref,\n) {\n return (\n <Grid\n ref={ref}\n columns=\"auto\"\n gap=\"md\"\n minColumnWidth=\"var(--asset-tile-min-width)\"\n className={cx(\"ds-asset-grid\", className)}\n aria-busy={isLoading || undefined}\n {...rest}\n >\n {isLoading\n ? Array.from({ length: loadingCount }, (_, i) => <AssetTileSkeleton key={i} index={i} />)\n : children}\n </Grid>\n );\n});\n\nexport interface AssetTileSkeletonProps {\n /** Position in the grid — drives the stagger, nothing else. */\n index?: number;\n}\n\n/** One loading tile: thumbnail block, name line, meta line. */\nexport function AssetTileSkeleton({ index = 0 }: AssetTileSkeletonProps) {\n const delay = { animationDelay: `calc(var(--skeleton-stagger) * ${index})` };\n return (\n <div className=\"ds-asset-tile\" data-loading=\"true\" aria-hidden=\"true\">\n <Skeleton shape=\"block\" className=\"ds-asset-tile__thumb\" style={delay} />\n <div className=\"ds-asset-tile__text\">\n <Skeleton shape=\"text\" width=\"80%\" style={delay} />\n <Skeleton shape=\"text\" width=\"45%\" style={delay} />\n </div>\n </div>\n );\n}\n\nexport interface AssetTileProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onSelect\" | \"title\"> {\n /** File name, shown in full — asset names are how people find things again. */\n name: string;\n /** Thumbnail source. Omit for a non-image asset and pass an `icon` instead. */\n src?: string;\n /** Glyph shown when there is no thumbnail, or while one fails to load. */\n icon?: IconName;\n /** Second line: dimensions, size, date — whatever the library sorts by. */\n meta?: ReactNode;\n /** Paints the soft fill and the solid rail. Never changes the tile's size. */\n isSelected?: boolean;\n /** The asset is still uploading or processing: dimmed, with a spinner. */\n isPending?: boolean;\n /** Makes the whole tile a selection target. */\n onSelect?: () => void;\n /** Badges or a menu, pinned to the top of the thumbnail. */\n actions?: ReactNode;\n}\n\n/**\n * One asset in the library. Selection paints a fill and a rail exactly like a\n * table row, so a grid and a list read as the same collection in two shapes.\n */\nexport const AssetTile = forwardRef<HTMLDivElement, AssetTileProps>(function AssetTile(\n {\n name,\n src,\n icon = \"image\",\n meta,\n isSelected = false,\n isPending = false,\n onSelect,\n actions,\n className,\n ...rest\n },\n ref,\n) {\n const [hasFailed, setHasFailed] = useState(false);\n const [isLoaded, setIsLoaded] = useState(false);\n const showImage = Boolean(src) && !hasFailed;\n\n return (\n <div\n ref={ref}\n className={cx(\"ds-asset-tile\", className)}\n data-selected={isSelected || undefined}\n data-pending={isPending || undefined}\n {...rest}\n >\n <div className=\"ds-asset-tile__thumb\">\n {showImage ? (\n <>\n {!isLoaded && <Skeleton shape=\"block\" className=\"ds-asset-tile__thumb-skeleton\" />}\n <img\n src={src}\n alt=\"\"\n loading=\"lazy\"\n data-loaded={isLoaded || undefined}\n onLoad={() => setIsLoaded(true)}\n onError={() => setHasFailed(true)}\n />\n </>\n ) : (\n <span className=\"ds-asset-tile__placeholder\">\n <Icon name={hasFailed ? \"alert-triangle\" : icon} size={24} />\n </span>\n )}\n\n {isPending && (\n <span className=\"ds-asset-tile__pending\" role=\"status\">\n <Icon name=\"spinner\" size={20} className=\"ds-asset-tile__spinner\" />\n <span className=\"ds-asset-tile__pending-label\">Uploading</span>\n </span>\n )}\n\n {actions && <div className=\"ds-asset-tile__actions\">{actions}</div>}\n\n {onSelect && (\n <button\n type=\"button\"\n className=\"ds-asset-tile__hit\"\n aria-pressed={isSelected}\n disabled={isPending}\n onClick={onSelect}\n >\n <span className=\"ds-asset-tile__hit-label\">{name}</span>\n </button>\n )}\n </div>\n\n <div className=\"ds-asset-tile__text\">\n <span className=\"ds-asset-tile__name\">{name}</span>\n {meta && <span className=\"ds-asset-tile__meta\">{meta}</span>}\n </div>\n </div>\n );\n});\n\nexport interface AssetGridEmptyProps {\n title: string;\n description?: ReactNode;\n action?: ReactNode;\n}\n\n/** Nothing in the library yet — one action, the one that fills it. */\nexport function AssetGridEmpty({ title, description, action }: AssetGridEmptyProps) {\n return (\n <div className=\"ds-asset-empty\">\n <Icon name=\"image\" size={24} />\n <span className=\"ds-asset-empty__title\">{title}</span>\n {description && <span className=\"ds-asset-empty__description\">{description}</span>}\n {action}\n </div>\n );\n}\n"],"mappings":"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"}
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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"}
@@ -115,30 +115,22 @@
115
115
 
116
116
  /* The whole thumbnail is the selection target; the name stays readable text
117
117
  * underneath rather than being swallowed by the button. */
118
- .ds-asset-tile__hit {
118
+ .ds-asset-tile .ds-asset-tile__hit.ds-button {
119
119
  position: absolute;
120
120
  inset: 0;
121
+ inline-size: 100%;
122
+ height: 100%;
121
123
  padding: 0;
122
- border: 0;
123
- background: transparent;
124
- cursor: pointer;
125
124
  }
126
125
 
127
- .ds-asset-tile__hit:focus-visible {
128
- outline: var(--control-border-width) solid var(--color-focus);
126
+ .ds-asset-tile__hit.ds-button:focus-visible {
129
127
  outline-offset: -2px;
130
128
  }
131
129
 
132
- .ds-asset-tile__hit:disabled {
133
- cursor: not-allowed;
134
- }
135
-
136
- .ds-asset-tile__hit-label {
137
- position: absolute;
138
- inline-size: 1px;
139
- block-size: 1px;
140
- overflow: hidden;
141
- clip-path: inset(50%);
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;
142
134
  }
143
135
 
144
136
  .ds-asset-tile__text {
@@ -1,2 +1,2 @@
1
- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../chunks/Icon-CWsA1W83.cjs");let t=require("react"),n=require("react/jsx-runtime"),r=require("@dnd-kit/core"),i=require("@dnd-kit/sortable"),a=require("@dnd-kit/utilities");var o=(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,i.sortableKeyboardCoordinates)(e,t)},s=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`}),i={...e,droppableContainers:n};if(t)return(0,r.closestCorners)(i);let a=(0,r.pointerWithin)(i);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,r.closestCorners)(i)},c=(0,t.createContext)({activeId:null,activeType:null,overColumnId:null}),l=(0,t.forwardRef)(function({columnIds:a,onMove:l,onColumnMove:u,renderDragOverlay:d,renderColumnDragOverlay:f,className:p,children:m,...h},g){let _=(0,t.useId)(),[v,y]=(0,t.useState)(null),[b,x]=(0,t.useState)(null),[S,C]=(0,t.useState)(null),w=(0,r.useSensors)((0,r.useSensor)(r.PointerSensor,{activationConstraint:{distance:4}}),(0,r.useSensor)(r.KeyboardSensor,{coordinateGetter:o})),T=(0,t.useCallback)(e=>{y(String(e.active.id)),x(e.active.data.current?.type===`column`?`column`:`card`)},[]),E=(0,t.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,t.useCallback)(()=>{y(null),x(null),C(null)},[]),O=(0,t.useCallback)(e=>{let{active:t,over:n}=e;if(D(),!n)return;let r=t.data.current??{},i=n.data.current??{};if(r.type===`column`){let e=a??[],r=i.type===`column`?String(n.id):String(i.columnId??``),o=e.indexOf(r);if(o<0||r===String(t.id))return;u?.({columnId:String(t.id),toIndex:o});return}let o=String(r.columnId??``),s=``,c=0;i.type===`card`?(s=String(i.columnId??``),c=i.sortable?.index??0):(s=String(i.columnId??n.id),c=(i.items??[]).length),s&&(o!==s||String(t.id)!==String(n.id))&&l?.({cardId:String(t.id),fromColumnId:o,toColumnId:s,toIndex:c})},[a,u,l,D]),k=(0,t.useMemo)(()=>({activeId:v,activeType:b,overColumnId:S}),[v,b,S]),A=(0,n.jsx)(`div`,{ref:g,className:[`ds-board`,p].filter(Boolean).join(` `),...h,children:m});return(0,n.jsx)(c.Provider,{value:k,children:(0,n.jsxs)(r.DndContext,{id:`ds-board-${_}`,sensors:w,collisionDetection:s,measuring:{droppable:{strategy:r.MeasuringStrategy.Always}},onDragStart:T,onDragOver:E,onDragEnd:O,onDragCancel:D,children:[a?(0,n.jsx)(i.SortableContext,{items:a,strategy:i.horizontalListSortingStrategy,children:A}):A,(0,n.jsxs)(r.DragOverlay,{children:[v&&b===`card`?(0,n.jsxs)(`div`,{className:`ds-board-card`,"data-overlay":!0,children:[(0,n.jsx)(`span`,{className:`ds-board-card__handle`,"aria-hidden":`true`,children:(0,n.jsx)(e.t,{name:`grip-vertical`})}),(0,n.jsx)(`div`,{className:`ds-board-card__content`,children:d?.(v)})]}):null,v&&b===`column`?(0,n.jsx)(`div`,{className:`ds-board-column`,"data-overlay":!0,children:f?.(v)}):null]})]})})}),u=(0,t.forwardRef)(function({id:o,title:s,itemIds:l,count:u,action:d,isDraggable:f=!0,className:p,children:m,...h},g){let{activeType:_,overColumnId:v}=(0,t.useContext)(c),{setNodeRef:y}=(0,r.useDroppable)({id:`${o}::body`,data:{type:`column-body`,columnId:o,items:l}}),{attributes:b,listeners:x,setNodeRef:S,transform:C,transition:w,isDragging:T}=(0,i.useSortable)({id:o,disabled:!f,data:{type:`column`,columnId:o,items:l}});return(0,n.jsxs)(`section`,{ref:e=>{S(e),typeof g==`function`?g(e):g&&(g.current=e)},style:{transform:a.CSS.Translate.toString(C),transition:w},className:[`ds-board-column`,p].filter(Boolean).join(` `),"data-over":_===`card`&&v===o||void 0,"data-dragging":T||void 0,"aria-label":s,...h,children:[f&&(0,n.jsx)(`button`,{type:`button`,className:`ds-board-column__grip`,"aria-label":`Reorder ${s}`,...b,...x,children:(0,n.jsx)(e.t,{name:`grip-horizontal`})}),(0,n.jsxs)(`header`,{className:`ds-board-column__head`,children:[(0,n.jsx)(`span`,{className:`ds-board-column__title`,children:s}),(0,n.jsx)(`span`,{className:`ds-board-column__count`,children:u??l.length}),d&&(0,n.jsx)(`span`,{className:`ds-board-column__action`,children:d})]}),(0,n.jsx)(`div`,{ref:y,className:`ds-board-column__body`,children:(0,n.jsx)(i.SortableContext,{items:l,strategy:i.verticalListSortingStrategy,children:m})})]})}),d=(0,t.forwardRef)(function({id:r,columnId:o,label:s,className:l,children:u,...d},f){let{attributes:p,listeners:m,setNodeRef:h,transform:g,transition:_,isDragging:v}=(0,i.useSortable)({id:r,data:{type:`card`,columnId:o}}),{activeId:y}=(0,t.useContext)(c);return(0,n.jsxs)(`div`,{ref:e=>{h(e),typeof f==`function`?f(e):f&&(f.current=e)},style:{transform:a.CSS.Translate.toString(g),transition:_},className:[`ds-board-card`,l].filter(Boolean).join(` `),"data-dragging":v||void 0,"data-idle":y&&y!==r?``:void 0,...d,children:[(0,n.jsx)(`button`,{type:`button`,className:`ds-board-card__handle`,"aria-label":s?`Move ${s}`:`Move card`,...p,...m,children:(0,n.jsx)(e.t,{name:`grip-vertical`})}),(0,n.jsx)(`div`,{className:`ds-board-card__content`,children:u})]})});exports.Board=l,exports.BoardCard=d,exports.BoardColumn=u;
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
2
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.cjs","names":["sortableKeyboardCoordinates","closestCorners","pointerWithin","createContext","forwardRef","useId","useState","useSensors","useSensor","PointerSensor","KeyboardSensor","useCallback","useMemo","DndContext","MeasuringStrategy","SortableContext","horizontalListSortingStrategy","DragOverlay","Icon","useContext","useDroppable","useSortable","CSS","verticalListSortingStrategy","require_Icon","react","react_jsx_runtime","_dnd_kit_core","_dnd_kit_sortable","_dnd_kit_utilities","boardCoordinateGetter","args","event","containers","context","c","\"type\"","a","b","activeRect","rect","currentCoordinates","boardCollisionDetection","isColumn","type","container","scoped","within","rank","id","BoardContext","Board","rest","dndId","activeId","setActiveId","activeType","setActiveType","overColumnId","setOverColumnId","sensors","handleStart","handleOver","over","overData","columnId","\"columnId\"","reset","handleEnd","activeData","active","ids","columnIds","toIndex","onColumnMove","fromColumnId","toColumnId","\"sortable\"","\"items\"","onMove","value","board","className","renderDragOverlay","renderColumnDragOverlay","BoardColumn","setBodyRef","itemIds","setColumnRef","isDraggable","node","ref","transform","isDragging","title","attributes","listeners","count","action","BoardCard","setNodeRef","label"],"sources":["../../../src/components/Board/index.tsx"],"sourcesContent":["import {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useId,\n useMemo,\n useState,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport {\n DndContext,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n closestCorners,\n pointerWithin,\n MeasuringStrategy,\n\n useDroppable,\n useSensor,\n useSensors,\n type CollisionDetection,\n type DragEndEvent,\n type DragOverEvent,\n type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport {\n SortableContext,\n horizontalListSortingStrategy,\n sortableKeyboardCoordinates,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport type { KeyboardCoordinateGetter } from \"@dnd-kit/core\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport interface BoardMove {\n cardId: string;\n fromColumnId: string;\n toColumnId: string;\n /** Index the card lands on inside the destination column. */\n toIndex: number;\n}\n\nexport interface BoardColumnMove {\n columnId: string;\n toIndex: number;\n}\n\ninterface BoardContextValue {\n activeId: string | null;\n activeType: \"card\" | \"column\" | null;\n /** The lane the pointer is currently over, whatever it is actually over. */\n overColumnId: string | null;\n}\n\n/**\n * Arrow up/down sorts inside a lane; left/right jumps lanes, which the stock\n * sortable getter does not do.\n */\nconst boardCoordinateGetter: KeyboardCoordinateGetter = (event, args) => {\n const { currentCoordinates, context } = args;\n if (event.code === \"ArrowLeft\" || event.code === \"ArrowRight\") {\n const containers = context.droppableContainers\n .getEnabled()\n .filter((c) => c.data.current?.[\"type\"] === \"column-body\")\n .sort((a, b) => (a.rect.current?.left ?? 0) - (b.rect.current?.left ?? 0));\n const activeRect = context.active?.rect.current.translated;\n if (!activeRect) return undefined;\n const index = containers.findIndex(\n (c) => (c.rect.current?.left ?? 0) <= activeRect.left + 1 &&\n (c.rect.current?.right ?? 0) >= activeRect.left - 1,\n );\n const next = containers[index + (event.code === \"ArrowRight\" ? 1 : -1)];\n const rect = next?.rect.current;\n if (!rect) return undefined;\n event.preventDefault();\n return { x: rect.left + rect.width / 2 - activeRect.width / 2, y: currentCoordinates.y };\n }\n return sortableKeyboardCoordinates(event, args);\n};\n\n/**\n * A lane's body sits inside the lane's frame, so a raw corner-distance\n * strategy lets the body steal the hit from the lane itself — most visibly at\n * the board ends, where the last lane then never shifts aside to open the\n * drop gap. Resolve by what is being dragged: a column only ever hits other\n * columns; a card hits the card under the pointer first, then the lane body\n * under it, then whatever is nearest.\n */\nconst boardCollisionDetection: CollisionDetection = (args) => {\n const isColumn = args.active.data.current?.[\"type\"] === \"column\";\n const containers = args.droppableContainers.filter((container) => {\n const type = container.data.current?.[\"type\"];\n return isColumn ? type === \"column\" : type !== \"column\";\n });\n const scoped = { ...args, droppableContainers: containers };\n if (isColumn) return closestCorners(scoped);\n const within = pointerWithin(scoped);\n if (within.length > 0) {\n const rank = (id: (typeof within)[number][\"id\"]) =>\n containers.find((c) => c.id === id)?.data.current?.[\"type\"] === \"card\" ? 0 : 1;\n return [...within].sort((a, b) => rank(a.id) - rank(b.id));\n }\n return closestCorners(scoped);\n};\n\nconst BoardContext = createContext<BoardContextValue>({\n activeId: null,\n activeType: null,\n overColumnId: null,\n});\n\nexport interface BoardProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onDragEnd\"> {\n /** Column ids in render order. Required for columns to be re-orderable. */\n columnIds?: string[];\n /** Fired once a card is dropped somewhere new. Apply it to your own state. */\n onMove?: (move: BoardMove) => void;\n /** Fired once a column is dropped in a new position. */\n onColumnMove?: (move: BoardColumnMove) => void;\n /** Rendered inside the drag overlay while a card is in the air. */\n renderDragOverlay?: (cardId: string) => ReactNode;\n /** Rendered inside the drag overlay while a column is in the air. */\n renderColumnDragOverlay?: (columnId: string) => ReactNode;\n children?: ReactNode;\n}\n\n/**\n * A column board with pointer and keyboard dragging. The board owns the drag\n * mechanics only — the card data stays yours; react to `onMove`.\n */\nexport const Board = forwardRef<HTMLDivElement, BoardProps>(function Board(\n {\n columnIds,\n onMove,\n onColumnMove,\n renderDragOverlay,\n renderColumnDragOverlay,\n className,\n children,\n ...rest\n },\n ref,\n) {\n const dndId = useId();\n const [activeId, setActiveId] = useState<string | null>(null);\n const [activeType, setActiveType] = useState<\"card\" | \"column\" | null>(null);\n const [overColumnId, setOverColumnId] = useState<string | null>(null);\n const sensors = useSensors(\n useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n useSensor(KeyboardSensor, { coordinateGetter: boardCoordinateGetter }),\n );\n\n const handleStart = useCallback((event: DragStartEvent) => {\n setActiveId(String(event.active.id));\n setActiveType(event.active.data.current?.[\"type\"] === \"column\" ? \"column\" : \"card\");\n }, []);\n\n /* Cards land on cards as often as on empty space, so the lane a drag is over\n * is always resolved back to a column id — one highlight, one meaning. */\n const handleOver = useCallback((event: DragOverEvent) => {\n const over = event.over;\n if (!over) {\n setOverColumnId(null);\n return;\n }\n const overData = over.data.current ?? {};\n const columnId =\n overData[\"type\"] === \"column\" ? String(over.id) : String(overData[\"columnId\"] ?? \"\");\n setOverColumnId(columnId || null);\n }, []);\n\n const reset = useCallback(() => {\n setActiveId(null);\n setActiveType(null);\n setOverColumnId(null);\n }, []);\n\n const handleEnd = useCallback(\n (event: DragEndEvent) => {\n const { active, over } = event;\n reset();\n if (!over) return;\n\n const activeData = active.data.current ?? {};\n const overData = over.data.current ?? {};\n\n /* Columns reorder among themselves; a column never lands inside a lane. */\n if (activeData[\"type\"] === \"column\") {\n const ids = columnIds ?? [];\n const overColumnId =\n overData[\"type\"] === \"column\" ? String(over.id) : String(overData[\"columnId\"] ?? \"\");\n const toIndex = ids.indexOf(overColumnId);\n if (toIndex < 0 || overColumnId === String(active.id)) return;\n onColumnMove?.({ columnId: String(active.id), toIndex });\n return;\n }\n\n const fromColumnId = String(activeData[\"columnId\"] ?? \"\");\n let toColumnId = \"\";\n let toIndex = 0;\n\n if (overData[\"type\"] === \"card\") {\n /* Dropped on a card — land exactly where that card sits, in any lane. */\n toColumnId = String(overData[\"columnId\"] ?? \"\");\n toIndex = (overData[\"sortable\"] as { index: number } | undefined)?.index ?? 0;\n } else {\n /* Dropped on empty lane space — land at the end. */\n toColumnId = String(overData[\"columnId\"] ?? over.id);\n toIndex = ((overData[\"items\"] as string[] | undefined) ?? []).length;\n }\n\n if (!toColumnId) return;\n if (fromColumnId === toColumnId && String(active.id) === String(over.id)) return;\n onMove?.({ cardId: String(active.id), fromColumnId, toColumnId, toIndex });\n },\n [columnIds, onColumnMove, onMove, reset],\n );\n\n const value = useMemo(\n () => ({ activeId, activeType, overColumnId }),\n [activeId, activeType, overColumnId],\n );\n\n const board = (\n <div ref={ref} className={[\"ds-board\", className].filter(Boolean).join(\" \")} {...rest}>\n {children}\n </div>\n );\n\n return (\n <BoardContext.Provider value={value}>\n <DndContext\n id={`ds-board-${dndId}`}\n sensors={sensors}\n collisionDetection={boardCollisionDetection}\n /* Lanes scroll and change height mid-drag, so positions are re-read\n * continuously — without this the shift animation misfires. */\n measuring={{ droppable: { strategy: MeasuringStrategy.Always } }}\n\n onDragStart={handleStart}\n onDragOver={handleOver}\n onDragEnd={handleEnd}\n onDragCancel={reset}\n >\n {columnIds ? (\n <SortableContext items={columnIds} strategy={horizontalListSortingStrategy}>\n {board}\n </SortableContext>\n ) : (\n board\n )}\n <DragOverlay>\n {activeId && activeType === \"card\" ? (\n <div className=\"ds-board-card\" data-overlay>\n <span className=\"ds-board-card__handle\" aria-hidden=\"true\">\n <Icon name=\"grip-vertical\" />\n </span>\n <div className=\"ds-board-card__content\">{renderDragOverlay?.(activeId)}</div>\n </div>\n ) : null}\n {activeId && activeType === \"column\" ? (\n <div className=\"ds-board-column\" data-overlay>\n {renderColumnDragOverlay?.(activeId)}\n </div>\n ) : null}\n </DragOverlay>\n </DndContext>\n </BoardContext.Provider>\n );\n});\n\nexport interface BoardColumnProps extends HTMLAttributes<HTMLDivElement> {\n id: string;\n title: string;\n /** Card ids in render order — the sortable contract for this column. */\n itemIds: string[];\n /** Shown beside the title; defaults to the number of cards. */\n count?: number;\n /** A control in the column head, e.g. an add button or a menu. */\n action?: ReactNode;\n /** Set false to pin a lane in place. */\n isDraggable?: boolean;\n children?: ReactNode;\n}\n\n/**\n * One lane of the board. Heavy frame, hairline head rule, scrolling body, and\n * a grip on top of the head that drags the whole lane sideways.\n */\nexport const BoardColumn = forwardRef<HTMLElement, BoardColumnProps>(\n function BoardColumn(\n { id, title, itemIds, count, action, isDraggable = true, className, children, ...rest },\n ref,\n ) {\n const { activeType, overColumnId } = useContext(BoardContext);\n const { setNodeRef: setBodyRef } = useDroppable({\n id: `${id}::body`,\n data: { type: \"column-body\", columnId: id, items: itemIds },\n });\n const {\n attributes,\n listeners,\n setNodeRef: setColumnRef,\n transform,\n transition,\n isDragging,\n } = useSortable({\n id,\n disabled: !isDraggable,\n data: { type: \"column\", columnId: id, items: itemIds },\n });\n\n return (\n <section\n ref={(node) => {\n setColumnRef(node);\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n style={{ transform: CSS.Translate.toString(transform), transition }}\n className={[\"ds-board-column\", className].filter(Boolean).join(\" \")}\n data-over={(activeType === \"card\" && overColumnId === id) || undefined}\n data-dragging={isDragging || undefined}\n\n aria-label={title}\n {...rest}\n >\n {isDraggable && (\n <button\n type=\"button\"\n className=\"ds-board-column__grip\"\n aria-label={`Reorder ${title}`}\n {...attributes}\n {...listeners}\n >\n <Icon name=\"grip-horizontal\" />\n </button>\n )}\n <header className=\"ds-board-column__head\">\n <span className=\"ds-board-column__title\">{title}</span>\n <span className=\"ds-board-column__count\">{count ?? itemIds.length}</span>\n {action && <span className=\"ds-board-column__action\">{action}</span>}\n </header>\n <div ref={setBodyRef} className=\"ds-board-column__body\">\n <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>\n {children}\n </SortableContext>\n </div>\n </section>\n );\n },\n);\n\nexport interface BoardCardProps extends HTMLAttributes<HTMLDivElement> {\n id: string;\n columnId: string;\n /** Accessible name announced when the card is picked up. */\n label?: string;\n children?: ReactNode;\n}\n\n/**\n * A draggable card. The grip on the left is the handle, so the card body can\n * hold links and buttons; the grip is a real button for keyboard users:\n * space to pick up, arrows to move, space to drop.\n */\nexport const BoardCard = forwardRef<HTMLDivElement, BoardCardProps>(function BoardCard(\n { id, columnId, label, className, children, ...rest },\n ref,\n) {\n const { attributes, listeners, setNodeRef, transform, transition, isDragging } =\n useSortable({ id, data: { type: \"card\", columnId } });\n const { activeId } = useContext(BoardContext);\n\n return (\n <div\n ref={(node) => {\n setNodeRef(node);\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n style={{ transform: CSS.Translate.toString(transform), transition }}\n className={[\"ds-board-card\", className].filter(Boolean).join(\" \")}\n data-dragging={isDragging || undefined}\n data-idle={activeId && activeId !== id ? \"\" : undefined}\n {...rest}\n >\n <button\n type=\"button\"\n className=\"ds-board-card__handle\"\n aria-label={label ? `Move ${label}` : \"Move card\"}\n {...attributes}\n {...listeners}\n >\n <Icon name=\"grip-vertical\" />\n </button>\n <div className=\"ds-board-card__content\">{children}</div>\n </div>\n );\n});\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.cjs","names":["sortableKeyboardCoordinates","closestCorners","pointerWithin","createContext","forwardRef","useId","useState","useSensors","useSensor","PointerSensor","KeyboardSensor","useCallback","useMemo","DndContext","MeasuringStrategy","SortableContext","horizontalListSortingStrategy","DragOverlay","Icon","useContext","useDroppable","useSortable","CSS","Button","verticalListSortingStrategy","require_Icon","require_components_Button_index","react","react_jsx_runtime","_dnd_kit_core","_dnd_kit_sortable","_dnd_kit_utilities","boardCoordinateGetter","args","event","containers","context","c","\"type\"","a","b","activeRect","rect","currentCoordinates","boardCollisionDetection","isColumn","type","container","scoped","within","rank","id","BoardContext","Board","rest","dndId","activeId","setActiveId","activeType","setActiveType","overColumnId","setOverColumnId","sensors","handleStart","handleOver","over","overData","columnId","\"columnId\"","reset","handleEnd","activeData","active","ids","columnIds","toIndex","onColumnMove","fromColumnId","toColumnId","\"sortable\"","\"items\"","onMove","value","board","className","renderDragOverlay","renderColumnDragOverlay","BoardColumn","setBodyRef","itemIds","setColumnRef","isDraggable","node","ref","transform","isDragging","title","attributes","listeners","count","action","BoardCard","setNodeRef","label"],"sources":["../../../src/components/Board/index.tsx"],"sourcesContent":["import {\n createContext,\n forwardRef,\n useCallback,\n useContext,\n useId,\n useMemo,\n useState,\n type HTMLAttributes,\n type ReactNode,\n} from \"react\";\nimport {\n DndContext,\n DragOverlay,\n KeyboardSensor,\n PointerSensor,\n closestCorners,\n pointerWithin,\n MeasuringStrategy,\n\n useDroppable,\n useSensor,\n useSensors,\n type CollisionDetection,\n type DragEndEvent,\n type DragOverEvent,\n type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport {\n SortableContext,\n horizontalListSortingStrategy,\n sortableKeyboardCoordinates,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport type { KeyboardCoordinateGetter } from \"@dnd-kit/core\";\nimport { Button } from \"../Button\";\nimport { Icon } from \"../Icon\";\nimport \"./style.css\";\n\nexport interface BoardMove {\n cardId: string;\n fromColumnId: string;\n toColumnId: string;\n /** Index the card lands on inside the destination column. */\n toIndex: number;\n}\n\nexport interface BoardColumnMove {\n columnId: string;\n toIndex: number;\n}\n\ninterface BoardContextValue {\n activeId: string | null;\n activeType: \"card\" | \"column\" | null;\n /** The lane the pointer is currently over, whatever it is actually over. */\n overColumnId: string | null;\n}\n\n/**\n * Arrow up/down sorts inside a lane; left/right jumps lanes, which the stock\n * sortable getter does not do.\n */\nconst boardCoordinateGetter: KeyboardCoordinateGetter = (event, args) => {\n const { currentCoordinates, context } = args;\n if (event.code === \"ArrowLeft\" || event.code === \"ArrowRight\") {\n const containers = context.droppableContainers\n .getEnabled()\n .filter((c) => c.data.current?.[\"type\"] === \"column-body\")\n .sort((a, b) => (a.rect.current?.left ?? 0) - (b.rect.current?.left ?? 0));\n const activeRect = context.active?.rect.current.translated;\n if (!activeRect) return undefined;\n const index = containers.findIndex(\n (c) => (c.rect.current?.left ?? 0) <= activeRect.left + 1 &&\n (c.rect.current?.right ?? 0) >= activeRect.left - 1,\n );\n const next = containers[index + (event.code === \"ArrowRight\" ? 1 : -1)];\n const rect = next?.rect.current;\n if (!rect) return undefined;\n event.preventDefault();\n return { x: rect.left + rect.width / 2 - activeRect.width / 2, y: currentCoordinates.y };\n }\n return sortableKeyboardCoordinates(event, args);\n};\n\n/**\n * A lane's body sits inside the lane's frame, so a raw corner-distance\n * strategy lets the body steal the hit from the lane itself — most visibly at\n * the board ends, where the last lane then never shifts aside to open the\n * drop gap. Resolve by what is being dragged: a column only ever hits other\n * columns; a card hits the card under the pointer first, then the lane body\n * under it, then whatever is nearest.\n */\nconst boardCollisionDetection: CollisionDetection = (args) => {\n const isColumn = args.active.data.current?.[\"type\"] === \"column\";\n const containers = args.droppableContainers.filter((container) => {\n const type = container.data.current?.[\"type\"];\n return isColumn ? type === \"column\" : type !== \"column\";\n });\n const scoped = { ...args, droppableContainers: containers };\n if (isColumn) return closestCorners(scoped);\n const within = pointerWithin(scoped);\n if (within.length > 0) {\n const rank = (id: (typeof within)[number][\"id\"]) =>\n containers.find((c) => c.id === id)?.data.current?.[\"type\"] === \"card\" ? 0 : 1;\n return [...within].sort((a, b) => rank(a.id) - rank(b.id));\n }\n return closestCorners(scoped);\n};\n\nconst BoardContext = createContext<BoardContextValue>({\n activeId: null,\n activeType: null,\n overColumnId: null,\n});\n\nexport interface BoardProps extends Omit<HTMLAttributes<HTMLDivElement>, \"onDragEnd\"> {\n /** Column ids in render order. Required for columns to be re-orderable. */\n columnIds?: string[];\n /** Fired once a card is dropped somewhere new. Apply it to your own state. */\n onMove?: (move: BoardMove) => void;\n /** Fired once a column is dropped in a new position. */\n onColumnMove?: (move: BoardColumnMove) => void;\n /** Rendered inside the drag overlay while a card is in the air. */\n renderDragOverlay?: (cardId: string) => ReactNode;\n /** Rendered inside the drag overlay while a column is in the air. */\n renderColumnDragOverlay?: (columnId: string) => ReactNode;\n children?: ReactNode;\n}\n\n/**\n * A column board with pointer and keyboard dragging. The board owns the drag\n * mechanics only — the card data stays yours; react to `onMove`.\n */\nexport const Board = forwardRef<HTMLDivElement, BoardProps>(function Board(\n {\n columnIds,\n onMove,\n onColumnMove,\n renderDragOverlay,\n renderColumnDragOverlay,\n className,\n children,\n ...rest\n },\n ref,\n) {\n const dndId = useId();\n const [activeId, setActiveId] = useState<string | null>(null);\n const [activeType, setActiveType] = useState<\"card\" | \"column\" | null>(null);\n const [overColumnId, setOverColumnId] = useState<string | null>(null);\n const sensors = useSensors(\n useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),\n useSensor(KeyboardSensor, { coordinateGetter: boardCoordinateGetter }),\n );\n\n const handleStart = useCallback((event: DragStartEvent) => {\n setActiveId(String(event.active.id));\n setActiveType(event.active.data.current?.[\"type\"] === \"column\" ? \"column\" : \"card\");\n }, []);\n\n /* Cards land on cards as often as on empty space, so the lane a drag is over\n * is always resolved back to a column id — one highlight, one meaning. */\n const handleOver = useCallback((event: DragOverEvent) => {\n const over = event.over;\n if (!over) {\n setOverColumnId(null);\n return;\n }\n const overData = over.data.current ?? {};\n const columnId =\n overData[\"type\"] === \"column\" ? String(over.id) : String(overData[\"columnId\"] ?? \"\");\n setOverColumnId(columnId || null);\n }, []);\n\n const reset = useCallback(() => {\n setActiveId(null);\n setActiveType(null);\n setOverColumnId(null);\n }, []);\n\n const handleEnd = useCallback(\n (event: DragEndEvent) => {\n const { active, over } = event;\n reset();\n if (!over) return;\n\n const activeData = active.data.current ?? {};\n const overData = over.data.current ?? {};\n\n /* Columns reorder among themselves; a column never lands inside a lane. */\n if (activeData[\"type\"] === \"column\") {\n const ids = columnIds ?? [];\n const overColumnId =\n overData[\"type\"] === \"column\" ? String(over.id) : String(overData[\"columnId\"] ?? \"\");\n const toIndex = ids.indexOf(overColumnId);\n if (toIndex < 0 || overColumnId === String(active.id)) return;\n onColumnMove?.({ columnId: String(active.id), toIndex });\n return;\n }\n\n const fromColumnId = String(activeData[\"columnId\"] ?? \"\");\n let toColumnId = \"\";\n let toIndex = 0;\n\n if (overData[\"type\"] === \"card\") {\n /* Dropped on a card — land exactly where that card sits, in any lane. */\n toColumnId = String(overData[\"columnId\"] ?? \"\");\n toIndex = (overData[\"sortable\"] as { index: number } | undefined)?.index ?? 0;\n } else {\n /* Dropped on empty lane space — land at the end. */\n toColumnId = String(overData[\"columnId\"] ?? over.id);\n toIndex = ((overData[\"items\"] as string[] | undefined) ?? []).length;\n }\n\n if (!toColumnId) return;\n if (fromColumnId === toColumnId && String(active.id) === String(over.id)) return;\n onMove?.({ cardId: String(active.id), fromColumnId, toColumnId, toIndex });\n },\n [columnIds, onColumnMove, onMove, reset],\n );\n\n const value = useMemo(\n () => ({ activeId, activeType, overColumnId }),\n [activeId, activeType, overColumnId],\n );\n\n const board = (\n <div ref={ref} className={[\"ds-board\", className].filter(Boolean).join(\" \")} {...rest}>\n {children}\n </div>\n );\n\n return (\n <BoardContext.Provider value={value}>\n <DndContext\n id={`ds-board-${dndId}`}\n sensors={sensors}\n collisionDetection={boardCollisionDetection}\n /* Lanes scroll and change height mid-drag, so positions are re-read\n * continuously — without this the shift animation misfires. */\n measuring={{ droppable: { strategy: MeasuringStrategy.Always } }}\n\n onDragStart={handleStart}\n onDragOver={handleOver}\n onDragEnd={handleEnd}\n onDragCancel={reset}\n >\n {columnIds ? (\n <SortableContext items={columnIds} strategy={horizontalListSortingStrategy}>\n {board}\n </SortableContext>\n ) : (\n board\n )}\n <DragOverlay>\n {activeId && activeType === \"card\" ? (\n <div className=\"ds-board-card\" data-overlay>\n <span className=\"ds-board-card__handle\" aria-hidden=\"true\">\n <Icon name=\"grip-vertical\" />\n </span>\n <div className=\"ds-board-card__content\">{renderDragOverlay?.(activeId)}</div>\n </div>\n ) : null}\n {activeId && activeType === \"column\" ? (\n <div className=\"ds-board-column\" data-overlay>\n {renderColumnDragOverlay?.(activeId)}\n </div>\n ) : null}\n </DragOverlay>\n </DndContext>\n </BoardContext.Provider>\n );\n});\n\nexport interface BoardColumnProps extends HTMLAttributes<HTMLDivElement> {\n id: string;\n title: string;\n /** Card ids in render order — the sortable contract for this column. */\n itemIds: string[];\n /** Shown beside the title; defaults to the number of cards. */\n count?: number;\n /** A control in the column head, e.g. an add button or a menu. */\n action?: ReactNode;\n /** Set false to pin a lane in place. */\n isDraggable?: boolean;\n children?: ReactNode;\n}\n\n/**\n * One lane of the board. Heavy frame, hairline head rule, scrolling body, and\n * a grip on top of the head that drags the whole lane sideways.\n */\nexport const BoardColumn = forwardRef<HTMLElement, BoardColumnProps>(\n function BoardColumn(\n { id, title, itemIds, count, action, isDraggable = true, className, children, ...rest },\n ref,\n ) {\n const { activeType, overColumnId } = useContext(BoardContext);\n const { setNodeRef: setBodyRef } = useDroppable({\n id: `${id}::body`,\n data: { type: \"column-body\", columnId: id, items: itemIds },\n });\n const {\n attributes,\n listeners,\n setNodeRef: setColumnRef,\n transform,\n transition,\n isDragging,\n } = useSortable({\n id,\n disabled: !isDraggable,\n data: { type: \"column\", columnId: id, items: itemIds },\n });\n\n return (\n <section\n ref={(node) => {\n setColumnRef(node);\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n style={{ transform: CSS.Translate.toString(transform), transition }}\n className={[\"ds-board-column\", className].filter(Boolean).join(\" \")}\n data-over={(activeType === \"card\" && overColumnId === id) || undefined}\n data-dragging={isDragging || undefined}\n\n aria-label={title}\n {...rest}\n >\n {isDraggable && (\n <Button\n variant=\"simple\"\n size=\"sm\"\n iconStart=\"grip-horizontal\"\n className=\"ds-board-column__grip\"\n aria-label={`Reorder ${title}`}\n {...attributes}\n {...listeners}\n />\n )}\n <header className=\"ds-board-column__head\">\n <span className=\"ds-board-column__title\">{title}</span>\n <span className=\"ds-board-column__count\">{count ?? itemIds.length}</span>\n {action && <span className=\"ds-board-column__action\">{action}</span>}\n </header>\n <div ref={setBodyRef} className=\"ds-board-column__body\">\n <SortableContext items={itemIds} strategy={verticalListSortingStrategy}>\n {children}\n </SortableContext>\n </div>\n </section>\n );\n },\n);\n\nexport interface BoardCardProps extends HTMLAttributes<HTMLDivElement> {\n id: string;\n columnId: string;\n /** Accessible name announced when the card is picked up. */\n label?: string;\n children?: ReactNode;\n}\n\n/**\n * A draggable card. The grip on the left is the handle, so the card body can\n * hold links and buttons; the grip is a real button for keyboard users:\n * space to pick up, arrows to move, space to drop.\n */\nexport const BoardCard = forwardRef<HTMLDivElement, BoardCardProps>(function BoardCard(\n { id, columnId, label, className, children, ...rest },\n ref,\n) {\n const { attributes, listeners, setNodeRef, transform, transition, isDragging } =\n useSortable({ id, data: { type: \"card\", columnId } });\n const { activeId } = useContext(BoardContext);\n\n return (\n <div\n ref={(node) => {\n setNodeRef(node);\n if (typeof ref === \"function\") ref(node);\n else if (ref) ref.current = node;\n }}\n style={{ transform: CSS.Translate.toString(transform), transition }}\n className={[\"ds-board-card\", className].filter(Boolean).join(\" \")}\n data-dragging={isDragging || undefined}\n data-idle={activeId && activeId !== id ? \"\" : undefined}\n {...rest}\n >\n <Button\n variant=\"simple\"\n size=\"sm\"\n isIconOnly\n iconStart=\"grip-vertical\"\n className=\"ds-board-card__handle\"\n aria-label={label ? `Move ${label}` : \"Move card\"}\n {...attributes}\n {...listeners}\n />\n <div className=\"ds-board-card__content\">{children}</div>\n </div>\n );\n});\n"],"mappings":"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"}