@ui-sdk/web 0.0.0-stage → 0.1.0-beta.1

package/dist/trigger-menu.js

@@ -0,0 +1,133 @@
+// src/trigger-menu.ts
+import {
+  triggerMenu
+} from "@ui-sdk/core/trigger-menu";
+import {
+  createParts,
+  findOwner,
+  instanceOf,
+  wrappedChild
+} from "./define-element.js";
+import { copy, renderListItems, stashedEmpty, templateOf } from "./list.js";
+import { popupKinds, popupPortal, popupState } from "./popup.js";
+var owner = "ui-trigger-menu";
+var automatic = /* @__PURE__ */ new WeakSet();
+var automaticText = {
+  render(el) {
+    if (!el.childNodes.length) {
+      automatic.add(el);
+    }
+  },
+  context: (el) => ({ text: automatic.has(el) }),
+  kinds: { text: null }
+};
+function defineTriggerMenuElements() {
+  createParts(triggerMenu, {
+    root: {
+      tag: owner,
+      defaults: { autoHighlight: true, loop: true, dismissible: true },
+      display: "contents",
+      kinds: popupKinds,
+      options: (el) => {
+        const menu = el;
+        return {
+          triggers: menu.triggers ?? [],
+          // Nesting is the default: a menu inside a token input uses its editor.
+          editor: menu.editor ?? tokenInputEditor(el),
+          container: void 0
+        };
+      },
+      state: popupState,
+      api: [
+        "isOpen",
+        "setOpen",
+        "open",
+        "close",
+        "getQuery",
+        "getMatch",
+        "insert",
+        "focus"
+      ],
+      // The field's own `select`, for selected text, bubbles up here.
+      events: { onSelect: "itemselect" },
+      portal: popupPortal,
+      // Data items follow the trigger, the level and the query.
+      render(el, { api, subscribe }) {
+        renderData(el, api);
+        return subscribe(() => renderData(el, api));
+      }
+    },
+    // A wrapper, so the field stays a real textarea or input.
+    input: {
+      tag: "ui-trigger-menu-input",
+      display: "contents",
+      target: wrappedChild("textarea, input")
+    },
+    content: { tag: "ui-trigger-menu-content", kinds: popupKinds },
+    list: { tag: "ui-trigger-menu-list", display: "block" },
+    item: { tag: "ui-trigger-menu-item", display: "block" },
+    // An icon inside a suggestion. Screen readers and filtering skip it.
+    "item-icon": "ui-trigger-menu-item-icon",
+    group: { tag: "ui-trigger-menu-group", display: "block" },
+    "group-label": { tag: "ui-trigger-menu-group-label", display: "block" },
+    separator: { tag: "ui-trigger-menu-separator", display: "block" },
+    empty: { tag: "ui-trigger-menu-empty", ...stashedEmpty },
+    // Without content, the status says the count and the keys.
+    status: {
+      tag: "ui-trigger-menu-status",
+      display: "block",
+      ...automaticText
+    },
+    // Without content, the hint shows the arguments to type.
+    hint: { tag: "ui-trigger-menu-hint", ...automaticText }
+  });
+}
+function tokenInputEditor(el) {
+  return instanceOf(
+    findOwner(el, "ui-token-input")
+  )?.api.editor;
+}
+var generatedItems = /* @__PURE__ */ new WeakSet();
+var rendered = /* @__PURE__ */ new WeakMap();
+var contents = /* @__PURE__ */ new WeakMap();
+function renderData(el, api) {
+  const template = templateOf(el);
+  let content = el.querySelector(":scope > ui-trigger-menu-content") ?? contents.get(el);
+  if (!content) {
+    content = copy(template, "ui-trigger-menu-content", false);
+    content.append(copy(template, "ui-trigger-menu-list", false));
+    el.append(content);
+  }
+  contents.set(el, content);
+  const list = content.querySelector("ui-trigger-menu-list");
+  if (!list) {
+    return;
+  }
+  const own = Array.from(list.querySelectorAll("ui-trigger-menu-item")).some(
+    (item) => {
+      const group = item.closest("ui-trigger-menu-group");
+      return !generatedItems.has(item) && !(group && generatedItems.has(group));
+    }
+  );
+  const visible = api.internal.listbox.visibleData()?.list ?? [];
+  if (own || rendered.get(list) === visible) {
+    return;
+  }
+  rendered.set(list, visible);
+  for (const child of Array.from(list.children)) {
+    if (generatedItems.has(child)) {
+      child.remove();
+    }
+  }
+  const fresh = renderListItems(
+    "ui-trigger-menu",
+    visible,
+    api.internal.keyOf,
+    template
+  );
+  fresh.forEach((item) => generatedItems.add(item));
+  list.prepend(...fresh);
+}
+export {
+  defineTriggerMenuElements
+};

