@threadlabs/looma 0.1.0

package/theme-dark.css

@@ -0,0 +1,59 @@
+@layer base {
+  @media (prefers-color-scheme: dark) {
+    :root:not([data-theme]) {
+      color-scheme: dark;
+      --ui-surface-canvas: #1a1a1a;
+      --ui-surface-default: #1a1a1a;
+      --ui-surface-muted: #242424;
+      --ui-surface-subtle: #2e2e2e;
+      --ui-surface-elevated: #2a2a2a;
+
+      --ui-text-primary: #f0f0ec;
+      --ui-text-secondary: #a0a09c;
+      --ui-text-muted: #6a6a66;
+      --ui-text-on-accent: #ffffff;
+
+      --ui-border-subtle: #2b2b28;
+      --ui-border-default: #333330;
+      --ui-border-strong: #4a4a46;
+
+      --ui-danger-solid: #ff6644;
+      --ui-danger-hover: #ff7755;
+      --ui-danger-soft: #2d1a16;
+      --ui-success-solid: #33cc66;
+      --ui-success-soft: #162a1f;
+      --ui-warning-solid: #ffaa22;
+      --ui-warning-soft: #2d2410;
+      --ui-info-solid: #4d9fff;
+      --ui-info-soft: #1a2a3d;
+    }
+  }
+
+  [data-theme="dark"] {
+    color-scheme: dark;
+    --ui-surface-canvas: #1a1a1a;
+    --ui-surface-default: #1a1a1a;
+    --ui-surface-muted: #242424;
+    --ui-surface-subtle: #2e2e2e;
+    --ui-surface-elevated: #2a2a2a;
+
+    --ui-text-primary: #f0f0ec;
+    --ui-text-secondary: #a0a09c;
+    --ui-text-muted: #6a6a66;
+    --ui-text-on-accent: #ffffff;
+
+    --ui-border-subtle: #2b2b28;
+    --ui-border-default: #333330;
+    --ui-border-strong: #4a4a46;
+
+    --ui-danger-solid: #ff6644;
+    --ui-danger-hover: #ff7755;
+    --ui-danger-soft: #2d1a16;
+    --ui-success-solid: #33cc66;
+    --ui-success-soft: #162a1f;
+    --ui-warning-solid: #ffaa22;
+    --ui-warning-soft: #2d2410;
+    --ui-info-solid: #4d9fff;
+    --ui-info-soft: #1a2a3d;
+  }
+}

package/theme-high-contrast.css

@@ -0,0 +1,21 @@
+@layer base {
+  @media (prefers-contrast: more) {
+    :root:not([data-contrast]) {
+      --ui-text-primary: #000000;
+      --ui-text-secondary: #111111;
+      --ui-text-muted: #222222;
+      --ui-border-default: #000000;
+      --ui-border-strong: #000000;
+      --ui-focus-ring: #0000ff;
+    }
+  }
+
+  [data-contrast="high"] {
+    --ui-text-primary: #000000;
+    --ui-text-secondary: #111111;
+    --ui-text-muted: #222222;
+    --ui-border-default: #000000;
+    --ui-border-strong: #000000;
+    --ui-focus-ring: #0000ff;
+  }
+}

package/theme-light.css

@@ -0,0 +1,30 @@
+@layer base {
+  :root,
+  [data-theme="light"] {
+    color-scheme: light;
+    --ui-surface-canvas: #ffffff;
+    --ui-surface-default: #ffffff;
+    --ui-surface-muted: #f8f8f6;
+    --ui-surface-subtle: #f0f0ec;
+    --ui-surface-elevated: #ffffff;
+
+    --ui-text-primary: #1a1a1a;
+    --ui-text-secondary: #5c5c5c;
+    --ui-text-muted: #9b9b9b;
+    --ui-text-on-accent: #ffffff;
+
+    --ui-border-subtle: #ecece8;
+    --ui-border-default: #e4e4e0;
+    --ui-border-strong: #c8c8c4;
+
+    --ui-danger-solid: #cc3300;
+    --ui-danger-hover: #a32900;
+    --ui-danger-soft: #fdf0ed;
+    --ui-success-solid: #007a33;
+    --ui-success-soft: #edf7f1;
+    --ui-warning-solid: #cc8800;
+    --ui-warning-soft: #fdf7e6;
+    --ui-info-solid: #0066cc;
+    --ui-info-soft: #e8f0fb;
+  }
+}

