@visitwonders/assembly 0.2.0 → 0.3.0

package/declarations/data/index.d.ts

@@ -1,2 +1,3 @@
+export { default as SortableList } from './sortable-list';
 export { default as Table } from './table';
 //# sourceMappingURL=index.d.ts.map

package/declarations/data/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/data/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/data/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,aAAa,CAAC"}

package/declarations/data/sortable-list.d.ts

@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import type { DragDropEvents } from '@arthur5005/dnd-kit-ember';
+export interface SortableListSignature<T> {
+    Element: HTMLDivElement;
+    Args: {
+        /** Array of items to render */
+        items: T[];
+        /** Unique key for each item (receives item, returns string) */
+        key: (item: T) => string;
+        /** Called with reordered items during drag (for visual feedback) and on drop (final state) */
+        onReorder: (items: T[]) => void;
+        /** Sort direction */
+        direction?: 'vertical' | 'horizontal';
+        /** Disable reordering */
+        isDisabled?: boolean;
+    };
+    Blocks: {
+        default: [{
+            item: T;
+            index: number;
+        }];
+    };
+}
+export default class SortableList<T> extends Component<SortableListSignature<T>> {
+    snapshot: T[];
+    get direction(): "vertical" | "horizontal";
+    get isDisabled(): boolean;
+    get items(): T[];
+    handleDragStart: () => void;
+    handleDragOver: (event: Parameters<DragDropEvents["dragover"]>[0]) => void;
+    handleDragEnd: (event: Parameters<DragDropEvents["dragend"]>[0]) => void;
+}
+//# sourceMappingURL=sortable-list.d.ts.map

package/declarations/data/sortable-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-list.d.ts","sourceRoot":"","sources":["../../src/data/sortable-list.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAI3C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAQhE,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE;QACJ,+BAA+B;QAC/B,KAAK,EAAE,CAAC,EAAE,CAAC;QACX,+DAA+D;QAC/D,GAAG,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,MAAM,CAAC;QACzB,8FAA8F;QAC9F,SAAS,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;QAChC,qBAAqB;QACrB,SAAS,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;QACtC,yBAAyB;QACzB,UAAU,CAAC,EAAE,OAAO,CAAC;KACtB,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE,CAAC;YAAE,IAAI,EAAE,CAAC,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KACvC,CAAC;CACH;AAMD,MAAM,CAAC,OAAO,OAAO,YAAY,CAAC,CAAC,CAAE,SAAQ,SAAS,CACpD,qBAAqB,CAAC,CAAC,CAAC,CACzB;IACU,QAAQ,EAAE,CAAC,EAAE,CAAM;IAE5B,IAAI,SAAS,8BAEZ;IAED,IAAI,UAAU,YAEb;IAED,IAAI,KAAK,QAER;IAED,eAAe,aAEb;IAEF,cAAc,UAAW,UAAU,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,UAMhE;IAEF,aAAa,UAAW,UAAU,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,UAI9D;CA8EH"}

package/declarations/layout/stack.d.ts

