@threadlabs/looma 0.1.5 → 0.1.6

package/tokens.css

@@ -102,6 +102,23 @@
     --ui-warning-soft: #fdf7e6;
     --ui-info-solid: #0066cc;
     --ui-info-soft: #e8f0fb;
+
+    /* Compatibility aliases used by the editor's public styling surface.
+       Each alias resolves through the canonical semantic token so an app only
+       needs to override the canonical Looma theme contract. */
+    --ui-surface: var(--ui-surface-elevated);
+    --ui-surface-hover: var(--ui-surface-muted);
+    --ui-text: var(--ui-text-primary);
+    --ui-border: var(--ui-border-default);
+    --ui-accent: var(--ui-accent-solid);
+    --ui-accent-subtle: var(--ui-accent-soft);
+    --ui-accent-contrast: var(--ui-text-on-accent);
+    --ui-danger: var(--ui-danger-solid);
+    --ui-radius-sm: var(--ui-radius-1);
+    --ui-radius-md: var(--ui-radius-2);
+    --ui-radius-lg: var(--ui-radius-3);
+    --ui-radius-xl: var(--ui-radius-4);
+    --ui-text-sm: var(--ui-font-size-sm);
   }
 
   @supports (color: oklch(0.5 0.1 240)) {

package/vue/chunk-KDA4RFLQ.js

@@ -0,0 +1,203 @@
+// src/index.ts
+import "@threadlabs/looma/layout";
+import "@threadlabs/looma/core";
+
+// 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,
+          {
+            "data-allow-mismatch": forwardedAttrs["data-allow-mismatch"] ?? "class",
+            ...forwardedAttrs,
+            ref: (value) => {
+              elementRef.value = toHTMLElement(value);
+            }
+          },
+          children.length > 0 ? children : void 0
+        );
+      };
+    }
+  });
+}
+
+// src/index.ts
+var Stack = createAdapterComponent("ui-stack", "Stack");
+var Inline = createAdapterComponent("ui-inline", "Inline");
+var Cluster = createAdapterComponent("ui-cluster", "Cluster");
+var Grid = createAdapterComponent("ui-grid", "Grid");
+var Center = createAdapterComponent("ui-center", "Center");
+var Switcher = createAdapterComponent("ui-switcher", "Switcher");
+var Sidebar = createAdapterComponent("ui-sidebar", "Sidebar");
+var Reel = createAdapterComponent("ui-reel", "Reel");
+var Separator = createAdapterComponent("ui-separator", "Separator");
+var Disclosure = createAdapterComponent("ui-disclosure", "Disclosure");
+var Tabs = createAdapterComponent("ui-tabs", "Tabs");
+var Dialog = createAdapterComponent("ui-dialog", "Dialog");
+var Popover = createAdapterComponent("ui-popover", "Popover");
+var Menu = createAdapterComponent("ui-menu", "Menu");
+var MenuItem = createAdapterComponent("ui-menu-item", "MenuItem");
+var ContextMenu = createAdapterComponent("ui-context-menu", "ContextMenu");
+var Button = createAdapterComponent("ui-button", "Button");
+var IconButton = createAdapterComponent("ui-icon-button", "IconButton");
+var Input = createAdapterComponent("ui-input", "Input");
+var Select = createAdapterComponent("ui-select", "Select");
+var Textarea = createAdapterComponent("ui-textarea", "Textarea");
+var FormField = createAdapterComponent("ui-form-field", "FormField");
+var Tooltip = createAdapterComponent("ui-tooltip", "Tooltip");
+var ToastRegion = createAdapterComponent("ui-toast-region", "ToastRegion");
+var Checkbox = createAdapterComponent("ui-checkbox", "Checkbox");
+var Switch = createAdapterComponent("ui-switch", "Switch");
+var RadioGroup = createAdapterComponent("ui-radio-group", "RadioGroup");
+var Radio = createAdapterComponent("ui-radio", "Radio");
+var Badge = createAdapterComponent("ui-badge", "Badge");
+var Avatar = createAdapterComponent("ui-avatar", "Avatar");
+var AvatarGroup = createAdapterComponent("ui-avatar-group", "AvatarGroup");
+var FloatingActionButton = createAdapterComponent(
+  "ui-floating-action-button",
+  "FloatingActionButton"
+);
+var SearchShell = createAdapterComponent("ui-search-shell", "SearchShell");
+var SearchResultRow = createAdapterComponent("ui-search-result-row", "SearchResultRow");
+var TopBar = createAdapterComponent("ui-top-bar", "TopBar");
+var ADAPTER_COMPONENT_TAG_MAP = {
+  Stack: "ui-stack",
+  Inline: "ui-inline",
+  Cluster: "ui-cluster",
+  Grid: "ui-grid",
+  Center: "ui-center",
+  Switcher: "ui-switcher",
+  Sidebar: "ui-sidebar",
+  Reel: "ui-reel",
+  Separator: "ui-separator",
+  Disclosure: "ui-disclosure",
+  Tabs: "ui-tabs",
+  Dialog: "ui-dialog",
+  Popover: "ui-popover",
+  Menu: "ui-menu",
+  MenuItem: "ui-menu-item",
+  ContextMenu: "ui-context-menu",
+  Button: "ui-button",
+  IconButton: "ui-icon-button",
+  Input: "ui-input",
+  Select: "ui-select",
+  Textarea: "ui-textarea",
+  FormField: "ui-form-field",
+  Tooltip: "ui-tooltip",
+  ToastRegion: "ui-toast-region",
+  Checkbox: "ui-checkbox",
+  Switch: "ui-switch",
+  RadioGroup: "ui-radio-group",
+  Radio: "ui-radio",
+  Badge: "ui-badge",
+  Avatar: "ui-avatar",
+  AvatarGroup: "ui-avatar-group",
+  FloatingActionButton: "ui-floating-action-button",
+  SearchShell: "ui-search-shell",
+  SearchResultRow: "ui-search-result-row",
+  TopBar: "ui-top-bar"
+};
+var VUE_ADAPTER_NOTE = "Thin adapter only: attrs and slots pass through to custom elements and DOM events map to typed callbacks.";
+
+export {
+  toHTMLElement,
+  createAdapterComponent,
+  Stack,
+  Inline,
+  Cluster,
+  Grid,
+  Center,
+  Switcher,
+  Sidebar,
+  Reel,
+  Separator,
+  Disclosure,
+  Tabs,
+  Dialog,
+  Popover,
+  Menu,
+  MenuItem,
+  ContextMenu,
+  Button,
+  IconButton,
+  Input,
+  Select,
+  Textarea,
+  FormField,
+  Tooltip,
+  ToastRegion,
+  Checkbox,
+  Switch,
+  RadioGroup,
+  Radio,
+  Badge,
+  Avatar,
+  AvatarGroup,
+  FloatingActionButton,
+  SearchShell,
+  SearchResultRow,
+  TopBar,
+  ADAPTER_COMPONENT_TAG_MAP,
+  VUE_ADAPTER_NOTE
+};