package/tokens.css

@@ -0,0 +1,148 @@
+@layer tokens {
+  :root {
+    --ui-font-stack-system: system-ui, sans-serif;
+    --ui-font-stack-neo-grotesque:
+      Inter,
+      Roboto,
+      "Helvetica Neue",
+      "Arial Nova",
+      "Nimbus Sans",
+      Arial,
+      sans-serif;
+    --ui-font-stack-humanist:
+      Seravek,
+      "Gill Sans Nova",
+      Ubuntu,
+      Calibri,
+      "DejaVu Sans",
+      source-sans-pro,
+      sans-serif;
+    --ui-font-stack-rounded:
+      ui-rounded,
+      "Hiragino Maru Gothic ProN",
+      Quicksand,
+      Comfortaa,
+      Manjari,
+      "Arial Rounded MT",
+      "Arial Rounded MT Bold",
+      Calibri,
+      source-sans-pro,
+      sans-serif;
+    --ui-font-family-sans: var(--ui-font-stack-neo-grotesque);
+    --ui-font-size-xs: 0.75rem;
+    --ui-font-size-sm: 0.875rem;
+    --ui-font-size-md: 1rem;
+    --ui-font-size-lg: 1.125rem;
+    --ui-font-size-xl: 1.25rem;
+    --ui-font-size-2xl: 1.5rem;
+    --ui-line-height-tight: 1.2;
+    --ui-line-height-md: 1.4;
+    --ui-line-height-relaxed: 1.6;
+
+    --ui-font-normal: 400;
+    --ui-font-medium: 500;
+    --ui-font-semibold: 600;
+    --ui-font-bold: 700;
+
+    --ui-space-1: 0.25rem;
+    --ui-space-2: 0.5rem;
+    --ui-space-3: 0.75rem;
+    --ui-space-4: 1rem;
+    --ui-space-5: 1.5rem;
+    --ui-space-6: 2rem;
+    --ui-space-7: 2.5rem;
+    --ui-space-8: 3rem;
+
+    --ui-radius-1: 0.25rem;
+    --ui-radius-2: 0.5rem;
+    --ui-radius-3: 0.75rem;
+    --ui-radius-4: 1rem;
+    --ui-radius-dialog: 1rem;
+    --ui-radius-round: 999px;
+
+    --ui-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+    --ui-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+    --ui-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
+    --ui-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
+    --ui-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.08);
+    --ui-shadow-dialog: var(--ui-shadow-xl);
+    --ui-overlay-backdrop: rgba(0, 0, 0, 0.4);
+
+    --ui-motion-fast: 120ms;
+    --ui-motion-base: 180ms;
+    --ui-motion-ease: cubic-bezier(0.2, 0, 0.2, 1);
+
+    --ui-surface-canvas: #ffffff;
+    --ui-surface-default: #ffffff;
+    --ui-surface-muted: #f8f8f6;
+    --ui-surface-subtle: #f0f0ec;
+    --ui-surface-elevated: #ffffff;
+
+    --ui-text-primary: #1a1a1a;
+    --ui-text-secondary: #5c5c5c;
+    --ui-text-muted: #9b9b9b;
+    --ui-text-on-accent: #ffffff;
+
+    --ui-border-subtle: #ecece8;
+    --ui-border-default: #e4e4e0;
+    --ui-border-strong: #c8c8c4;
+    --ui-focus-ring: #0066cc;
+
+    --ui-accent-solid: #0066cc;
+    --ui-accent-hover: #0052a3;
+    --ui-accent-active: #003d7a;
+    --ui-accent-soft: #e8f0fb;
+
+    --ui-danger-solid: #cc3300;
+    --ui-danger-hover: #a32900;
+    --ui-danger-soft: #fdf0ed;
+    --ui-success-solid: #007a33;
+    --ui-success-soft: #edf7f1;
+    --ui-warning-solid: #cc8800;
+    --ui-warning-soft: #fdf7e6;
+    --ui-info-solid: #0066cc;
+    --ui-info-soft: #e8f0fb;
+  }
+
+  @supports (color: oklch(0.5 0.1 240)) {
+    :root {
+      --ui-surface-canvas: oklch(0.99 0.01 250);
+      --ui-surface-default: oklch(1 0 0);
+      --ui-surface-muted: oklch(0.97 0.01 250);
+      --ui-surface-subtle: oklch(0.95 0.01 250);
+      --ui-surface-elevated: oklch(1 0 0);
+
+      --ui-text-primary: oklch(0.23 0.02 260);
+      --ui-text-secondary: oklch(0.36 0.02 260);
+      --ui-text-muted: oklch(0.5 0.02 260);
+      --ui-text-on-accent: oklch(0.99 0.01 250);
+
+      --ui-border-subtle: oklch(0.9 0.01 250);
+      --ui-border-default: oklch(0.84 0.01 250);
+      --ui-border-strong: oklch(0.7 0.02 250);
+      --ui-focus-ring: oklch(0.62 0.18 250);
+
+      --ui-accent-solid: oklch(0.62 0.18 250);
+      --ui-accent-hover: oklch(0.57 0.2 250);
+      --ui-accent-active: oklch(0.52 0.2 250);
+      --ui-accent-soft: oklch(0.95 0.03 250);
+
+      --ui-danger-solid: oklch(0.55 0.2 25);
+      --ui-danger-hover: oklch(0.5 0.2 25);
+      --ui-danger-soft: oklch(0.97 0.02 25);
+      --ui-success-solid: oklch(0.5 0.15 145);
+      --ui-success-soft: oklch(0.96 0.03 145);
+      --ui-warning-solid: oklch(0.7 0.15 85);
+      --ui-warning-soft: oklch(0.97 0.04 85);
+      --ui-info-solid: oklch(0.62 0.18 250);
+      --ui-info-soft: oklch(0.95 0.03 250);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :root {
+      --ui-motion-fast: 0ms;
+      --ui-motion-base: 0ms;
+    }
+  }
+}

