@threadlabs/looma 0.16.0 → 0.16.2

package/vue/UiIcon.vue

@@ -281,6 +281,10 @@ const shapes = computed(() =>
       tag: 'path',
       d: 'M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18',
     }],
+    tag: [{
+      tag: 'path',
+      d: 'M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z',
+    }, { tag: 'circle', cx: '7.5', cy: '7.5', r: '.5', fill: 'currentColor' }],
     trash: [
       { tag: 'path', d: 'M10 11v6' },
       { tag: 'path', d: 'M14 11v6' },

package/vue/chunks/UiBadge.js

@@ -24,6 +24,6 @@ var UiBadge_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			return openBlock(), createElementBlock("span", mergeProps({ "data-component": "ui-badge" }, _ctx.$attrs, { "data-ui-badge-state": hostState.value || void 0 }), [renderSlot(_ctx.$slots, "default", {}, void 0, true)], 16, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-3485e390"]]);
+}), [["__scopeId", "data-v-bea7b3f9"]]);
 //#endregion
 export { UiBadge_default as t };

package/vue/chunks/UiIcon.js

@@ -879,6 +879,16 @@ var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				tag: "path",
 				d: "M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"
 			}],
+			tag: [{
+				tag: "path",
+				d: "M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"
+			}, {
+				tag: "circle",
+				cx: "7.5",
+				cy: "7.5",
+				r: ".5",
+				fill: "currentColor"
+			}],
 			trash: [
 				{
 					tag: "path",
@@ -1042,6 +1052,6 @@ var UiIcon_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}), 128))]))], 16);
 		};
 	}
-}), [["__scopeId", "data-v-50d3f581"]]);
+}), [["__scopeId", "data-v-988c6eae"]]);
 //#endregion
 export { UiIcon_default as t };

package/vue/components.css

@@ -92,7 +92,7 @@
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-icon"][data-v-50d3f581] {
+[data-component~="ui-icon"][data-v-988c6eae] {
   /* Hooks do not inherit, so the svg reads the stroke from the root. A Looma component that
      sizes the icons it renders sets --_ui-default-icon-*, which the icon's own hooks override. */
   --_ui-icon-stroke-width: var(--ui-icon-stroke-width, var(--_ui-default-icon-stroke-width));
@@ -102,14 +102,14 @@
   inline-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
   block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
 }
