@adia-ai/web-components 0.2.5 → 0.3.0

package/README.md

@@ -64,12 +64,12 @@ web-components/
 │                     pages. Full contract in docs/specs/traits.md.
 │
 ├── a2ui/           — deprecation shim for one release
-│   └── index.js            Re-exports @adia-ai/a2ui-utils with a
+│   └── index.js            Re-exports @adia-ai/a2ui-runtime with a
 │                           one-time console.warn. Removed in 0.1.0.
 │                           All actual A2UI runtime code (renderer,
 │                           registry, streams, surface manifest,
 │                           wiring, dockables, controllers) lives in
-│                           `@adia-ai/a2ui-utils` at packages/a2ui/utils/.
+│                           `@adia-ai/a2ui-runtime` at packages/a2ui/runtime/.
 │
 └── styles/         — Global tokens and CSS layering
     ├── tokens.css              all --a-* design tokens
@@ -139,7 +139,7 @@ examples.
 ## A2UI runtime
 
 ```javascript
-import { A2UIRenderer } from '@adia-ai/a2ui-utils';
+import { A2UIRenderer } from '@adia-ai/a2ui-runtime';
 // (The old `@adia-ai/web-components/a2ui` subpath still resolves in 0.0.4
 // via a deprecation shim that prints a console.warn; removed in 0.1.0.)
 
@@ -198,7 +198,7 @@ the `streams` registry export from `core/data-stream.js`.
 
 Implementation: `core/data-stream.js` (~360 lines). Full
 attribute table + live demos:
-[`/site/components/chart#data-stream`](../../site/pages/components/chart/index.html).
+[`/site/components/chart#data-stream`](./components/chart/chart.html).
 
 ## Build
 

package/components/inspector/inspector.js

@@ -1,5 +1,5 @@
 import { UIElement } from '../../core/element.js';
-import { registry } from '@adia-ai/a2ui-utils';
+import { registry } from '@adia-ai/a2ui-runtime';
 import '../tabs/tabs.js';
 import '../tabs/tab.js';
 import '../code/code.js';

package/core/streams-bridge.js

@@ -12,7 +12,7 @@
  * the dependency direction is web-components → a2ui-utils, not the
  * reverse. The bridge duck-types the renderer (it needs `.process()`,
  * nothing else), so it works with any A2UI-protocol consumer — the
- * actual `A2UIRenderer` from `@adia-ai/a2ui-utils`, a custom renderer,
+ * actual `A2UIRenderer` from `@adia-ai/a2ui-runtime`, a custom renderer,
  * or a test stub.
  *
  * Contract:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.2.5",
-  "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-utils.",
+  "version": "0.3.0",
+  "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "exports": {
     ".": "./index.js",
@@ -18,8 +18,15 @@
   "files": [
     "core/",
     "components/",
+    "!components/**/*.html",
+    "!components/**/*.examples.js",
     "styles/",
+    "!styles/**/*.html",
+    "!styles/**/*.examples.js",
     "traits/",
+    "!traits/**/*.html",
+    "!traits/**/*.examples.js",
+    "!traits/_api-table.js",
     "index.js",
     "index.css"
   ],