package/vue/chunk-J4UBEIIL.js

@@ -0,0 +1,83 @@
+// src/adapter.ts
+import {
+  cloneVNode,
+  defineComponent,
+  h,
+  isVNode,
+  shallowRef,
+  watchEffect
+} from "vue";
+var BASE_EVENT_BINDINGS = [
+  ["open", "onOpen"],
+  ["close", "onClose"],
+  ["select", "onSelect"],
+  ["change", "onChange"],
+  ["input", "onInput"],
+  ["dismiss", "onDismiss"]
+];
+function toHTMLElement(value) {
+  if (!value) return null;
+  if (value instanceof HTMLElement) return value;
+  return null;
+}
+function createAdapterComponent(tagName, displayName, additionalEventBindings = []) {
+  const eventBindings = [...BASE_EVENT_BINDINGS, ...additionalEventBindings];
+  const callbackAttrs = new Set(eventBindings.map(([, callbackAttr]) => callbackAttr));
+  return defineComponent({
+    name: displayName,
+    inheritAttrs: false,
+    setup(_props, { attrs, slots }) {
+      const elementRef = shallowRef(null);
+      watchEffect((onCleanup) => {
+        const element = elementRef.value;
+        if (!element) return;
+        const adapterAttrs = attrs;
+        const handlers = eventBindings.map(
+          ([eventName, callbackAttr]) => {
+            const callback = adapterAttrs[callbackAttr];
+            return [
+              eventName,
+              typeof callback === "function" ? (event) => callback(event.detail) : void 0
+            ];
+          }
+        );
+        for (const [eventName, handler] of handlers) {
+          if (handler) element.addEventListener(eventName, handler);
+        }
+        onCleanup(() => {
+          for (const [eventName, handler] of handlers) {
+            if (handler) element.removeEventListener(eventName, handler);
+          }
+        });
+      });
+      return () => {
+        const forwardedAttrs = Object.fromEntries(
+          Object.entries(attrs).filter(([name]) => !callbackAttrs.has(name))
+        );
+        const children = Object.entries(slots).flatMap(([slotName, slotFn]) => {
+          if (!slotFn) return [];
+          return slotFn().map((node) => {
+            if (slotName === "default") return node;
+            if (isVNode(node)) return cloneVNode(node, { slot: slotName });
+            return h("span", { slot: slotName }, node);
+          });
+        });
+        return h(
+          tagName,
+          {
+            ...forwardedAttrs,
+            ref: (value) => {
+              elementRef.value = toHTMLElement(value);
+            }
+          },
+          children.length > 0 ? children : void 0
+        );
+      };
+    }
+  });
+}
+
+export {
+  toHTMLElement,
+  createAdapterComponent
+};