package/dist/waterfall.d.ts

@@ -0,0 +1,2 @@
+declare function defineWaterfallElements(): void;
+export { defineWaterfallElements };

package/dist/waterfall.js

@@ -0,0 +1,140 @@
+// src/waterfall.ts
+import { partState } from "@ui-sdk/core/renderer";
+import {
+  waterfall
+} from "@ui-sdk/core/waterfall";
+import { createParts } from "./define-element.js";
+import { copy, templateOf } from "./list.js";
+var owner = "ui-waterfall";
+var generated = /* @__PURE__ */ new WeakSet();
+var renderedItems = /* @__PURE__ */ new WeakMap();
+var shownTicks = /* @__PURE__ */ new WeakMap();
+var labeledTicks = /* @__PURE__ */ new WeakSet();
+function renderRows(api, template) {
+  return api.internal.all().map((item) => {
+    const row = copy(template, "ui-waterfall-row", false);
+    row.setAttribute("value", item.value);
+    const header = copy(template, "ui-waterfall-row-header", false);
+    if (item.children) {
+      header.append(copy(template, "ui-waterfall-indicator"));
+    }
+    header.append(item.label);
+    row.append(header, copy(template, "ui-waterfall-bar"));
+    generated.add(row);
+    return row;
+  });
+}
+var own = (el) => Array.from(el.children).some((child) => !generated.has(child));
+function renderTicks(el, instance) {
+  const axes = Array.from(
+    el.querySelectorAll("ui-waterfall-axis")
+  ).filter((axis) => axis.closest(owner) === el && !own(axis));
+  for (const axis of axes) {
+    const max = Number(axis.getAttribute("max-ticks")) || void 0;
+    const { ticks } = partState(
+      instance.part("axis", { maxTicks: max })
+    );
+    const shown = ticks.map((tick) => `${tick.time}:${tick.label}`).join(",");
+    if (shownTicks.get(axis) === shown) {
+      continue;
+    }
+    shownTicks.set(axis, shown);
+    axis.replaceChildren(
+      ...ticks.map((tick) => {
+        const child = axis.ownerDocument.createElement("ui-waterfall-tick");
+        child.setAttribute("time", String(tick.time));
+        child.textContent = tick.label;
+        generated.add(child);
+        return child;
+      })
+    );
+  }
+  for (const tick of el.querySelectorAll("ui-waterfall-tick")) {
+    if (tick.closest(owner) !== el || generated.has(tick) || !labeledTicks.has(tick) && tick.childNodes.length) {
+      continue;
+    }
+    labeledTicks.add(tick);
+    const { label } = partState(
+      instance.part("tick", { time: Number(tick.getAttribute("time")) })
+    );
+    if (tick.textContent !== label) {
+      tick.textContent = label;
+    }
+  }
+}
+function defineWaterfallElements() {
+  createParts(waterfall, {
+    root: {
+      tag: owner,
+      display: "block",
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => api.setValue(value || null)
+        },
+        expanded: {
+          get: (api) => api.getExpanded(),
+          set: (api, value) => api.setExpanded(
+            typeof value === "string" ? value.split(",").map((item) => item.trim()).filter(Boolean) : value ?? []
+          )
+        }
+      },
+      api: [
+        "getValue",
+        "setValue",
+        "getExpanded",
+        "setExpanded",
+        "isExpanded",
+        "expand",
+        "collapse",
+        "toggle",
+        "expandAll",
+        "collapseAll",
+        "reveal",
+        "focus"
+      ],
+      // Runs again whenever a property like `items` or `range` is set, so
+      // rows are rebuilt only for new `items`.
+      render(el, instance) {
+        const api = instance.api;
+        const items = api.internal.items();
+        if (renderedItems.get(el) !== items) {
+          renderedItems.set(el, items);
+          for (const child of Array.from(el.children)) {
+            if (generated.has(child) && child.localName === "ui-waterfall-row") {
+              child.remove();
+            }
+          }
+          if (!el.querySelector(":scope > ui-waterfall-row")) {
+            el.append(...renderRows(api, templateOf(el)));
+          }
+        }
+        const update = () => renderTicks(el, instance);
+        update();
+        const observer = new MutationObserver(update);
+        observer.observe(el, {
+          subtree: true,
+          attributeFilter: ["max-ticks", "time"]
+        });
+        const unsubscribe = instance.subscribe(update);
+        return () => {
+          observer.disconnect();
+          unsubscribe();
+        };
+      }
+    },
+    "header-row": { tag: "ui-waterfall-header-row", display: "block" },
+    "column-header": { tag: "ui-waterfall-column-header", display: "block" },
+    axis: { tag: "ui-waterfall-axis", display: "block" },
+    tick: "ui-waterfall-tick",
+    mark: "ui-waterfall-mark",
+    row: { tag: "ui-waterfall-row", display: "block" },
+    "row-header": { tag: "ui-waterfall-row-header", display: "block" },
+    indicator: "ui-waterfall-indicator",
+    cell: { tag: "ui-waterfall-cell", display: "block" },
+    bar: { tag: "ui-waterfall-bar", display: "block" }
+  });
+}
+export {
+  defineWaterfallElements
+};

