@threadlabs/looma 0.1.5 → 0.1.7

package/editor.css

@@ -3,6 +3,335 @@
  * Tables, context menu, insert-table grid, slash menu. Use with ProseMirror/Tiptap content.
  */
 
+/* Turnkey editor */
+.looma-editor {
+  position: relative;
+  min-width: 0;
+  color: var(--ui-text-primary);
+  font-family: var(--ui-font-family-sans);
+}
+
+.looma-editor .ProseMirror {
+  min-height: var(--ui-editor-content-min-height, 300px);
+  padding:
+    var(--ui-editor-content-padding-block, var(--ui-space-4))
+    var(--ui-editor-content-padding-inline, var(--ui-space-6));
+  outline: none;
+  color: var(--ui-editor-content-color, var(--ui-text-primary));
+  caret-color: var(--ui-editor-caret-color, var(--ui-accent-solid));
+  font-family: var(--ui-editor-font-family, var(--ui-font-family-sans));
+  font-size: var(--ui-editor-font-size, var(--ui-font-size-md));
+  line-height: var(--ui-editor-line-height, var(--ui-line-height-relaxed));
+}
+
+@media (max-width: 767px) {
+  .looma-editor .ProseMirror {
+    padding-bottom: var(--ui-editor-mobile-bottom-space, 80px);
+  }
+}
+
+.looma-editor .ProseMirror p {
+  margin: 0 0 var(--ui-editor-paragraph-gap, var(--ui-space-3));
+}
+
+.looma-editor .ProseMirror h1,
+.looma-editor .ProseMirror h2,
+.looma-editor .ProseMirror h3 {
+  color: inherit;
+  line-height: var(--ui-line-height-tight);
+}
+
+.looma-editor .ProseMirror h1 {
+  margin: var(--ui-space-6) 0 var(--ui-space-3);
+  font-size: var(--ui-font-size-2xl);
+  font-weight: var(--ui-font-bold);
+}
+
+.looma-editor .ProseMirror h2 {
+  margin: var(--ui-space-5) 0 var(--ui-space-2);
+  font-size: var(--ui-font-size-xl);
+  font-weight: var(--ui-font-semibold);
+}
+
+.looma-editor .ProseMirror h3 {
+  margin: var(--ui-space-4) 0 var(--ui-space-2);
+  font-size: var(--ui-font-size-lg);
+  font-weight: var(--ui-font-semibold);
+}
+
+.looma-editor .ProseMirror ul,
+.looma-editor .ProseMirror ol {
+  margin: 0 0 var(--ui-space-3);
+  padding-left: var(--ui-space-6);
+}
+
+.looma-editor .ProseMirror li {
+  margin-bottom: var(--ui-space-1);
+}
+
+.looma-editor .ProseMirror blockquote {
+  margin: var(--ui-space-4) 0;
+  padding-left: var(--ui-space-4);
+  border-left: 3px solid var(--ui-accent-solid);
+  color: var(--ui-text-secondary);
+  font-style: italic;
+}
+
+.looma-editor .ProseMirror pre {
+  margin: var(--ui-space-4) 0;
+  padding: var(--ui-space-4);
+  overflow-x: auto;
+  border: 1px solid var(--ui-border-default);
+  border-radius: var(--ui-radius-2);
+  background: var(--ui-surface-muted);
+  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
+  font-size: var(--ui-font-size-sm);
+}
+
+.looma-editor .ProseMirror code {
+  padding: 0.1em 0.3em;
+  border-radius: var(--ui-radius-1);
+  background: var(--ui-surface-subtle);
+  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
+  font-size: 0.9em;
+}
+
+.looma-editor .ProseMirror pre code {
+  padding: 0;
+  background: none;
+}
+
+.looma-editor .ProseMirror hr {
+  margin: var(--ui-space-6) 0;
+  border: 0;
+  border-top: 1px solid var(--ui-border-default);
+}
+
+.looma-editor .ProseMirror mark {
+  border-radius: var(--ui-radius-1);
+  background: var(--ui-editor-highlight-bg, var(--ui-warning-soft));
+}
+
+.looma-editor .ProseMirror a {
+  color: var(--ui-editor-link-color, var(--ui-accent-solid));
+  text-decoration: underline;
+}
+
+.looma-editor .ProseMirror ul[data-type="taskList"] {
+  padding-left: var(--ui-space-2);
+  list-style: none;
+}
+
+.looma-editor .ProseMirror ul[data-type="taskList"] li {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ui-space-2);
+}
+
+.looma-editor .ProseMirror ul[data-type="taskList"] li > label {
+  margin-top: 3px;
+}
+
+.looma-editor .ProseMirror ul[data-type="taskList"] input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--ui-accent-solid);
+  cursor: pointer;
+}
+
+.looma-editor .ProseMirror .is-editor-empty:first-child::before {
+  float: left;
+  height: 0;
+  color: var(--ui-text-muted);
+  content: attr(data-placeholder);
+  pointer-events: none;
+}
+
+.looma-editor .ProseMirror img {
+  max-width: 100%;
+  margin: var(--ui-space-3) 0;
+  border-radius: var(--ui-radius-2);
+}
+
+.looma-editor__file-input {
+  position: absolute;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.looma-editor__drop-overlay {
+  position: absolute;
+  z-index: var(--ui-editor-drop-overlay-z-index, 10);
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ui-space-3);
+  border: 2px dashed var(--ui-accent-solid);
+  border-radius: var(--ui-radius-2);
+  background: color-mix(in srgb, var(--ui-accent-soft) 92%, transparent);
+  color: var(--ui-accent-active);
+  font-size: var(--ui-font-size-sm);
+  font-weight: var(--ui-font-semibold);
+  pointer-events: none;
+}
+
+.looma-editor__drop-glyph {
+  font-size: var(--ui-font-size-2xl);
+}
+
+.looma-editor__toolbar-button {
+  --ui-icon-button-size-sm: var(--ui-editor-toolbar-button-size, 2rem);
+  --ui-icon-button-radius: var(--ui-editor-toolbar-button-radius, var(--ui-radius-1));
+  --ui-icon-button-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
+}
+
+.looma-editor__toolbar-glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1em;
+  color: inherit;
+  font-family: var(--ui-font-family-sans);
+  font-size: var(--ui-editor-toolbar-glyph-size, 0.75rem);
+  font-weight: var(--ui-font-semibold);
+  line-height: 1;
+}
+
+.looma-editor__table-picker-anchor {
+  display: inline-flex;
+}
+
+.looma-editor__table-picker-popover,
+.looma-editor__table-toolbar-shell,
+.looma-editor__table-menu-shell {
+  z-index: var(--ui-editor-popover-z-index, 300);
+}
+
+.looma-editor__table-picker-popover {
+  min-width: 220px;
+}
+
+.looma-editor__table-toolbar-shell,
+.looma-editor__table-menu-shell,
+.looma-editor__table-overlay-shell {
+  position: fixed;
+}
+
+.looma-editor__mobile-toolbar-shell {
+  position: fixed;
+  z-index: var(--ui-editor-mobile-toolbar-z-index, var(--ui-editor-popover-z-index, 300));
+  display: flex;
+  align-items: stretch;
+  min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
+  padding:
+    var(--ui-editor-mobile-toolbar-padding-block, 4px)
+    max(var(--ui-editor-mobile-toolbar-padding-inline, 8px), env(safe-area-inset-left));
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+  -webkit-overflow-scrolling: touch;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  background: var(--ui-editor-toolbar-bg, var(--ui-surface, #fff));
+  border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+  box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
+}
+
+.looma-editor__mobile-toolbar-shell::-webkit-scrollbar {
+  display: none;
+}
+
+.looma-editor__mobile-toolbar-shell > *,
+.looma-editor__mobile-toolbar-shell button,
+.looma-editor__mobile-toolbar-shell ui-icon-button {
+  flex: 0 0 auto;
+  scroll-snap-align: start;
+}
+
+.looma-editor__mobile-toolbar-shell ui-editor-toolbar[floating] {
+  width: 100%;
+  max-width: none;
+  min-height: 100%;
+  padding: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-inline: contain;
+  -webkit-overflow-scrolling: touch;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  box-shadow: none;
+  backdrop-filter: none;
+}
+
+.looma-editor__mobile-toolbar-shell ui-editor-toolbar[floating]::-webkit-scrollbar {
+  display: none;
+}
+
+.looma-editor__mobile-toolbar-shell .looma-editor__toolbar-button {
+  --ui-icon-button-size-sm: var(--ui-editor-toolbar-mobile-button-size, 44px);
+}
+
+.looma-editor__mobile-toolbar-back {
+  min-width: 44px;
+  min-height: 44px;
+  padding: 0 var(--ui-space-3, 12px);
+  border: 0;
+  border-radius: var(--ui-radius-md, 6px);
+  background: transparent;
+  color: var(--ui-text-secondary, #4b5563);
+  cursor: pointer;
+  font: inherit;
+  white-space: nowrap;
+}
+
+.looma-editor__mobile-toolbar-back:is(:hover, :focus-visible) {
+  background: var(--ui-surface-hover, #f3f4f6);
+  color: var(--ui-text-primary, #111827);
+}
+
+.looma-editor__mobile-toolbar-shell .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 .ui-editor-table-toolbar button {
+  min-height: 44px;
+  background: transparent;
+}
+
+.looma-editor__mobile-toolbar-shell .ui-editor-table-toolbar button[data-active="true"],
+.looma-editor__mobile-toolbar-shell .ui-editor-table-toolbar button[data-selected="true"] {
+  background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+}
+
+.looma-editor__mobile-toolbar-shell .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;
+}
+
+.looma-editor__table-overlay-shell {
+  z-index: var(--ui-editor-overlay-z-index, 299);
+  overflow: visible;
+  pointer-events: none;
+}
+
 /* Slash menu */
 ui-editor-slash-menu {
   user-select: none;
@@ -458,6 +787,36 @@ ui-editor-toolbar[floating] {
   text-align: left;
 }
 
+.ui-editor-table-toolbar__swatches {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 2px;
+}
+
+.ui-editor-table-toolbar__swatch-button {
+  gap: var(--ui-space-1, 4px);
+  justify-content: flex-start !important;
+}
+
+.ui-editor-table-toolbar__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);
+}
+
+.ui-editor-table-toolbar__swatch--default {
+  background:
+    linear-gradient(135deg, transparent 44%, var(--ui-danger, #dc2626) 46% 54%, transparent 56%),
+    var(--ui-surface, #fff);
+}
+
+.ui-editor-table-toolbar__swatch-button[data-selected="true"] {
+  background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+}
+
 /* Insert table grid */
 .ui-editor-insert-table-grid {
   padding: var(--ui-space-3, 12px);
@@ -584,6 +943,7 @@ ui-editor-toolbar[floating] {
 }
 
 .ui-editor-table-overlay__control--row {
+  pointer-events: auto;
   left: 0;
   right: 0;
   top: calc(var(--ui-editor-table-overlay-boundary-index) * 100% / var(--ui-editor-table-overlay-segments));
@@ -657,17 +1017,24 @@ ui-editor-toolbar[floating] {
 
 .ProseMirror .tableWrapper {
   max-width: 100%;
-  overflow-x: hidden;
+  overflow-x: auto;
   overflow-y: visible;
+  overscroll-behavior-inline: contain;
+  -webkit-overflow-scrolling: touch;
 }
 
 /* ProseMirror table (for when Looma editor content is rendered) */
+.ProseMirror:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
 .ProseMirror table {
   border-collapse: collapse;
   margin: 0;
-  width: 100% !important;
+  width: max-content !important;
   min-width: 100%;
-  max-width: 100% !important;
+  max-width: none !important;
   table-layout: fixed;
 }
 
@@ -681,11 +1048,15 @@ ui-editor-toolbar[floating] {
   border: 1px solid var(--ui-border, #e5e7eb);
   padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
   vertical-align: top;
-  min-width: 80px;
+  min-width: var(--ui-editor-table-cell-min-width, 112px);
   text-align: left;
   overflow-wrap: anywhere;
 }
 
+.ProseMirror :is(th, td) > p:last-child {
+  margin-bottom: 0;
+}
+
 .ProseMirror th {
   font-weight: 600;
   background: var(--ui-surface-hover, #f3f4f6);

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "type": "module",
-  "description": "Looma web components, layout primitives, editor UI, and supported Vue adapters.",
+  "description": "Looma web components, responsive layout primitives, a complete editor, and supported Vue adapters.",
   "license": "MIT",
   "author": "Threadlabs Studio",
   "repository": {
@@ -93,9 +93,13 @@
     "./vue/editor/*.js",
     "./*.css"
   ],
+  "dependencies": {
+    "lowlight": "^3.3.0"
+  },
   "peerDependencies": {
     "@tiptap/core": ">=2 <3",
     "@tiptap/pm": ">=2 <3",
+    "@tiptap/vue-3": ">=2 <3",
     "vue": "^3.5.0"
   },
   "peerDependenciesMeta": {
@@ -105,6 +109,9 @@
     "@tiptap/pm": {
       "optional": true
     },
+    "@tiptap/vue-3": {
+      "optional": true
+    },
     "vue": {
       "optional": true
     }

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
+};