package/vue/editor/index.d.ts

@@ -0,0 +1,89 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import { SlashMenuItem, SlashMenuAnchorRect } from '@threadlabs/looma/editor';
+export * from '@threadlabs/looma/editor';
+import { TableContextMenuActionEventDetail, InsertTableEventDetail, TableOverlayActionEventDetail, SlashMenuHighlightEventDetail, SlashMenuSelectEventDetail } from '@threadlabs/looma/editor/ui';
+
+interface VueEditorAdapterEventMap {
+    tableAction: TableContextMenuActionEventDetail;
+    insertTable: InsertTableEventDetail;
+    tableOverlayAction: TableOverlayActionEventDetail;
+    slashMenuHighlight: SlashMenuHighlightEventDetail;
+    slashMenuSelect: SlashMenuSelectEventDetail;
+}
+declare const EditorSlashMenu: vue.DefineComponent<vue.ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    query: {
+        type: StringConstructor;
+        default: string;
+    };
+    items: {
+        type: PropType<SlashMenuItem[]>;
+        default: () => never[];
+    };
+    selectedIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    anchorRect: {
+        type: PropType<SlashMenuAnchorRect | null>;
+        default: null;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    open: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    query: {
+        type: StringConstructor;
+        default: string;
+    };
+    items: {
+        type: PropType<SlashMenuItem[]>;
+        default: () => never[];
+    };
+    selectedIndex: {
+        type: NumberConstructor;
+        default: number;
+    };
+    anchorRect: {
+        type: PropType<SlashMenuAnchorRect | null>;
+        default: null;
+    };
+}>> & Readonly<{}>, {
+    open: boolean;
+    query: string;
+    items: SlashMenuItem[];
+    selectedIndex: number;
+    anchorRect: SlashMenuAnchorRect | null;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const EditorToolbar: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const EditorTableContextMenu: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const EditorTableToolbar: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const EditorInsertTableGrid: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const EditorTableOverlay: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+declare const EDITOR_ADAPTER_COMPONENT_TAG_MAP: {
+    readonly EditorToolbar: "ui-editor-toolbar";
+    readonly EditorSlashMenu: "ui-editor-slash-menu";
+    readonly EditorTableContextMenu: "ui-editor-table-context-menu";
+    readonly EditorTableToolbar: "ui-editor-table-toolbar";
+    readonly EditorInsertTableGrid: "ui-editor-insert-table-grid";
+    readonly EditorTableOverlay: "ui-editor-table-overlay";
+};
+
+export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorInsertTableGrid, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, type VueEditorAdapterEventMap };

package/vue/editor/index.js