-svg[data-v-50d3f581] {
+svg[data-v-988c6eae] {
   inline-size: 100%;
   block-size: 100%;
   stroke-width: var(--_ui-icon-stroke-width, 2);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-icon"][hidden][data-v-50d3f581] {
+[data-component~="ui-icon"][hidden][data-v-988c6eae] {
   display: none;
 }
 
@@ -314,11 +314,11 @@ svg[data-v-50d3f581] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-badge"][data-v-3485e390] {
+[data-component~="ui-badge"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-surface-subtle);
   --_badge-text: var(--ui-text-secondary);
-  /* Every tone's edge is its fill, so it is unseen until forced colors draw it. */
-  --_badge-border: var(--ui-surface-subtle);
+  /* Sit between the soft fill and its stronger theme ink. */
+  --_badge-border: color-mix(in srgb, var(--_badge-surface) 75%, var(--_badge-text) 25%);
   /* --ui-badge-color derives a wash and an ink from one colour, between the tone and the explicit
      surface, text, and border hooks. Each value is invalid, so the tone shows, while it is unset. The
      mixes keep 4.5:1 text contrast for any colour, in a light theme or a dark one. */
@@ -326,7 +326,11 @@ svg[data-v-50d3f581] {
   --_badge-color-wash: color-mix(in oklab, var(--_ui-badge-color) 15%, var(--ui-surface-default));
   --_badge-color-ink: color-mix(in oklab, var(--_ui-badge-color) 35%, var(--ui-text-primary));
   --_badge-color-surface: var(--_badge-color-wash);
-  --_badge-color-border: var(--_badge-color-wash);
+  --_badge-color-border: color-mix(
+    in srgb,
+    var(--_badge-color-wash) 75%,
+    var(--_badge-color-ink) 25%
+  );
   --_badge-color-text: var(--_badge-color-ink);
   --_badge-outline-surface: var(
     --ui-badge-surface,
@@ -354,7 +358,7 @@ svg[data-v-50d3f581] {
  * Trimming applies to block containers; an inline-block is one and, like the inline-flex it
  * replaces, still sizes to its label rather than filling its container. */
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-badge"][data-v-3485e390] {
+[data-component~="ui-badge"][data-v-bea7b3f9] {
     display: inline-block;
     min-block-size: var(--ui-badge-min-block-size, 1.5rem);
     text-align: center;
@@ -363,65 +367,60 @@ svg[data-v-50d3f581] {
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=accent"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-border: var(--ui-accent-strong-surface, var(--ui-accent-solid));
   --_badge-text: var(--ui-accent-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=danger"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-border: var(--ui-danger-strong-surface, var(--ui-danger-solid));
   --_badge-text: var(--ui-danger-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=success"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-border: var(--ui-success-strong-surface, var(--ui-success-solid));
   --_badge-text: var(--ui-success-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=warning"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-border: var(--ui-warning-strong-surface, var(--ui-warning-solid));
   --_badge-text: var(--ui-warning-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="tone=info"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-border: var(--ui-info-strong-surface, var(--ui-info-solid));
   --_badge-text: var(--ui-info-on-strong, var(--ui-text-on-accent));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=accent"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-accent-soft);
-  --_badge-border: var(--ui-accent-soft);
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=danger"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-danger-soft);
-  --_badge-border: var(--ui-danger-soft);
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=success"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-success-soft);
-  --_badge-border: var(--ui-success-soft);
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=warning"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-warning-soft);
-  --_badge-border: var(--ui-warning-soft);
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=subtle"][data-ui-badge-state~="tone=info"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-info-soft);
-  --_badge-border: var(--ui-info-soft);
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
 
 /* A solid colour fills with the ink. Its text is the page surface, mixed at 0% only so that it too is
    invalid while the hook is unset. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=solid"][data-v-bea7b3f9] {
   --_badge-color-surface: var(--_badge-color-ink);
   --_badge-color-border: var(--_badge-color-ink);
   --_badge-color-text: color-mix(in oklab, var(--_ui-badge-color) 0%, var(--ui-surface-default));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-v-bea7b3f9] {
   --_badge-surface: var(--ui-surface-default);
   --_badge-border: var(--ui-border-strong);
   --_badge-text: var(--ui-text-secondary);
@@ -429,23 +428,23 @@ svg[data-v-50d3f581] {
   --_badge-color-surface: initial;
   --_badge-color-border: var(--_badge-color-ink);
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=accent"][data-v-bea7b3f9] {
   --_badge-border: var(--ui-accent-solid);
   --_badge-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=danger"][data-v-bea7b3f9] {
   --_badge-border: var(--ui-danger-solid);
   --_badge-text: var(--ui-danger-subtle-text, var(--ui-danger-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=success"][data-v-bea7b3f9] {
   --_badge-border: var(--ui-success-solid);
   --_badge-text: var(--ui-success-subtle-text, var(--ui-success-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=warning"][data-v-bea7b3f9] {
   --_badge-border: var(--ui-warning-solid);
   --_badge-text: var(--ui-warning-subtle-text, var(--ui-warning-solid));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="tone=info"][data-v-bea7b3f9] {
   --_badge-border: var(--ui-info-solid);
   --_badge-text: var(--ui-info-subtle-text, var(--ui-info-solid));
 }
@@ -453,7 +452,7 @@ svg[data-v-50d3f581] {
 /* A tag is flat at the start and points at the end. The point is cut from the box, so it has no
    outline to follow: the edge is the fill. The end padding grows by the point's depth so the
    label never runs into it. */
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-bea7b3f9] {
   --_badge-point: var(--ui-badge-point, var(--ui-space-2));
 
   border-color: transparent;
@@ -467,7 +466,7 @@ svg[data-v-50d3f581] {
     0 100%
   );
 }
-[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-3485e390]:dir(rtl) {
+[data-component~="ui-badge"][data-ui-badge-state~="shape=tag"][data-v-bea7b3f9]:dir(rtl) {
   padding-inline-end: var(--ui-badge-padding-inline, var(--ui-space-2));
   padding-inline-start: calc(
     var(--ui-badge-padding-inline, var(--ui-space-2)) + var(--_badge-point)
@@ -477,12 +476,12 @@ svg[data-v-50d3f581] {
 
 /* The tag clips its point, including the native border. Draw the outer shape in the border
    colour and an inset inner shape in the surface colour to keep a visible diagonal edge. */
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-bea7b3f9] {
   position: relative;
   isolation: isolate;
   background: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-border)));
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-3485e390]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-bea7b3f9]::before {
   content: "";
   position: absolute;
   inset: 1px;
@@ -497,22 +496,22 @@ svg[data-v-50d3f581] {
   );
   pointer-events: none;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-3485e390]:dir(rtl)::before {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-bea7b3f9]:dir(rtl)::before {
   clip-path: polygon(var(--_badge-point) 0, 100% 0, 100% 100%, var(--_badge-point) 100%, 0 50%);
 }
 @media (forced-colors: active) {
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-3485e390] {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-bea7b3f9] {
     forced-color-adjust: none;
     background: CanvasText;
     color: CanvasText;
 }
-[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-3485e390]::before {
+[data-component~="ui-badge"][data-ui-badge-state~="variant=outline"][data-ui-badge-state~="shape=tag"][data-v-bea7b3f9]::before {
     background: Canvas;
 }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-badge"][hidden][data-v-3485e390] {
+[data-component~="ui-badge"][hidden][data-v-bea7b3f9] {
   display: none;
 }
 
@@ -8577,6 +8576,7 @@ html[data-ui-input-modality="touch"]
 
 .looma-editor__table-picker-popover,
 .looma-editor__link-popover,
+.looma-editor__chip-popover,
 .looma-editor__table-toolbar-shell,
 .looma-editor__table-menu-shell {
   z-index: var(--ui-editor-popover-z-index, 300);
@@ -8593,6 +8593,55 @@ html[data-ui-input-modality="touch"]
   inline-size: min(22rem, calc(100vw - 2rem));
 }
 
+.looma-editor__chip-popover {
+  inline-size: min(15rem, calc(100vw - 2rem));
+}
+
+.looma-editor__chip-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-space-3);
+}
+
+.looma-editor__chip-form input {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: var(--ui-control-min-block-size);
+  padding: var(--ui-space-2);
+  border: 1px solid var(--ui-control-border);
+  border-radius: var(--ui-field-radius, var(--ui-radius-md));
+  background: var(--ui-control-surface);
+  color: var(--ui-text-primary);
+  font: inherit;
+}
+
+.looma-editor__chip-colors {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--ui-space-1);
+}
+
+.looma-editor__chip-color {
+  display: grid;
+  place-items: center;
+  width: 1.65rem;
+  height: 1.65rem;
+  padding: 0;
+  border: 1px solid var(--_chip-border);
+  border-radius: 50%;
+  background: var(--_chip-surface);
+  color: var(--_chip-text);
+  font: inherit;
+  font-size: var(--ui-font-size-xs);
+  cursor: pointer;
+}
+
+.looma-editor__chip-form :is(input, button):focus-visible,
+.looma-editor .ProseMirror [data-looma-chip]:focus-visible {
+  outline: 2px solid var(--ui-focus-ring);
+  outline-offset: 2px;
+}
+
 .looma-editor__link-form,
 .looma-editor__link-form label {
   display: flex;
@@ -8741,6 +8790,59 @@ html[data-ui-input-modality="touch"]
   white-space: nowrap;
 }
 
+.looma-editor .ProseMirror [data-looma-chip],
+.looma-editor__chip-color {
+  --_chip-tone-surface: var(--ui-surface-subtle);
+  --_chip-tone-text: var(--ui-text-secondary);
+  --_chip-surface: var(--ui-editor-chip-surface, var(--_chip-tone-surface));
+  --_chip-text: var(--ui-editor-chip-text, var(--_chip-tone-text));
+  --_chip-border: var(--ui-editor-chip-border, color-mix(in srgb, var(--_chip-surface) 75%, var(--_chip-text) 25%));
+}
+
+.looma-editor .ProseMirror [data-looma-chip][data-color="blue"],
+.looma-editor__chip-color[data-color="blue"] {
+  --_chip-tone-surface: var(--ui-info-soft);
+  --_chip-tone-text: var(--ui-info-subtle-text);
+}
+
+.looma-editor .ProseMirror [data-looma-chip][data-color="green"],
+.looma-editor__chip-color[data-color="green"] {
+  --_chip-tone-surface: var(--ui-success-soft);
+  --_chip-tone-text: var(--ui-success-subtle-text);
+}
+
+.looma-editor .ProseMirror [data-looma-chip][data-color="yellow"],
+.looma-editor__chip-color[data-color="yellow"] {
+  --_chip-tone-surface: var(--ui-warning-soft);
+  --_chip-tone-text: var(--ui-warning-subtle-text);
+}
+
+.looma-editor .ProseMirror [data-looma-chip][data-color="red"],
+.looma-editor__chip-color[data-color="red"] {
+  --_chip-tone-surface: var(--ui-danger-soft);
+  --_chip-tone-text: var(--ui-danger-subtle-text);
+}
+
+.looma-editor .ProseMirror [data-looma-chip][data-color="purple"],
+.looma-editor__chip-color[data-color="purple"] {
+  --_chip-tone-surface: var(--ui-accent-soft);
+  --_chip-tone-text: var(--ui-accent-subtle-text);
+}
+
+.looma-editor .ProseMirror [data-looma-chip] {
+  padding: 0.08em 0.45em;
+  border: 1px solid var(--_chip-border);
+  border-radius: var(--ui-radius-round);
+  background: var(--_chip-surface);
+  color: var(--_chip-text);
+  font-size: var(--ui-editor-chip-font-size, var(--ui-font-size-sm));
+  font-weight: var(--ui-font-medium);
+  line-height: var(--ui-line-height-tight);
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  cursor: pointer;
+}
+
 .ProseMirror .tableWrapper {
   max-width: 100%;
   overflow-x: auto;

package/vue/editor/index.js

@@ -1,5 +1,5 @@
 import { defineComponent, h, nextTick, onBeforeUnmount, onMounted, reactive, ref, useId, watch } from "vue";
-import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, resolveTableCellAt, shouldShowTextFormattingToolbar } from "@threadlabs/looma/editor";
+import { DEFAULT_MENTION_RESULT_LIMIT, LOOMA_CHIP_COLORS, LOOMA_ICONS, createLoomaMentionExtension, createLoomaSlashCommandExtension, getActiveTableUiState, getDefaultEditorExtensions, getVisualViewportRect, handleTableAction, handleTableOverlayAction, measureTableOverlayGeometry, normalizeActiveTableColumnWidths, normalizeLoomaChipColor, resolveTableCellAt, shouldShowTextFormattingToolbar } from "@threadlabs/looma/editor";
 import { EditorInsertTableGrid, EditorMentionMenu, EditorSlashMenu, EditorTableContextMenu, EditorTableOverlay, EditorTableToolbar, EditorToolbar, IconButton, Menu, MenuItem, Popover, Tooltip } from "@threadlabs/looma/vue";
 import { BubbleMenu, EditorContent, useEditor } from "@tiptap/vue-3";
 import { Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
@@ -353,6 +353,11 @@ var LoomaEditor = defineComponent({
 		const linkText = ref("");
 		const linkNewTab = ref(true);
 		const linkError = ref("");
+		const chipAnchorId = `looma-editor-chip-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+		const chipInput = ref(null);
+		const chipOpen = ref(false);
+		const chipLabel = ref("");
+		const chipColor = ref("neutral");
 		let linkSelection = null;
 		const toolbarScope = `looma-editor-tool-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
 		const tooltipFor = ref("");
@@ -435,8 +440,43 @@ var LoomaEditor = defineComponent({
 			menuStyle: {},
 			capabilities: { ...EMPTY_CAPABILITIES }
 		});
+		const openChipEditor = (instance, position) => {
+			if (!props.editable) return;
+			const node = instance.state.doc.nodeAt(position);
+			const element = instance.view.nodeDOM(position);
+			if (node?.type.name !== "loomaChip" || !(element instanceof HTMLElement)) return;
+			root.value?.querySelector(`#${chipAnchorId}`)?.removeAttribute("id");
+			element.id = chipAnchorId;
+			chipLabel.value = String(node.attrs.label ?? "");
+			chipColor.value = normalizeLoomaChipColor(node.attrs.color);
+			chipOpen.value = true;
+			nextTick(() => chipInput.value?.focus());
+		};
+		const changeChip = (changes) => {
+			const instance = editor.value;
+			const element = root.value?.querySelector(`#${chipAnchorId}`);
+			if (!instance || !element) {
+				chipOpen.value = false;
+				return;
+			}
+			const position = instance.view.posAtDOM(element, 0);
+			const node = instance.state.doc.nodeAt(position);
+			if (node?.type.name !== "loomaChip") {
+				chipOpen.value = false;
+				return;
+			}
+			instance.view.dispatch(instance.state.tr.setNodeMarkup(position, void 0, {
+				...node.attrs,
+				...changes
+			}));
+		};
+		const closeChip = (focusChip = false) => {
+			chipOpen.value = false;
+			if (focusChip) root.value?.querySelector(`#${chipAnchorId}`)?.focus();
+		};
 		const slashExtension = createLoomaSlashCommandExtension({
 			onOpenImagePicker: () => fileInput.value?.click(),
+			onOpenChipEditor: openChipEditor,
 			onStateChange: (state) => {
 				Object.assign(slash, state);
 			}
@@ -602,7 +642,13 @@ var LoomaEditor = defineComponent({
 			instance.view.dispatch(transaction);
 			instance.commands.focus();
 		};
-		watch(() => props.editable, (editable) => editor.value?.setEditable(editable));
+		watch(() => props.editable, (editable) => {
+			editor.value?.setEditable(editable);
+			root.value?.querySelectorAll("[data-looma-chip]").forEach((chip) => {
+				chip.setAttribute("aria-disabled", String(!editable));
+			});
+			if (!editable) chipOpen.value = false;
+		});
 		watch(() => props.label, (label) => {
 			editor.value?.setOptions({ editorProps: { attributes: {
 				role: "textbox",
@@ -796,6 +842,18 @@ var LoomaEditor = defineComponent({
 				trigger
 			});
 		};
+		const chipElementForEvent = (event) => {
+			const element = event.target instanceof Element ? event.target.closest("[data-looma-chip]") : null;
+			return element && root.value?.contains(element) ? element : null;
+		};
+		const onChipClickCapture = (event) => {
+			const chip = chipElementForEvent(event);
+			if (chip && editor.value && props.editable) {
+				event.preventDefault();
+				event.stopPropagation();
+				openChipEditor(editor.value, editor.value.view.posAtDOM(chip, 0));
+			}
+		};
 		const onImageClick = (event) => {
 			const element = imageElementForEvent(event);
 			if (element && !props.editable) activateImage(element, "pointer");
@@ -806,6 +864,12 @@ var LoomaEditor = defineComponent({
 		};
 		const onImageKeyDown = (event) => {
 			if (event.key !== "Enter" && event.key !== " ") return;
+			const chip = chipElementForEvent(event);
+			if (chip && editor.value && props.editable) {
+				event.preventDefault();
+				openChipEditor(editor.value, editor.value.view.posAtDOM(chip, 0));
+				return;
+			}
 			const element = imageElementForEvent(event);
 			if (!element) return;
 			event.preventDefault();
@@ -1149,6 +1213,7 @@ var LoomaEditor = defineComponent({
 					}, 100);
 				},
 				onDrop,
+				onClickCapture: onChipClickCapture,
 				onClick: onImageClick,
 				onDblclick: onImageDoubleClick,
 				onKeydown: onImageKeyDown
@@ -1213,6 +1278,54 @@ var LoomaEditor = defineComponent({
 					class: "looma-editor__drop-overlay",
 					"aria-hidden": "true"
 				}, [loomaIcon("image"), h("span", "Drop image to upload")]) : null,
+				h(Popover, {
+					class: "looma-editor__chip-popover",
+					open: chipOpen.value,
+					for: chipAnchorId,
+					placement: mobile.value ? "top-start" : "bottom-start",
+					onClose: () => {
+						chipOpen.value = false;
+					}
+				}, () => h("div", {
+					class: "looma-editor__chip-form",
+					role: "dialog",
+					"aria-label": "Edit chip"
+				}, [h("input", {
+					ref: chipInput,
+					type: "text",
+					value: chipLabel.value,
+					placeholder: "Set a label",
+					"aria-label": "Chip text",
+					onInput: (event) => {
+						chipLabel.value = event.target.value;
+						changeChip({ label: chipLabel.value });
+					},
+					onKeydown: (event) => {
+						if (event.key === "Enter" || event.key === "Escape") {
+							event.preventDefault();
+							closeChip(true);
+						}
+					}
+				}), h("div", {
+					class: "looma-editor__chip-colors",
+					role: "group",
+					"aria-label": "Chip color"
+				}, LOOMA_CHIP_COLORS.map((color) => h("button", {
+					type: "button",
+					class: "looma-editor__chip-color",
+					"data-color": color,
+					"aria-label": `${color[0].toUpperCase()}${color.slice(1)} chip`,
+					"aria-pressed": chipColor.value === color,
+					onClick: () => {
+						if (chipColor.value === color) {
+							chipInput.value?.focus();
+							return;
+						}
+						chipColor.value = color;
+						changeChip({ color });
+						chipInput.value?.focus();
+					}
+				}, chipColor.value === color ? "✓" : "")))])),
 				h(Popover, {
 					class: "looma-editor__link-popover",
 					open: linkOpen.value,