@@ -14,7 +14,7 @@ export interface StackSignature {
     };
 }
 export default class Stack extends Component<StackSignature> {
-    get gap(): "sm" | "md" | "lg" | "none" | "xs" | "xl";
+    get gap(): "sm" | "md" | "lg" | "xs" | "xl" | "none";
     get align(): "center" | "end" | "start" | "stretch" | "baseline";
     get justify(): "center" | "end" | "start" | "between";
     get wrap(): boolean;

package/declarations/typography/text.d.ts

@@ -6,6 +6,7 @@ export interface TextSignature {
         size?: 'xs' | 'sm' | 'md' | 'lg';
         weight?: 'regular' | 'medium' | 'semibold' | 'bold';
         tone?: 'primary' | 'secondary' | 'muted' | 'critical' | 'success' | 'warning' | 'inherit';
+        monospace?: boolean;
         as?: 'span' | 'p' | 'label' | 'strong' | 'em' | 'div';
         align?: 'left' | 'center' | 'right';
         truncate?: boolean;
@@ -40,6 +41,7 @@ export default class Text extends Component<TextSignature> {
     };
     get size(): "sm" | "md" | "lg" | "xs";
     get weight(): "bold" | "medium" | "semibold" | "regular";
+    get monospace(): boolean;
     get tone(): "primary" | "critical" | "success" | "warning" | "secondary" | "muted" | "inherit";
     get align(): "left" | "center" | "right";
     get truncate(): boolean;

package/declarations/typography/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/typography/text.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAI3C,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE;QACJ,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;QACzE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;QACjC,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;QACpD,IAAI,CAAC,EACD,SAAS,GACT,WAAW,GACX,OAAO,GACP,UAAU,GACV,SAAS,GACT,SAAS,GACT,SAAS,CAAC;QACd,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,CAAC;QACtD,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;QACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAC7B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;QAClD,UAAU,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,cAAc,CAAC;QACnD,SAAS,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,CAAC;KAC/D,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE,EAAE,CAAC;KACb,CAAC;CACH;AAWD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,SAAS,CAAC,aAAa,CAAC;IACxD,IAAI,eAAe;;;;;;;;;;;;;;;;;;MAElB;IAED,IAAI,IAAI,8BAEP;IAED,IAAI,MAAM,+CAET;IAED,IAAI,IAAI,uFAEP;IAED,IAAI,KAAK,gCAER;IAED,IAAI,QAAQ,YAEX;IAED,IAAI,IAAI,+CAEP;IAED,IAAI,UAAU,0CAEb;IAED,IAAI,SAAS,sDAEZ;CAuCF"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/typography/text.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAI3C,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,WAAW,CAAC;IACrB,IAAI,EAAE;QACJ,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;QACzE,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;QACjC,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,MAAM,CAAC;QACpD,IAAI,CAAC,EACD,SAAS,GACT,WAAW,GACX,OAAO,GACP,UAAU,GACV,SAAS,GACT,SAAS,GACT,SAAS,CAAC;QACd,SAAS,CAAC,EAAE,OAAO,CAAC;QACpB,EAAE,CAAC,EAAE,MAAM,GAAG,GAAG,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,GAAG,KAAK,CAAC;QACtD,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;QACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAC7B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAC;QAClD,UAAU,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,cAAc,CAAC;QACnD,SAAS,CAAC,EAAE,MAAM,GAAG,WAAW,GAAG,WAAW,GAAG,YAAY,CAAC;KAC/D,CAAC;IACF,MAAM,EAAE;QACN,OAAO,EAAE,EAAE,CAAC;KACb,CAAC;CACH;AAWD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,SAAS,CAAC,aAAa,CAAC;IACxD,IAAI,eAAe;;;;;;;;;;;;;;;;;;MAElB;IAED,IAAI,IAAI,8BAEP;IAED,IAAI,MAAM,+CAET;IAED,IAAI,SAAS,YAEZ;IAED,IAAI,IAAI,uFAEP;IAED,IAAI,KAAK,gCAER;IAED,IAAI,QAAQ,YAEX;IAED,IAAI,IAAI,+CAEP;IAED,IAAI,UAAU,0CAEb;IAED,IAAI,SAAS,sDAEZ;CAwCF"}

package/dist/_app_/data/sortable-list.js

@@ -0,0 +1 @@
+export { default } from "@visitwonders/assembly/data/sortable-list";

package/dist/data/index.js

@@ -1,2 +1,3 @@
+export { default as SortableList } from './sortable-list.js';
 export { default as Table } from './table.js';
 //# sourceMappingURL=index.js.map

package/dist/data/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/data/sortable-list-css-211fcfeedc08052ccbac7f51549ce0b1.css

@@ -0,0 +1,89 @@
+/* <inline>/src/data/sortable-list-css-211fcfeedc08052ccbac7f51549ce0b1.css */
+
+  .sortable-list_ebb0a8898 {
+    display: flex;
+    flex-direction: column;
+    background: var(--color-bg-surface);
+  }
+
+  .sortable-list_ebb0a8898[data-direction="horizontal"] {
+    flex-direction: row;
+  }
+
+  .sortable-item_ebb0a8898 {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-3);
+    padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) var(--spacing-10);
+    background: var(--color-bg-surface);
+    border: var(--border-width-1) solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+    user-select: none;
+  }
+
+  .sortable-item_ebb0a8898[data-disabled="true"] {
+    padding-left: var(--spacing-4);
+  }
+
+  /* Collapse borders between stacked items */
+  .sortable-item_ebb0a8898 + .sortable-item_ebb0a8898 {
+    margin-top: calc(-1 * var(--border-width-1));
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .sortable-item_ebb0a8898:has(+ .sortable-item_ebb0a8898) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .sortable-list_ebb0a8898[data-direction="horizontal"] .sortable-item_ebb0a8898 + .sortable-item_ebb0a8898 {
+    margin-top: 0;
+    margin-left: calc(-1 * var(--border-width-1));
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: var(--radius-md);
+    border-bottom-right-radius: var(--radius-md);
+  }
+
+  .sortable-list_ebb0a8898[data-direction="horizontal"] .sortable-item_ebb0a8898:has(+ .sortable-item_ebb0a8898) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-top-left-radius: var(--radius-md);
+    border-bottom-left-radius: var(--radius-md);
+  }
+
+  .sortable-handle_ebb0a8898 {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--spacing-10);
+    color: var(--color-text-tertiary);
+    cursor: grab;
+    transition:
+      color 0.15s ease,
+      background-color 0.15s ease;
+  }
+
+  .sortable-handle_ebb0a8898:hover {
+    color: var(--color-text);
+  }
+
+  .sortable-handle_ebb0a8898:active {
+    cursor: grabbing;
+  }
+
+  .sortable-list_ebb0a8898[data-disabled="true"] .sortable-handle_ebb0a8898 {
+    color: var(--color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  .sortable-content_ebb0a8898 {
+    flex: 1;
+    min-width: 0;
+  }

package/dist/data/sortable-list.js

@@ -0,0 +1,62 @@
+import "./sortable-list-css-211fcfeedc08052ccbac7f51549ce0b1.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { hash } from '@ember/helper';
+import { move, DragDrop } from '@arthur5005/dnd-kit-ember';
+import Icon from '../media/icon.js';
+import { GripVertical } from 'lucide';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime';
+
+;
+
+// ============================================================================
+// Component
+// ============================================================================
+class SortableList extends Component {
+  static {
+    g(this.prototype, "snapshot", [tracked], function () {
+      return [];
+    });
+  }
+  #snapshot = (i(this, "snapshot"), void 0);
+  get direction() {
+    return this.args.direction ?? 'vertical';
+  }
+  get isDisabled() {
+    return this.args.isDisabled ?? false;
+  }
+  get items() {
+    return this.args.items;
+  }
+  handleDragStart = () => {
+    this.snapshot = [...this.args.items];
+  };
+  handleDragOver = event => {
+    if (this.isDisabled) return;
+    // Cast needed: move() expects UniqueIdentifier[] but our items are generic T[]
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const items = move(this.args.items, event);
+    this.args.onReorder(items);
+  };
+  handleDragEnd = event => {
+    if (event.canceled) {
+      this.args.onReorder([...this.snapshot]);
+    }
+  };
+  static {
+    setComponentTemplate(precompileTemplate("\n\n<div class=\"sortable-list_ebb0a8898\" data-direction={{this.direction}} data-disabled={{if this.isDisabled \"true\"}} data-test-sortable-list ...attributes>\n  <DragDrop @onDragStart={{this.handleDragStart}} @onDragOver={{this.handleDragOver}} @onDragEnd={{this.handleDragEnd}} as |dd|>\n    {{#each this.items as |item index|}}\n      {{#let (@key item) as |itemId|}}\n        <div class=\"sortable-item_ebb0a8898\" data-disabled={{if this.isDisabled \"true\"}} data-test-sortable-item={{itemId}} {{dd.sortable id=itemId index=index disabled=this.isDisabled}}>\n          {{#unless this.isDisabled}}\n            <span class=\"sortable-handle_ebb0a8898\" role=\"button\" aria-label=\"Reorder item\" data-test-sortable-handle {{dd.handle id=itemId}}>\n              <Icon @icon={{GripVertical}} @size=\"sm\" />\n            </span>\n          {{/unless}}\n          <div class=\"sortable-content_ebb0a8898\">\n            {{yield (hash item=item index=index)}}\n          </div>\n        </div>\n      {{/let}}\n    {{/each}}\n  </DragDrop>\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        DragDrop,
+        Icon,
+        GripVertical,
+        hash
+      })
+    }), this);
+  }
+}
+
+export { SortableList as default };
+//# sourceMappingURL=sortable-list.js.map