@@ -0,0 +1,125 @@
+import {
+  createAdapterComponent,
+  toHTMLElement
+} from "../chunk-J4UBEIIL.js";
+
+// src/editor/index.ts
+import "@threadlabs/looma/editor";
+export * from "@threadlabs/looma/editor";
+import {
+  defineComponent,
+  h,
+  shallowRef,
+  watchEffect
+} from "vue";
+var EDITOR_EVENT_BINDINGS = [
+  ["looma-editor-table-action", "onTableAction"],
+  ["looma-editor-insert-table", "onInsertTable"],
+  ["looma-editor-table-overlay-action", "onTableOverlayAction"]
+];
+var EditorSlashMenu = defineComponent({
+  name: "EditorSlashMenu",
+  inheritAttrs: false,
+  props: {
+    open: { type: Boolean, default: false },
+    query: { type: String, default: "" },
+    items: { type: Array, default: () => [] },
+    selectedIndex: { type: Number, default: 0 },
+    anchorRect: { type: Object, default: null }
+  },
+  setup(props, { attrs }) {
+    const elementRef = shallowRef(null);
+    watchEffect(() => {
+      const element = elementRef.value;
+      if (!element) return;
+      if (element.open !== props.open) element.open = props.open;
+      if (element.query !== props.query) element.query = props.query;
+      if (element.items !== props.items) element.items = props.items;
+      if (element.selectedIndex !== props.selectedIndex) {
+        element.selectedIndex = props.selectedIndex;
+      }
+      if (element.anchorRect !== props.anchorRect) element.anchorRect = props.anchorRect;
+    });
+    watchEffect((onCleanup) => {
+      const element = elementRef.value;
+      if (!element) return;
+      const callbackAttrs = attrs;
+      const handlers = [
+        [
+          "looma-editor-slash-menu-highlight",
+          typeof callbackAttrs.onSlashMenuHighlight === "function" ? (event) => callbackAttrs.onSlashMenuHighlight?.(
+            event.detail
+          ) : void 0
+        ],
+        [
+          "looma-editor-slash-menu-select",
+          typeof callbackAttrs.onSlashMenuSelect === "function" ? (event) => callbackAttrs.onSlashMenuSelect?.(
+            event.detail
+          ) : void 0
+        ]
+      ];
+      for (const [eventName, handler] of handlers) {
+        if (handler) element.addEventListener(eventName, handler);
+      }
+      onCleanup(() => {
+        for (const [eventName, handler] of handlers) {
+          if (handler) element.removeEventListener(eventName, handler);
+        }
+      });
+    });
+    return () => {
+      const callbackAttrs = attrs;
+      const { onSlashMenuHighlight, onSlashMenuSelect, ...forwardedAttrs } = callbackAttrs;
+      void onSlashMenuHighlight;
+      void onSlashMenuSelect;
+      return h("ui-editor-slash-menu", {
+        ...forwardedAttrs,
+        ref: (value) => {
+          elementRef.value = toHTMLElement(value);
+        }
+      });
+    };
+  }
+});
+var EditorToolbar = createAdapterComponent(
+  "ui-editor-toolbar",
+  "EditorToolbar",
+  EDITOR_EVENT_BINDINGS
+);
+var EditorTableContextMenu = createAdapterComponent(
+  "ui-editor-table-context-menu",
+  "EditorTableContextMenu",
+  EDITOR_EVENT_BINDINGS
+);
+var EditorTableToolbar = createAdapterComponent(
+  "ui-editor-table-toolbar",
+  "EditorTableToolbar",
+  EDITOR_EVENT_BINDINGS
+);
+var EditorInsertTableGrid = createAdapterComponent(
+  "ui-editor-insert-table-grid",
+  "EditorInsertTableGrid",
+  EDITOR_EVENT_BINDINGS
+);
+var EditorTableOverlay = createAdapterComponent(
+  "ui-editor-table-overlay",
+  "EditorTableOverlay",
+  EDITOR_EVENT_BINDINGS
+);
+var EDITOR_ADAPTER_COMPONENT_TAG_MAP = {
+  EditorToolbar: "ui-editor-toolbar",
+  EditorSlashMenu: "ui-editor-slash-menu",
+  EditorTableContextMenu: "ui-editor-table-context-menu",
+  EditorTableToolbar: "ui-editor-table-toolbar",
+  EditorInsertTableGrid: "ui-editor-insert-table-grid",
+  EditorTableOverlay: "ui-editor-table-overlay"
+};
+export {
+  EDITOR_ADAPTER_COMPONENT_TAG_MAP,
+  EditorInsertTableGrid,
+  EditorSlashMenu,
+  EditorTableContextMenu,
+  EditorTableOverlay,
+  EditorTableToolbar,
+  EditorToolbar
+};