package/docs/README.md

@@ -0,0 +1,89 @@
+# @ui-sdk/web docs
+
+The ui-sdk docs for Web Components, as Markdown. Every page here is generated from the same source as the docs site, for the release this package came from.
+
+Start with [llms.txt](./llms.txt): how the components fit together, then an index of every component, in one file for an agent's context. Each page below has the rest.
+
+## Core and Agents
+
+- [Core](./core.md): Give your agents the behaviors to build headless and accessible components, with keyboard, focus and screen reader support built in. Every Core page in one file.
+- [Agents](./agents.md): ui-sdk gives agents the building blocks to create components and the tools to use them. Every Agents page in one file.
+
+## Components
+
+- [Accordion](./components/accordion.md): Show and hide sections of content from their headings.
+- [Alert Dialog](./components/alert-dialog.md): Ask someone to confirm an action before you continue.
+- [Autocomplete](./components/autocomplete.md): Suggest text while someone types, without limiting what they can enter.
+- [Avatar](./components/avatar.md): Show an image with a fallback while it loads or if it fails.
+- [Button](./components/button.md): Run an action, show that it's working, and keep it reachable when disabled.
+- [Calendar](./components/calendar.md): Choose one date, several dates, or a range from a month grid.
+- [Carousel](./components/carousel.md): Page through slides with native scrolling, keyboard controls, and optional rotation.
+- [Checkbox](./components/checkbox.md): Choose one or more options, individually or as a group.
+- [Collapsible](./components/collapsible.md): Show and hide a panel, preserve its contents, and animate its height.
+- [Color Picker](./components/color-picker.md): Choose a color by dragging across an area and along sliders, typing any CSS color, or picking a preset.
+- [Combobox](./components/combobox.md): Search a list of options and choose one or several values.
+- [Command](./components/command.md): Search commands, run actions, and open pages of more choices.
+- [Date Input](./components/date-input.md): Type a date one part at a time, in the order your user's language writes it.
+- [Date Picker](./components/date-picker.md): Type a date or choose one from a calendar, with support for ranges and forms.
+- [Dialog](./components/dialog.md): Open a focused task over the page.
+- [Drawer](./components/drawer.md): A sheet you can open, drag, and resize from an edge of the screen.
+- [Field](./components/field.md): Connect a form control to its label, description, and validation errors.
+- [File Input](./components/file-input.md): Choose, drop, or paste files, validate them, and submit them with a form.
+- [Hover Card](./components/hover-card.md): Preview a link on hover or keyboard focus while keeping its normal navigation.
+- [Image Cropper](./components/image-cropper.md): Choose the part of an image to keep by moving and resizing a selection, or by panning and zooming the image under it.
+- [Input](./components/input.md): Enter text, add a clear button, and connect the value to your form or state.
+- [Label](./components/label.md): Name any control with a label, and let a press on the label reach it.
+- [Listbox](./components/listbox.md): Choose one or several options from an always-visible list.
+- [Menu](./components/menu.md): Choose actions and settings from a button or a context menu.
+- [Menubar](./components/menubar.md): Move between an application’s menus with one tab stop.
+- [Meter](./components/meter.md): Show a measurement within a known range, such as storage used or an account quota.
+- [Navigation Menu](./components/navigation-menu.md): Groups site links into panels that open from a row of triggers.
+- [Number Input](./components/number-input.md): Enter numbers, step through values, and format them for a locale.
+- [OTP Input](./components/otp-input.md): Enter a one-time code with support for pasting, autofill, and native form validation.
+- [Pagination](./components/pagination.md): Navigate pages with buttons, links, or your router.
+- [Password Input](./components/password-input.md): Enter a password, show or hide it, and use it in a native form.
+- [Popover](./components/popover.md): Edit or explore something beside its trigger.
+- [Preferences](./components/preferences.md): Apply user preferences to data attributes so your styles can follow them.
+- [Progress](./components/progress.md): Show a task’s progress, or an indeterminate state while its progress is unknown.
+- [Radio](./components/radio.md): Choose one option, move the selection with arrow keys, and submit it with a form.
+- [Rating](./components/rating.md): Pick a score from a row of stars, whole or half, with a preview as the pointer moves over them.
+- [Resizable](./components/resizable.md): Resize, collapse, and save panel layouts with pointer and keyboard controls.
+- [Scroll Area](./components/scroll-area.md): Add styled scrollbars, edge indicators, and follow-to-end behavior to native scrolling.
+- [Segmented Control](./components/segmented-control.md): Pick one of a few options from a row of buttons, with an indicator that slides to the choice.
+- [Select](./components/select.md): Choose one value or several from a popup list.
+- [Separator](./components/separator.md): Divide groups of content with a horizontal or vertical line.
+- [Slider](./components/slider.md): Adjust a number or a range with draggable thumbs and keyboard controls.
+- [Switch](./components/switch.md): Turn a setting on or off.
+- [Tabs](./components/tabs.md): Switch between related panels with one tab selected at a time.
+- [Textarea](./components/textarea.md): Enter multiple lines of text, grow the field as you type, and connect it to a form.
+- [Time Input](./components/time-input.md): Type a time one part at a time, on the clock your user's language uses.
+- [Timeline](./components/timeline.md): Show dated events in order, like an activity feed, a changelog or an order's progress, with arrow keys between them.
+- [Toast](./components/toast.md): Show notifications with actions, timed dismissal, and screen reader announcements.
+- [Toggle](./components/toggle.md): Keep a button pressed, or group toggles with a shared value and arrow-key navigation.
+- [Token Input](./components/token-input.md): Mix editable text with tokens for files, people, tags, and other references.
+- [Toolbar](./components/toolbar.md): Give buttons, toggles, menus and fields one tab stop with arrow-key navigation.
+- [Tooltip](./components/tooltip.md): Name a control or add a short hint on hover and keyboard focus.
+- [Tree](./components/tree.md): Browse a hierarchy of files, pages, or choices with expandable branches.
+- [Trigger Menu](./components/trigger-menu.md): "Opens suggestions at the caret when you type a trigger such as @, /, or #."
+- [Waterfall](./components/waterfall.md): Show a trace or a page's requests as bars on a shared time axis, with spans that expand to show what they started.
+
+## Utilities
+
+- [Async Options](./utilities/async-options.md): Load search results, cancel stale requests, and fetch the next page.
+- [Shortcuts](./utilities/shortcuts.md): Register keyboard shortcuts and show the right keys for the user's platform.
+
+## Framework Guides
+
+- [Introduction](./introduction.md): Use unstyled custom elements with keyboard, focus, and screen reader support built in.
+- [Installation](./installation.md): Install UI SDK and register its custom elements.
+- [First Component](./first-component.md): Add a component to your page and style its state.
+- [Parts and Composition](./parts-and-composition.md): Put a component's parts together and choose the elements they bind.
+- [State and Events](./state-and-events.md): Set initial state, change properties, and respond to DOM events.
+- [Styling and Animation](./styling-and-animation.md): Style the rendered elements and add entry and exit transitions.
+- [Controllers](./controllers.md): Read and change a component from outside its parts.
+- [Popups](./popups.md): Place popup content, control dismissal, and choose its container.
+- [Lists and Menus](./lists-and-menus.md): Supply options as data, load them from a server, and define menu actions.
+- [Forms](./forms.md): Submit custom element values, label controls, and show validation errors.
+- [Server Rendering](./server-rendering.md): Send HTML from the server and upgrade custom elements in the browser.
+- [Rendering Primitives](./rendering.md): Turn a Core primitive into custom elements with createParts.
+- [Custom Parts](./custom-parts.md): Choose a binding target and expose the state of a custom element.