package/dist/data/sortable-list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortable-list.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/data/table.css

@@ -6,7 +6,7 @@
 .table_e4aed93fe {
   width: 100%;
   border-collapse: collapse;
-  font-size: var(--font-size-sm);
+  font-size: var(--font-size-md);
   color: var(--color-text);
   background-color: var(--color-bg-surface);
 }
@@ -151,7 +151,7 @@
 }
 
 .row_e4aed93fe {
-  border-bottom: var(--border-width-1) solid var(--color-border);
+  border-bottom: var(--border-width-1) solid var(--color-border-subtle);
   transition: background-color 0.1s ease;
 }
 

package/dist/typography/{text-css-73e03f1b750b32d7064d4ef87562289c.css → text-css-935f55e9cd74b06a5ce61330c4c79ef9.css}

@@ -1,4 +1,4 @@
-/* <inline>/src/typography/text-css-73e03f1b750b32d7064d4ef87562289c.css */
+/* <inline>/src/typography/text-css-935f55e9cd74b06a5ce61330c4c79ef9.css */
 
   .text_e5637097c {
     margin: 0;
@@ -22,6 +22,11 @@
     line-height: var(--line-height-normal);
   }
 
+  /* Monospace */
+  .text_e5637097c[data-monospace="true"] {
+    font-family: var(--font-family-mono);
+  }
+
   /* Weight */
   .text_e5637097c[data-weight="regular"] {
     font-weight: var(--font-weight-regular);

package/dist/typography/text.js

@@ -1,4 +1,4 @@
-import "./text-css-73e03f1b750b32d7064d4ef87562289c.css"
+import "./text-css-935f55e9cd74b06a5ce61330c4c79ef9.css"
 import Component from '@glimmer/component';
 import { element } from 'ember-element-helper';
 import { or } from 'ember-truth-helpers';
@@ -43,6 +43,9 @@ class Text extends Component {
   get weight() {
     return this.args.weight ?? this.variantDefaults.weight;
   }
+  get monospace() {
+    return this.args.monospace ?? false;
+  }
   get tone() {
     return this.args.tone ?? 'primary';
   }
@@ -62,7 +65,7 @@ class Text extends Component {
     return this.args.transform ?? 'none';
   }
   static {
-    setComponentTemplate(precompileTemplate("\n\n{{#let (element (or @as \"span\")) as |Tag|}}\n  <Tag class=\"text_e5637097c\" data-size={{this.size}} data-weight={{this.weight}} data-tone={{this.tone}} data-align={{this.align}} data-truncate={{this.truncate}} data-max-lines={{@maxLines}} data-wrap={{this.wrap}} data-decoration={{this.decoration}} data-transform={{this.transform}} ...attributes>\n    {{yield}}\n  </Tag>\n{{/let}}", {
+    setComponentTemplate(precompileTemplate("\n\n{{#let (element (or @as \"span\")) as |Tag|}}\n  <Tag class=\"text_e5637097c\" data-size={{this.size}} data-monospace={{if this.monospace \"true\"}} data-weight={{this.weight}} data-tone={{this.tone}} data-align={{this.align}} data-truncate={{this.truncate}} data-max-lines={{@maxLines}} data-wrap={{this.wrap}} data-decoration={{this.decoration}} data-transform={{this.transform}} ...attributes>\n    {{yield}}\n  </Tag>\n{{/let}}", {
       strictMode: true,
       scope: () => ({
         element,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@visitwonders/assembly",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "The default blueprint for Embroider v2 addons.",
   "keywords": [
     "ember-addon"
@@ -93,6 +93,7 @@
     "test": "echo 'A v2 addon does not have tests, run tests in showcase'"
   },
   "dependencies": {
+    "@arthur5005/dnd-kit-ember": "^0.1.2",
     "@embroider/addon-shim": "^1.8.9",
     "@floating-ui/dom": "^1.6.13",
     "decorator-transforms": "^2.2.2",
@@ -102,6 +103,7 @@
     "flagpack-core": "^2.1.0"
   },
   "peerDependencies": {
+    "@arthur5005/dnd-kit-ember": "^0.1.2",
     "@glimmer/component": "^2.0.0",
     "date-fns": "^4.1.0",
     "ember-truth-helpers": "^4.0.3",
@@ -109,7 +111,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
-    "date-fns": "^4.1.0",
     "@babel/eslint-parser": "^7.25.1",
     "@babel/plugin-transform-typescript": "^7.25.2",
     "@babel/runtime": "^7.25.6",
@@ -124,6 +125,7 @@
     "@rollup/plugin-babel": "^6.0.4",
     "babel-plugin-ember-template-compilation": "^3.1.0",
     "concurrently": "^9.0.1",
+    "date-fns": "^4.1.0",
     "ember-scoped-css": "^2.0.4",
     "ember-source": "^6.8.0",
     "ember-template-lint": "^6.0.0",
@@ -155,6 +157,7 @@
       "./action/button-group.js": "./dist/_app_/action/button-group.js",
       "./action/button.js": "./dist/_app_/action/button.js",
       "./action/link.js": "./dist/_app_/action/link.js",
+      "./data/sortable-list.js": "./dist/_app_/data/sortable-list.js",
       "./data/table.js": "./dist/_app_/data/table.js",
       "./form/calendar.js": "./dist/_app_/form/calendar.js",
       "./form/checkbox-group.js": "./dist/_app_/form/checkbox-group.js",