@threadlabs/looma 0.4.0 → 0.5.1

package/vue/UiEditorTableToolbar.vue

@@ -0,0 +1,339 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, shallowRef, watchEffect } from "vue";
+import UiIcon from "./UiIcon.vue";
+import * as controllerModule from "../components/ui-editor-table-toolbar/ui-editor-table-toolbar.js";
+
+defineOptions({ inheritAttrs: false });
+
+const hn = {
+  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
+  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
+  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
+  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
+  shape: (items: unknown, where: ((item: any) => unknown) | undefined, sort: readonly string[], limit: unknown): any[] => {
+    let list = Array.isArray(items) ? items.slice() : [];
+    if (where !== undefined) list = list.filter((item) => hn.t(where(item)));
+    if (sort.length > 0) {
+      const field = (item: unknown, path: string): unknown => item !== null && typeof item === "object" && !Array.isArray(item)
+        ? path.split(".").reduce<unknown>((value, key) => (value as Record<string, unknown> | undefined)?.[key], item)
+        : item;
+      const compare = (a: unknown, b: unknown): number => typeof a === "number" && typeof b === "number" ? a - b : hn.text(a).localeCompare(hn.text(b));
+      list.sort((a, b) => {
+        for (const key of sort) {
+          const descending = key.startsWith("-");
+          const order = compare(field(a, descending ? key.slice(1) : key), field(b, descending ? key.slice(1) : key));
+          if (order !== 0) return descending ? -order : order;
+        }
+        return 0;
+      });
+    }
+    return typeof limit === "number" ? list.slice(0, Math.max(0, Math.trunc(limit))) : list;
+  },
+};
+
+const props = withDefaults(defineProps<{
+  actions?: readonly ("align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table")[] | null;
+  cellAlignment?: "left" | "center" | "right" | null;
+  cellBackground?: string | null;
+  open?: boolean | null;
+}>(), {
+  cellAlignment: "left",
+  cellBackground: "",
+  open: false,
+});
+const emit = defineEmits<{
+  "action": [detail: { readonly action: "align-left" | "align-center" | "align-right" | "background-none" | "background-gray" | "background-yellow" | "background-blue" | "background-green" | "background-red" | "add-row-before" | "add-row-after" | "add-column-before" | "add-column-after" | "clear-cells" | "merge-cells" | "split-cell" | "delete-row" | "delete-column" | "delete-table" }];
+}>();
+const root = ref<HTMLElement | null>(null);
+const refs: Record<string, Element | undefined> = {};
+const state_alignments = ref<any>([]);
+const state_structure = ref<any>([]);
+const state_swatches = ref<any>([]);
+const state_sections = ref<any>([]);
+const state_hasOverflow = ref<any>(false);
+const state_overflowOpen = ref<any>(false);
+
+/** Dispatches a component event to Vue listeners and, for controllers and page code, on the root. */
+const dispatch = (name: string, detail?: unknown): boolean => {
+  const declared = {"action":{"bubbles":true,"composed":true,"cancelable":false}} as Record<string, EventInit | undefined>;
+  const checks: Record<string, (detail: unknown) => boolean> = {
+    "action": (detail: unknown) => (detail !== null && typeof detail === "object" && !Array.isArray(detail) && ((detail as Record<string, unknown>)["action"] === "align-left" || (detail as Record<string, unknown>)["action"] === "align-center" || (detail as Record<string, unknown>)["action"] === "align-right" || (detail as Record<string, unknown>)["action"] === "background-none" || (detail as Record<string, unknown>)["action"] === "background-gray" || (detail as Record<string, unknown>)["action"] === "background-yellow" || (detail as Record<string, unknown>)["action"] === "background-blue" || (detail as Record<string, unknown>)["action"] === "background-green" || (detail as Record<string, unknown>)["action"] === "background-red" || (detail as Record<string, unknown>)["action"] === "add-row-before" || (detail as Record<string, unknown>)["action"] === "add-row-after" || (detail as Record<string, unknown>)["action"] === "add-column-before" || (detail as Record<string, unknown>)["action"] === "add-column-after" || (detail as Record<string, unknown>)["action"] === "clear-cells" || (detail as Record<string, unknown>)["action"] === "merge-cells" || (detail as Record<string, unknown>)["action"] === "split-cell" || (detail as Record<string, unknown>)["action"] === "delete-row" || (detail as Record<string, unknown>)["action"] === "delete-column" || (detail as Record<string, unknown>)["action"] === "delete-table") && Object.keys(detail as object).every((key) => ["action"].includes(key))),
+  };
+  if (detail !== undefined && checks[name] !== undefined && !checks[name]!(detail)) {
+    throw new TypeError(`HR002: Event \`${name}\` detail does not satisfy its declared type.`);
+  }
+  (emit as (name: string, detail: unknown) => void)(name, detail);
+  return root.value?.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, ...declared[name], detail })) ?? true;
+};
+
+function read(name: string): unknown {
+  if (name === "alignments") return state_alignments.value;
+  if (name === "structure") return state_structure.value;
+  if (name === "swatches") return state_swatches.value;
+  if (name === "sections") return state_sections.value;
+  if (name === "hasOverflow") return state_hasOverflow.value;
+  if (name === "overflowOpen") return state_overflowOpen.value;
+  return (props as Record<string, unknown>)[name];
+}
+
+function write(name: string, value: unknown): boolean {
+  if (name === "alignments") { state_alignments.value = value; return true; }
+  if (name === "structure") { state_structure.value = value; return true; }
+  if (name === "swatches") { state_swatches.value = value; return true; }
+  if (name === "sections") { state_sections.value = value; return true; }
+  if (name === "hasOverflow") { state_hasOverflow.value = value; return true; }
+  if (name === "overflowOpen") { state_overflowOpen.value = value; return true; }
+  throw new TypeError(`Only declared state is writable; \`${name}\` is not.`);
+}
+
+const stops: Array<() => void> = [];
+const host = {
+  get element(): Element { return root.value as Element; },
+  state: new Proxy({} as Record<string, unknown>, {
+    get: (_target, name) => typeof name === "string" ? read(name) : undefined,
+    set: (_target, name, value) => typeof name === "string" && write(name, value),
+  }),
+  refs: refs as Readonly<Record<string, Element>>,
+  elements: new Proxy({} as Record<string, Element | RadioNodeList | undefined>, {
+    get: (_target, name) => {
+      if (typeof name !== "string" || root.value === null) return undefined;
+      const form = root.value instanceof HTMLFormElement ? root.value : root.value.querySelector("form");
+      return form?.elements.namedItem(name) ?? root.value.querySelector(`[name="${CSS.escape(name)}"]`) ?? undefined;
+    },
+  }),
+  signal<T>(initialValue: T) {
+    const value = shallowRef(initialValue);
+    return {
+      get: (): T => value.value,
+      set: (next: T): void => { if (!Object.is(value.value, next)) value.value = next; },
+      update: (next: (current: T) => T): void => { const updated = next(value.value); if (!Object.is(value.value, updated)) value.value = updated; },
+    };
+  },
+  computed<T>(compute: () => T) {
+    const value = computed(compute);
+    return { get: (): T => value.value };
+  },
+  effect(run: () => void | (() => void)): () => void {
+    const stop = watchEffect((onCleanup) => {
+      const cleanup = run();
+      if (typeof cleanup === "function") onCleanup(cleanup);
+    }, { flush: "post" });
+    stops.push(stop);
+    return stop;
+  },
+  on(event: string, listener: EventListener): () => void {
+    const element = root.value;
+    element?.addEventListener(event, listener);
+    const off = (): void => element?.removeEventListener(event, listener);
+    stops.push(off);
+    return off;
+  },
+  dispatch,
+};
+
+let cleanup: void | (() => void);
+let ready: Promise<void> | undefined;
+onMounted(() => {
+  ready = Promise.resolve(controllerModule.default(host as never)).then((result) => { cleanup = result; });
+});
+onBeforeUnmount(() => {
+  for (const stop of stops.splice(0)) stop();
+  if (typeof cleanup === "function") cleanup();
+});
+</script>
+
+<template>
+  <div data-component="ui-editor-table-toolbar" role="toolbar" aria-label="Table actions" v-bind="$attrs" :hidden="hn.attr(!hn.t(props.open))" ref="root"><template v-if="hn.t(state_alignments)"><div class="group" role="group" aria-label="Cell alignment"><template v-for="(item, index) in hn.shape(state_alignments, undefined, [], undefined)" :key="(item)?.action"><button type="button" class="icon-button" :data-action="hn.attr((item)?.action)" :aria-label="hn.enumerated((item)?.label)" :title="hn.attr((item)?.label)" :aria-pressed="hn.enumerated((item)?.active)" :class="{ 'active': hn.t((item)?.active) }"><UiIcon :name="(item)?.action"></UiIcon></button></template></div></template><template v-if="hn.t((hn.t(state_alignments) && hn.t(state_structure)))"><div class="sep" aria-hidden="true"></div></template><template v-if="hn.t(state_structure)"><div class="group" role="group" aria-label="Table structure"><template v-for="(item, index) in hn.shape(state_structure, undefined, [], undefined)" :key="(item)?.action"><button type="button" :data-action="hn.attr((item)?.action)"><UiIcon :name="(item)?.icon"></UiIcon><span>{{ hn.text((item)?.label) }}</span></button></template></div></template><template v-if="hn.t((hn.t((hn.t(state_alignments) || hn.t(state_structure))) && hn.t(state_hasOverflow)))"><div class="sep" aria-hidden="true"></div></template><template v-if="hn.t(state_hasOverflow)"><div class="overflow"><button type="button" class="more" data-action="toggle-overflow" aria-haspopup="menu" :aria-expanded="hn.enumerated(state_overflowOpen)"><UiIcon name="table"></UiIcon><span>Table options</span><span class="chevron"><UiIcon name="chevron-down"></UiIcon></span></button><template v-if="hn.t(state_overflowOpen)"><div class="menu" role="menu" aria-label="More table actions"><template v-if="hn.t(state_swatches)"><div class="menu-section" role="none"><div class="menu-heading" role="presentation">Background</div><div class="swatches" role="group" aria-label="Cell background"><template v-for="(swatch, index) in hn.shape(state_swatches, undefined, [], undefined)" :key="(swatch)?.action"><button type="button" class="swatch-button" role="menuitemradio" :aria-checked="hn.enumerated((swatch)?.selected)" :data-action="hn.attr((swatch)?.action)" :class="{ 'selected': hn.t((swatch)?.selected) }"><span class="swatch" :class="{ 'default': hn.t(!hn.t((swatch)?.color)) }" :style="{ '--ui-editor-table-toolbar-swatch': hn.text((swatch)?.color) }"></span><span>{{ hn.text((swatch)?.label) }}</span></button></template></div></div></template><template v-for="(section, index) in hn.shape(state_sections, undefined, [], undefined)" :key="(section)?.heading"><div class="menu-section divided" role="none"><div class="menu-heading" role="presentation">{{ hn.text((section)?.heading) }}</div><template v-for="(item, index) in hn.shape((section)?.items, undefined, [], undefined)" :key="(item)?.action"><button type="button" role="menuitem" :data-action="hn.attr((item)?.action)" :class="{ 'danger': hn.t((item)?.danger) }"><UiIcon :name="(item)?.icon"></UiIcon><span>{{ hn.text((item)?.label) }}</span></button></template></div></template></div></template></div></template></div>
+</template>
+
+<style scoped>
+.looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] {
+      min-width: max-content;
+      min-height: 100%;
+      padding: 0;
+      background: transparent;
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+
+    .looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button {
+      min-height: 44px;
+      background: transparent;
+    }
+
+    .looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.active,
+    .looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] button.selected {
+      background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+    }
+
+    .looma-editor__mobile-toolbar-shell [data-component~="ui-editor-table-toolbar"] .menu {
+      top: auto;
+      right: 0;
+      bottom: calc(100% + var(--ui-space-2, 8px));
+      max-height: min(50dvh, 22rem);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+    [data-component~="ui-editor-table-toolbar"] {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ui-space-1, 4px);
+      padding: var(--ui-space-1, 4px);
+      background: color-mix(in srgb, var(--ui-surface, #fff) 94%, transparent);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: calc(var(--ui-radius-md, 6px) + 2px);
+      box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+      backdrop-filter: blur(10px);
+    }
+
+    .group {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      overflow: hidden;
+    }
+
+    .sep {
+      width: 1px;
+      align-self: stretch;
+      background: var(--ui-border, #e5e7eb);
+    }
+
+    .overflow {
+      position: relative;
+    }
+
+    [data-component~="ui-editor-table-toolbar"] button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--ui-space-1-5, 6px);
+      min-height: 32px;
+      border: 0;
+      border-radius: var(--ui-radius-sm, 4px);
+      background: transparent;
+      color: var(--ui-text-primary, #111827);
+      cursor: pointer;
+      font-size: var(--ui-text-sm, 0.875rem);
+      font-weight: 500;
+      line-height: 1;
+      padding: var(--ui-space-1-5, 6px) var(--ui-space-2, 8px);
+      white-space: nowrap;
+    }
+
+    [data-component~="ui-editor-table-toolbar"] button:hover {
+      background: var(--ui-surface-hover, #f3f4f6);
+    }
+
+    [data-component~="ui-editor-table-toolbar"] button.active {
+      background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+      color: var(--ui-accent-active, #003d7a);
+    }
+
+    .group button {
+      border-radius: var(--ui-radius-sm, 4px);
+    }
+
+    .group button + button {
+      border-left: 0;
+    }
+
+    [data-component~="ui-editor-table-toolbar"] .more {
+      border: 0;
+      border-radius: var(--ui-radius-sm, 4px);
+    }
+
+    [data-component~="ui-editor-table-toolbar"] button.danger {
+      color: var(--ui-danger, #dc2626);
+    }
+
+    [data-component~="ui-editor-table-toolbar"] {
+      --ui-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
+      --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+    }
+
+    .chevron {
+      display: inline-flex;
+      --ui-icon-size: 0.875rem;
+    }
+
+    [data-component~="ui-editor-table-toolbar"] .icon-button {
+      width: 32px;
+      padding-inline: 0;
+    }
+
+    .menu {
+      position: absolute;
+      top: calc(100% + var(--ui-space-2, 8px));
+      right: 0;
+      min-width: 12rem;
+      padding: var(--ui-space-1, 4px);
+      background: var(--ui-surface, #fff);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: var(--ui-radius-md, 6px);
+      box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      z-index: 2;
+    }
+
+    .menu-section + .menu-section {
+      margin-top: var(--ui-space-1, 4px);
+      padding-top: var(--ui-space-1, 4px);
+      border-top: 1px solid color-mix(in srgb, var(--ui-border, #e5e7eb) 80%, transparent);
+    }
+
+    .menu-heading {
+      padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
+      font-size: 0.6875rem;
+      font-weight: 700;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--ui-text-muted, #6b7280);
+    }
+
+    .menu button {
+      display: flex;
+      justify-content: flex-start;
+      width: 100%;
+      text-align: left;
+    }
+
+    .swatches {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 2px;
+    }
+
+    [data-component~="ui-editor-table-toolbar"] .swatch-button {
+      gap: var(--ui-space-1, 4px);
+      justify-content: flex-start;
+    }
+
+    .swatch {
+      width: 14px;
+      height: 14px;
+      flex: 0 0 14px;
+      border: 1px solid color-mix(in srgb, var(--ui-border, #e5e7eb) 80%, #000);
+      border-radius: 3px;
+      background: var(--ui-editor-table-toolbar-swatch);
+    }
+
+    .swatch.default {
+      background:
+        linear-gradient(135deg, transparent 44%, var(--ui-danger, #dc2626) 46% 54%, transparent 56%),
+        var(--ui-surface, #fff);
+    }
+
+    .swatch-button.selected {
+      background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+    }
+
+    [data-component~="ui-editor-table-toolbar"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiEditorToolbar.d.ts

@@ -0,0 +1,18 @@
+type __VLS_Props = {
+    floating?: boolean | null;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    floating: boolean | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiEditorToolbar.js

@@ -0,0 +1,2 @@
+import { t as UiEditorToolbar_default } from "./chunks/UiEditorToolbar.js";
+export { UiEditorToolbar_default as default };

package/vue/UiEditorToolbar.vue

@@ -0,0 +1,138 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const hn = {
+  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
+};
+
+const props = withDefaults(defineProps<{
+  floating?: boolean | null;
+}>(), {
+  floating: false,
+});
+
+/** The resolved values the styles' :host-state() rules test. */
+const hostState = computed(() => (["floating"] as const).flatMap((name) => {
+  const value = read(name);
+  const tokens: string[] = hn.t(value) ? [name] : [];
+  if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
+  return tokens;
+}).join(" "));
+
+function read(name: string): unknown {
+  return (props as Record<string, unknown>)[name];
+}
+
+</script>
+
+<template>
+  <div data-component="ui-editor-toolbar" role="toolbar" aria-label="Editor toolbar" v-bind="$attrs" :data-ui-editor-toolbar-state="hostState || undefined"><slot></slot></div>
+</template>
+
+<style scoped>
+[data-component~="ui-editor-toolbar"] {
+      position: sticky;
+      top: 0;
+      z-index: var(--ui-editor-toolbar-z-index, 10);
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: var(--ui-editor-toolbar-gap, 2px);
+      padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px);
+      min-height: var(--ui-editor-toolbar-min-height, 48px);
+      overflow-x: auto;
+      scrollbar-width: none;
+      white-space: nowrap;
+      background: var(--ui-editor-toolbar-bg, var(--ui-surface, #fff));
+      border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+    }
+
+    [data-component~="ui-editor-toolbar"]::-webkit-scrollbar {
+      display: none;
+    }
+
+    [data-component~="ui-editor-toolbar"] > :slotted(*) {
+      flex: 0 0 auto;
+    }
+
+    :slotted(.divider) {
+      width: 1px;
+      height: 20px;
+      background: var(--ui-editor-toolbar-divider, var(--ui-border, #e5e7eb));
+      flex-shrink: 0;
+      margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
+    }
+
+    [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"] {
+      position: static;
+      top: auto;
+      width: max-content;
+      max-width: min(calc(100vw - 24px), 100%);
+      min-height: auto;
+      padding: var(--ui-editor-toolbar-floating-padding, 4px);
+      overflow-x: visible;
+      background: color-mix(in srgb, var(--ui-editor-toolbar-bg, var(--ui-surface, #fff)) 96%, transparent);
+      border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+      border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg, 10px));
+      box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
+      backdrop-filter: blur(10px);
+    }
+
+    @media (max-width: 767px) {
+      [data-component~="ui-editor-toolbar"] {
+        position: fixed;
+        top: auto;
+        bottom: env(safe-area-inset-bottom);
+        left: 0;
+        right: 0;
+        min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
+        border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+        border-bottom: none;
+        box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
+      }
+
+      [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"] {
+        position: static;
+        inset: auto;
+        min-height: auto;
+        border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+        border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg, 10px));
+        box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
+      }
+    }
+
+    /* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
+    .looma-editor__sticky-toolbar-shell [data-component~="ui-editor-toolbar"] {
+      position: static;
+      min-height: var(--ui-editor-toolbar-min-height, 48px);
+      overscroll-behavior-inline: contain;
+      background: transparent;
+      border: 0;
+      box-shadow: none;
+    }
+
+    /* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
+    .looma-editor__mobile-toolbar-shell [data-component~="ui-editor-toolbar"][data-ui-editor-toolbar-state~="floating"] {
+      width: 100%;
+      max-width: none;
+      min-height: 100%;
+      padding: 0;
+      overflow-x: auto;
+      overflow-y: hidden;
+      overscroll-behavior-inline: contain;
+      scroll-snap-type: x mandatory;
+      background: transparent;
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-editor-toolbar"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiFloatingActionButton.d.ts

@@ -0,0 +1,22 @@
+type __VLS_Props = {
+    disabled?: boolean | null;
+    label?: string | null;
+    mobileOnly?: boolean | null;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string | null;
+    disabled: boolean | null;
+    mobileOnly: boolean | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/vue/UiFloatingActionButton.js

@@ -0,0 +1,2 @@
+import { t as UiFloatingActionButton_default } from "./chunks/UiFloatingActionButton.js";
+export { UiFloatingActionButton_default as default };

package/vue/UiFloatingActionButton.vue

@@ -0,0 +1,116 @@
+<!-- Generated by HTML Next 1.0.0-alpha.1 for Vue 3.5. Do not edit. -->
+<script setup lang="ts">
+import { computed } from "vue";
+
+defineOptions({ inheritAttrs: false });
+
+const hn = {
+  t: (v: unknown): boolean => v === true || (typeof v === "string" ? v.length > 0 : typeof v === "number" ? v !== 0 && v === v : Array.isArray(v) ? v.length > 0 : v !== null && typeof v === "object" ? Object.keys(v).length > 0 : false),
+  text: (v: unknown): string => v === undefined || v === null ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? "" : String(v),
+  attr: (v: unknown): any => v === undefined || v === null || v === false ? undefined : v === true ? "" : Array.isArray(v) ? v.map(hn.text).join(" ") : typeof v === "object" ? undefined : String(v),
+  enumerated: (v: unknown): any => typeof v === "boolean" ? String(v) : hn.attr(v),
+};
+
+const props = withDefaults(defineProps<{
+  disabled?: boolean | null;
+  label?: string | null;
+  mobileOnly?: boolean | null;
+}>(), {
+  disabled: false,
+  label: "",
+  mobileOnly: false,
+});
+
+/** The resolved values the styles' :host-state() rules test. */
+const hostState = computed(() => (["mobileOnly"] as const).flatMap((name) => {
+  const value = read(name);
+  const tokens: string[] = hn.t(value) ? [name] : [];
+  if (typeof value === "string" || typeof value === "number") tokens.push(`${name}=${encodeURIComponent(String(value))}`);
+  return tokens;
+}).join(" "));
+
+function read(name: string): unknown {
+  return (props as Record<string, unknown>)[name];
+}
+
+</script>
+
+<template>
+  <button data-component="ui-floating-action-button" type="button" v-bind="$attrs" :aria-label="hn.enumerated(props.label)" :disabled="hn.attr(props.disabled)" :data-ui-floating-action-button-state="hostState || undefined"><slot></slot></button>
+</template>
+
+<style scoped>
+[data-component~="ui-floating-action-button"] {
+      position: fixed;
+      inset-block-end: calc(var(--ui-floating-action-button-bottom, var(--ui-space-6, 1.5rem)) + env(safe-area-inset-bottom));
+      inset-inline-end: max(
+        var(--ui-floating-action-button-inline-end, var(--ui-space-5, 1.25rem)),
+        env(safe-area-inset-right)
+      );
+      inline-size: var(--ui-floating-action-button-size, 56px);
+      block-size: var(--ui-floating-action-button-size, 56px);
+      display: inline-flex;
+      z-index: var(--ui-floating-action-button-z-index, 100);
+    }
+
+    [data-component~="ui-floating-action-button"] {
+      appearance: none;
+      border: none;
+      border-radius: 999px;
+      margin: 0;
+      padding: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--ui-floating-action-button-bg, var(--ui-accent-solid));
+      color: var(--ui-floating-action-button-color, var(--ui-text-on-accent));
+      box-shadow: var(
+        --ui-floating-action-button-shadow,
+        0 4px 12px color-mix(in srgb, var(--ui-accent-solid) 40%, transparent)
+      );
+      cursor: pointer;
+      transition:
+        background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
+        transform var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
+        box-shadow var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease);
+    }
+
+    [data-component~="ui-floating-action-button"]:hover:enabled {
+      background: var(--ui-floating-action-button-hover-bg, var(--ui-accent-hover));
+      box-shadow: var(
+        --ui-floating-action-button-hover-shadow,
+        0 6px 16px color-mix(in srgb, var(--ui-accent-solid) 50%, transparent)
+      );
+    }
+
+    [data-component~="ui-floating-action-button"]:active:enabled {
+      transform: scale(var(--ui-floating-action-button-active-scale, 0.94));
+    }
+
+    [data-component~="ui-floating-action-button"]:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline-offset: 2px;
+    }
+
+    [data-component~="ui-floating-action-button"]:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    :slotted(svg) {
+      inline-size: var(--ui-floating-action-button-icon-size, 24px);
+      block-size: var(--ui-floating-action-button-icon-size, 24px);
+      flex-shrink: 0;
+    }
+
+    @media (min-width: 768px) {
+      [data-component~="ui-floating-action-button"][data-ui-floating-action-button-state~="mobileOnly"] {
+        display: none;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    [data-component~="ui-floating-action-button"][hidden] {
+      display: none;
+    }
+</style>

package/vue/UiFormField.d.ts

@@ -0,0 +1,28 @@
+type __VLS_Props = {
+    disabled?: boolean | null;
+    invalid?: boolean | null;
+    required?: boolean | null;
+};
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_5: {}, __VLS_7: {};
+type __VLS_Slots = {} & {
+    label?: (props: typeof __VLS_1) => any;
+} & {
+    default?: (props: typeof __VLS_3) => any;
+} & {
+    help?: (props: typeof __VLS_5) => any;
+} & {
+    error?: (props: typeof __VLS_7) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    invalid: boolean | null;
+    disabled: boolean | null;
+    required: boolean | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};