package/vue/editor/index.d.ts

@@ -1,8 +1,9 @@
-import * as vue from 'vue';
-import { PropType } from 'vue';
 import { SlashMenuItem, SlashMenuAnchorRect } from '@threadlabs/looma/editor';
 export * from '@threadlabs/looma/editor';
+import * as vue from 'vue';
+import { PropType } from 'vue';
 import { TableContextMenuActionEventDetail, InsertTableEventDetail, TableOverlayActionEventDetail, SlashMenuHighlightEventDetail, SlashMenuSelectEventDetail } from '@threadlabs/looma/editor/ui';
+import { JSONContent, AnyExtension, Editor } from '@tiptap/core';
 
 interface VueEditorAdapterEventMap {
     tableAction: TableContextMenuActionEventDetail;
@@ -86,4 +87,93 @@ declare const EDITOR_ADAPTER_COMPONENT_TAG_MAP: {
     readonly EditorTableOverlay: "ui-editor-table-overlay";
 };
 
-export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorInsertTableGrid, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, type VueEditorAdapterEventMap };
+interface LoomaImageUploadResult {
+    url: string;
+    alt?: string;
+}
+type LoomaImageUploader = (file: File) => Promise<string | LoomaImageUploadResult>;
+declare const LoomaEditor: vue.DefineComponent<vue.ExtractPropTypes<{
+    modelValue: {
+        type: PropType<JSONContent>;
+        default: () => {
+            [key: string]: any;
+            type?: string;
+            attrs?: Record<string, any>;
+            content?: JSONContent[];
+            marks?: {
+                type: string;
+                attrs?: Record<string, any>;
+                [key: string]: any;
+            }[];
+            text?: string;
+        };
+    };
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    extensions: {
+        type: PropType<AnyExtension[]>;
+        default: () => never[];
+    };
+    uploadImage: {
+        type: PropType<LoomaImageUploader | undefined>;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {
+    "update:modelValue": (_value: JSONContent) => true;
+    update: (_value: JSONContent) => true;
+    ready: (_editor: Editor) => true;
+    uploadError: (_error: unknown, _file: File) => true;
+}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    modelValue: {
+        type: PropType<JSONContent>;
+        default: () => {
+            [key: string]: any;
+            type?: string;
+            attrs?: Record<string, any>;
+            content?: JSONContent[];
+            marks?: {
+                type: string;
+                attrs?: Record<string, any>;
+                [key: string]: any;
+            }[];
+            text?: string;
+        };
+    };
+    editable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: StringConstructor;
+        default: string;
+    };
+    extensions: {
+        type: PropType<AnyExtension[]>;
+        default: () => never[];
+    };
+    uploadImage: {
+        type: PropType<LoomaImageUploader | undefined>;
+        default: undefined;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: (_value: JSONContent) => any;
+    onUpdate?: (_value: JSONContent) => any;
+    onReady?: (_editor: Editor) => any;
+    onUploadError?: (_error: unknown, _file: File) => any;
+}>, {
+    placeholder: string;
+    modelValue: JSONContent;
+    editable: boolean;
+    extensions: AnyExtension[];
+    uploadImage: LoomaImageUploader | undefined;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { EDITOR_ADAPTER_COMPONENT_TAG_MAP, EditorInsertTableGrid, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, LoomaEditor, type LoomaImageUploadResult, type LoomaImageUploader, type VueEditorAdapterEventMap };