@@ -30,7 +37,7 @@
     "./core/provider.js"
   ],
   "dependencies": {
-    "@adia-ai/a2ui-utils": "^0.2.0"
+    "@adia-ai/a2ui-runtime": "^0.3.0"
   },
   "publishConfig": {
     "access": "public",

package/styles/typography.css

@@ -256,7 +256,7 @@
 
   /* section — h2/h3, major division within content */
   --a-section-family: var(--a-font-family-heading);
-  --a-section-weight: var(--a-weight-normal);
+  --a-section-weight: var(--a-weight-semibold);
   --a-section-sm: 16px;
   --a-section-md: 17px;
   --a-section-lg: 19px;

package/traits/draggable-list-item.js

@@ -3,7 +3,7 @@ import { defineTrait } from './define.js';
 /**
  * `draggable-list-item` — pointer-driven list-reorder lifter.
  *
- * Authored for the Tasks UI playground (docs/projects/tasks-playground/spec/).
+ * Authored for the Tasks UI playground (apps/tasks/spec/).
  * Per SPEC §6.2 + ARCHITECTURE-REVIEW H2 (category: 'motion-positioning').
  *
  * Different mental model than the existing `draggable` trait:
@@ -126,13 +126,26 @@ function dropTargetFromPoint(x, y) {
  * @returns {number} insertion index in [0, count_after_removal]
  */
 function indexWithinTarget(target, _x, y, sourceId) {
-  // Direct children only. ChildList is small (usually < 50); filter is O(n).
-  // Pre-filter to source-skipped, layout-having items so we know which is
-  // truly last in post-removal coordinates.
+  // Find all `[data-draggable-list-item-id]` descendants whose nearest
+  // `[data-droppable-id]` ancestor IS the target. This supports both
+  // structural patterns:
+  //   • Items as DIRECT children of the droppable host
+  //     (e.g. `<list-section data-droppable-id> <task-row-ui>...`).
+  //   • Items nested inside an intermediate container
+  //     (e.g. `<task-column-ui data-droppable-id> <div class="col-list">
+  //     <task-card-ui>...` — the column's CSS owns chrome on the host
+  //     while cards live in a flow-styled inner list).
+  //
+  // The closest-ancestor filter keeps nested droppables from poisoning
+  // the count: a child droppable's items have a different closest
+  // `[data-droppable-id]`, so they're skipped here.
+  //
+  // Pre-filter to source-skipped, layout-having items so we know which
+  // is truly last in post-removal coordinates.
   const visible = [];
-  for (const child of target.children) {
-    if (!(child instanceof Element)) continue;
-    if (!child.hasAttribute('data-draggable-list-item-id')) continue;
+  const candidates = target.querySelectorAll('[data-draggable-list-item-id]');
+  for (const child of candidates) {
+    if (child.closest('[data-droppable-id]') !== target) continue;
     if (sourceId && child.getAttribute('data-draggable-list-item-id') === sourceId) continue;
     const r = child.getBoundingClientRect();
     if (r.height === 0 && r.width === 0) continue;
@@ -142,20 +155,21 @@ function indexWithinTarget(target, _x, y, sourceId) {
 
   for (let i = 0; i < visible.length; i++) {
     const r = visible[i];
-    const isLast = i === visible.length - 1;
-    if (isLast && y >= r.top) {
-      // Last item: cursor anywhere ON (or below) the last item's box →
-      // drop AFTER the last. Without this rule, dropping in the upper
-      // half of the last item resolves to "before last" = no-op for
-      // 3-item-list "move item 2 to item 3 slot" (the lifted source's
-      // DOM still occupies its old space, so cursor above last's mid
-      // is the only reachable target without leaving the section). The
-      // generous last-item zone matches user intuition: dragging onto
-      // the last item sends it to the bottom.
-      return visible.length;
-    }
-    // Standard midline test for non-last items (and for cursor above the
-    // last item's top edge): above midline → insert before this item.
+    // Standard midline test (Pragmatic-DnD / Linear / Notion convention):
+    // cursor above this item's mid-line → insert before it; below → fall
+    // through to the next item. After the loop, if no hit, drop after
+    // all items (cursor was below every mid-line).
+    //
+    // History: v0.2.5 introduced a "last-item generous zone" that
+    // returned `visible.length` whenever the cursor was anywhere ON the
+    // last item — meant to make the 3-item-list "drop on last to send
+    // it to the bottom" gesture more permissive. Reverted: it broke the
+    // common "drop between second-to-last and last" path (hovering the
+    // last item's upper-half no longer resolved to "before last"). With
+    // the v0.2.6 indicator-visibility upgrade (3 px stroke + terminal
+    // caps + accent glow) the lower-half-targets-end behavior is now
+    // visually obvious, so the standard midline test reads cleanly
+    // without the carve-out.
     if (y < r.top + r.height / 2) return i;
   }
   // Cursor is below every item's midline (and below last's top — only

package/traits/draggable-list-item.test.js

@@ -3,7 +3,7 @@ import { draggableListItem } from './draggable-list-item.js';
 import { mountHost, connectTrait, resetDOM } from './test-helpers.js';
 
 // Minimal smoke coverage. The draggable-list-item trait is the pointer
-// driver for the docs/projects/tasks-playground/ DnD model. The cases
+// driver for the apps/tasks/ DnD model. The cases
 // below exercise only its own surface (schema, attribute lifecycle,
 // id assignment, idempotent disconnect). Full pointer-flow tests need a
 // laid-out DOM with sibling droppables and live elementFromPoint —

package/traits/droppable-collection.js

@@ -3,7 +3,7 @@ import { defineTrait } from './define.js';
 /**
  * `droppable-collection` — coordinator over a tree of `droppable` children.
  *
- * Authored for the Tasks UI playground (docs/projects/tasks-playground/spec/).
+ * Authored for the Tasks UI playground (apps/tasks/spec/).
  * Per SPEC §6.2 + ARCHITECTURE-REVIEW H2 (category: 'input-interaction').
  *
  * Pairs with `droppable` (per-target) and `draggable-list-item` (motion-

package/traits/droppable-collection.test.js

@@ -3,7 +3,7 @@ import { droppableCollection } from './droppable-collection.js';
 import { mountHost, connectTrait, spyEvent, resetDOM } from './test-helpers.js';
 
 // Minimal smoke coverage. The droppable-collection trait coordinates
-// child droppables of the docs/projects/tasks-playground/ DnD model;
+// child droppables of the apps/tasks/ DnD model;
 // the cases below verify only the trait's own surface (schema, attribute
 // lifecycle, child-drop re-emission) so the verify:traits gate stays
 // green. End-to-end multi-column behavior belongs in the playground tests.

package/traits/droppable.js

@@ -3,7 +3,7 @@ import { defineTrait } from './define.js';
 /**
  * `droppable` — marks an element as a drop target for `draggable-list-item`.
  *
- * Authored for the Tasks UI playground (docs/projects/tasks-playground/spec/).
+ * Authored for the Tasks UI playground (apps/tasks/spec/).
  * Per SPEC §6.2 + ARCHITECTURE-REVIEW H2 (category: 'input-interaction').
  *
  * Pairs with `draggable-list-item` (motion-positioning) which lifts a list

package/traits/droppable.test.js

@@ -3,7 +3,7 @@ import { droppable } from './droppable.js';
 import { mountHost, connectTrait, resetDOM } from './test-helpers.js';
 
 // Minimal smoke coverage. The droppable trait is authored against the
-// docs/projects/tasks-playground/ DnD coordinator and assumes a sibling
+// apps/tasks/ DnD coordinator and assumes a sibling
 // `draggable-list-item` trait dispatches `dnd:drop-target-change` /
 // `dnd:drop` on the document. The cases below only exercise the trait's
 // own surface (schema, attribute lifecycle, registry entry, cleanup) so

package/traits/keyboard-reorderable.js

@@ -3,7 +3,7 @@ import { defineTrait } from './define.js';
 /**
  * `keyboard-reorderable` — keyboard alternative to `draggable-list-item`.
  *
- * Authored for the Tasks UI playground (docs/projects/tasks-playground/spec/).
+ * Authored for the Tasks UI playground (apps/tasks/spec/).
  * Per SPEC §6.2 + ARCHITECTURE-REVIEW H2 (category: 'keyboard-navigation').
  *
  * Implements the WCAG 2.5.7 single-pointer alternative + ARIA 1.1

package/traits/keyboard-reorderable.test.js

@@ -4,7 +4,7 @@ import { mountHost, connectTrait, resetDOM } from './test-helpers.js';
 
 // Minimal smoke coverage. Keyboard-reorderable is the WCAG 2.5.7 +
 // ARIA 1.1 alternative to draggable-list-item for the
-// docs/projects/tasks-playground/ DnD model. Cases below verify
+// apps/tasks/ DnD model. Cases below verify
 // only the trait's own surface (schema, attribute lifecycle, id
 // assignment, tabindex injection). Multi-container keyboard flow
 // belongs in the playground integration suite.