@llui/markdown-editor 0.1.0

package/dist/styles/editor.css

@@ -0,0 +1,517 @@
+/**
+ * Default theme for @llui/markdown-editor. Headless components target
+ * data-scope / data-part attributes; this stylesheet gives a polished default.
+ * Override the `--md-*` custom properties to retheme (e.g. for light mode).
+ *
+ *   import '@llui/markdown-editor/styles/editor.css'
+ */
+:root {
+  --md-bg: #0f1117;
+  --md-surface: #181b24;
+  --md-surface-2: #1f2330;
+  --md-border: #2b3040;
+  --md-text: #e6e8ee;
+  --md-muted: #9aa3b2;
+  --md-primary: #5b8cff;
+  --md-primary-soft: #2a3656;
+  --md-radius: 8px;
+  --md-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
+}
+
+/* ── Editor surface (Lexical's contentEditable host) ──────────────────── */
+[data-lexical-editor] {
+  position: relative;
+  outline: none;
+  padding: 1.1rem 1.25rem;
+  min-height: 8rem;
+  color: var(--md-text);
+}
+[data-lexical-editor] > * {
+  margin: 0 0 0.7rem;
+}
+[data-lexical-editor][data-empty='true']::before {
+  content: attr(data-placeholder);
+  position: absolute;
+  top: 1.1rem;
+  left: 1.25rem;
+  color: var(--md-muted);
+  pointer-events: none;
+}
+[data-lexical-editor] h1 {
+  font-size: 1.6rem;
+  letter-spacing: -0.02em;
+}
+[data-lexical-editor] h2 {
+  font-size: 1.3rem;
+}
+[data-lexical-editor] h3 {
+  font-size: 1.1rem;
+}
+[data-lexical-editor] blockquote {
+  border-left: 3px solid var(--md-primary);
+  margin-inline: 0;
+  padding-left: 0.9rem;
+  color: var(--md-muted);
+}
+[data-lexical-editor] ul,
+[data-lexical-editor] ol {
+  padding-left: 1.4rem;
+}
+[data-lexical-editor] a {
+  color: var(--md-primary);
+}
+[data-lexical-editor] code[data-lexical-text='true'] {
+  background: var(--md-surface-2);
+  padding: 0.1em 0.35em;
+  border-radius: 5px;
+  font-family: var(--md-mono);
+}
+[data-lexical-editor] code:not([data-lexical-text='true']) {
+  display: block;
+  white-space: pre;
+  background: var(--md-bg);
+  border: 1px solid var(--md-border);
+  border-radius: 6px;
+  padding: 0.7rem 0.9rem;
+  font-size: 0.85rem;
+  font-family: var(--md-mono);
+  overflow: auto;
+}
+
+/* Task-list items (li[role="checkbox"]) with a clickable checkbox. */
+[data-lexical-editor] li[role='checkbox'] {
+  position: relative;
+  list-style: none;
+  margin-left: -0.4rem;
+  padding-left: 1.5rem;
+  outline: none;
+}
+[data-lexical-editor] li[role='checkbox']::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.25em;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid var(--md-muted);
+  border-radius: 3px;
+  cursor: pointer;
+}
+[data-lexical-editor] li[role='checkbox'][aria-checked='true'] {
+  color: var(--md-muted);
+  text-decoration: line-through;
+}
+[data-lexical-editor] li[role='checkbox'][aria-checked='true']::before {
+  background: var(--md-primary);
+  border-color: var(--md-primary);
+}
+[data-lexical-editor] li[role='checkbox'][aria-checked='true']::after {
+  content: '';
+  position: absolute;
+  left: 0.34rem;
+  top: 0.3em;
+  width: 0.28rem;
+  height: 0.55rem;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  cursor: pointer;
+}
+
+/* ── Editor shell + toolbar ───────────────────────────────────────────── */
+[data-scope='md-editor'][data-part='root'] {
+  display: flex;
+  flex-direction: column;
+  background: var(--md-surface);
+}
+[data-scope='md-toolbar'][data-part='root'] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  padding: 0.5rem 0.6rem;
+  border-bottom: 1px solid var(--md-border);
+  background: var(--md-surface-2);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+[data-scope='md-toolbar'][data-part='group'] {
+  display: flex;
+  align-items: center;
+  gap: 0.15rem;
+  padding-right: 0.5rem;
+  border-right: 1px solid var(--md-border);
+}
+[data-scope='md-toolbar'][data-part='group']:last-child {
+  border-right: none;
+  padding-right: 0;
+}
+[data-scope='md-toolbar'] [data-part='item'] {
+  font: inherit;
+  font-size: 0.85rem;
+  min-width: 2rem;
+  height: 2rem;
+  padding: 0 0.4rem;
+  color: var(--md-text);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: pointer;
+}
+[data-scope='md-toolbar'] [data-part='item']:hover {
+  background: var(--md-surface);
+}
+[data-scope='md-toolbar'] [data-part='item'][data-active] {
+  background: var(--md-primary-soft);
+  color: #fff;
+  border-color: var(--md-primary);
+}
+[data-scope='md-toolbar'] [data-part='item']:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+[data-scope='md-toolbar'] [data-part='block-select'] {
+  font: inherit;
+  font-size: 0.85rem;
+  height: 2rem;
+  padding: 0 0.4rem;
+  color: var(--md-text);
+  background: var(--md-surface);
+  border: 1px solid var(--md-border);
+  border-radius: 6px;
+  cursor: pointer;
+}
+[data-part='glyph'] {
+  display: inline-flex;
+  align-items: center;
+  font-weight: 600;
+}
+[data-part='glyph'] svg {
+  display: block;
+}
+
+/* ── Callout decorator ────────────────────────────────────────────────── */
+[data-scope='md-callout'][data-part='root'] {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.7rem;
+  padding: 0.7rem 0.9rem;
+  border-radius: 8px;
+  border: 1px solid var(--md-border);
+  border-left-width: 4px;
+  background: var(--md-surface-2);
+  margin: 0.6rem 0;
+}
+[data-scope='md-callout'] [data-part='badge'] {
+  font: inherit;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #fff;
+  border: none;
+  border-radius: 5px;
+  padding: 0.2rem 0.5rem;
+  cursor: pointer;
+  flex: none;
+}
+[data-scope='md-callout'] [data-part='text'] {
+  flex: 1;
+  padding-top: 0.1rem;
+  outline: none;
+  border-radius: 4px;
+}
+[data-scope='md-callout'] [data-part='text']:focus {
+  box-shadow: 0 0 0 2px var(--md-primary-soft);
+}
+[data-scope='md-callout'] [data-part='text']:empty::before {
+  content: 'Callout text…';
+  color: var(--md-muted);
+}
+[data-scope='md-callout'][data-kind='note'] {
+  border-left-color: #5b8cff;
+}
+[data-scope='md-callout'][data-kind='note'] [data-part='badge'] {
+  background: #5b8cff;
+}
+[data-scope='md-callout'][data-kind='tip'] {
+  border-left-color: #34d399;
+}
+[data-scope='md-callout'][data-kind='tip'] [data-part='badge'] {
+  background: #34d399;
+}
+[data-scope='md-callout'][data-kind='warning'] {
+  border-left-color: #fbbf24;
+}
+[data-scope='md-callout'][data-kind='warning'] [data-part='badge'] {
+  background: #b8860b;
+}
+[data-scope='md-callout'][data-kind='danger'] {
+  border-left-color: #f87171;
+}
+[data-scope='md-callout'][data-kind='danger'] [data-part='badge'] {
+  background: #ef4444;
+}
+
+/* ── Image + horizontal-rule decorators ───────────────────────────────── */
+[data-scope='md-image'][data-part='root'] {
+  margin: 0.6rem 0;
+}
+[data-scope='md-image'] img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  border: 1px solid var(--md-border);
+  display: block;
+}
+[data-md-hr] {
+  border: none;
+  border-top: 1px solid var(--md-border);
+  margin: 1.2rem 0;
+}
+
+/* ── Tables ───────────────────────────────────────────────────────────── */
+[data-lexical-editor] table {
+  border-collapse: collapse;
+  margin: 0.6rem 0;
+  width: 100%;
+  font-size: 0.9rem;
+}
+[data-lexical-editor] th,
+[data-lexical-editor] td {
+  border: 1px solid var(--md-border);
+  padding: 0.4rem 0.6rem;
+  text-align: left;
+  vertical-align: top;
+  min-width: 4rem;
+}
+[data-lexical-editor] th {
+  background: var(--md-surface-2);
+  font-weight: 600;
+}
+[data-scope='md-table-tools'][data-part='bar'] {
+  display: flex;
+  gap: 0.1rem;
+  padding: 0.2rem;
+  background: var(--md-surface);
+  border: 1px solid var(--md-border);
+  border-radius: 7px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+}
+[data-scope='md-table-tools'][data-part='tool'] {
+  font: inherit;
+  font-size: 0.78rem;
+  min-width: 1.9rem;
+  height: 1.8rem;
+  padding: 0 0.3rem;
+  color: var(--md-text);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  cursor: pointer;
+}
+[data-scope='md-table-tools'][data-part='tool']:hover {
+  background: var(--md-surface-2);
+}
+
+/* ── Math block ───────────────────────────────────────────────────────── */
+[data-scope='md-math'][data-part='root'] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin: 0.6rem 0;
+  padding: 0.7rem 0.9rem;
+  border: 1px solid var(--md-border);
+  border-radius: 8px;
+  background: var(--md-surface-2);
+}
+[data-scope='md-math'] [data-part='source'] {
+  font-family: var(--md-mono);
+  font-size: 0.85rem;
+  color: var(--md-muted);
+  outline: none;
+}
+[data-scope='md-math'] [data-part='source']:focus {
+  color: var(--md-text);
+}
+[data-scope='md-math'] [data-part='preview'] {
+  text-align: center;
+}
+
+/* ── Mermaid block ────────────────────────────────────────────────────── */
+[data-scope='md-mermaid'][data-part='root'] {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin: 0.6rem 0;
+  padding: 0.7rem 0.9rem;
+  border: 1px solid var(--md-border);
+  border-radius: 8px;
+  background: var(--md-surface-2);
+}
+[data-scope='md-mermaid'] [data-part='source'] {
+  font-family: var(--md-mono);
+  font-size: 0.82rem;
+  white-space: pre-wrap;
+  color: var(--md-muted);
+  outline: none;
+}
+[data-scope='md-mermaid'] [data-part='source']:focus {
+  color: var(--md-text);
+}
+[data-md-image='alt'] {
+  margin-top: 0.5rem;
+}
+[data-md-image='file'] {
+  margin-top: 0.6rem;
+  font-size: 0.8rem;
+  color: var(--md-muted);
+}
+
+/* ── Slash command menu ───────────────────────────────────────────────── */
+[data-scope='md-slash'][data-part='root'] {
+  min-width: 12rem;
+  max-height: 16rem;
+  overflow: auto;
+  padding: 0.25rem;
+  background: var(--md-surface);
+  border: 1px solid var(--md-border);
+  border-radius: 8px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
+}
+[data-scope='md-slash'][data-part='option'] {
+  padding: 0.4rem 0.6rem;
+  border-radius: 5px;
+  font-size: 0.88rem;
+  color: var(--md-text);
+  cursor: pointer;
+}
+[data-scope='md-slash'][data-part='option'][data-active] {
+  background: var(--md-primary-soft);
+}
+
+/* ── Context menu ─────────────────────────────────────────────────────── */
+[data-scope='md-context'][data-part='backdrop'] {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+}
+[data-scope='md-context'][data-part='root'] {
+  min-width: 11rem;
+  max-height: 18rem;
+  overflow: auto;
+  padding: 0.25rem;
+  background: var(--md-surface);
+  border: 1px solid var(--md-border);
+  border-radius: 8px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
+}
+[data-scope='md-context'][data-part='option'] {
+  padding: 0.35rem 0.6rem;
+  border-radius: 5px;
+  font-size: 0.85rem;
+  color: var(--md-text);
+  cursor: pointer;
+}
+[data-scope='md-context'][data-part='option']:hover {
+  background: var(--md-primary-soft);
+}
+
+/* ── Floating selection toolbar ───────────────────────────────────────── */
+[data-scope='md-floating'][data-part='bar'] {
+  display: flex;
+  gap: 0.1rem;
+  padding: 0.2rem;
+  background: var(--md-surface);
+  border: 1px solid var(--md-border);
+  border-radius: 7px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+}
+[data-scope='md-floating'][data-part='item'] {
+  font: inherit;
+  font-size: 0.85rem;
+  min-width: 1.8rem;
+  height: 1.8rem;
+  padding: 0 0.35rem;
+  color: var(--md-text);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  cursor: pointer;
+}
+[data-scope='md-floating'][data-part='item']:hover {
+  background: var(--md-surface-2);
+}
+[data-scope='md-floating'][data-part='item'][data-active] {
+  background: var(--md-primary-soft);
+  color: #fff;
+}
+
+/* ── Link dialog ──────────────────────────────────────────────────────── */
+[data-scope='dialog'][data-part='backdrop'] {
+  position: fixed;
+  inset: 0;
+  background: rgba(8, 10, 16, 0.6);
+  z-index: 50;
+}
+[data-scope='dialog'][data-part='positioner'] {
+  position: fixed;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  z-index: 51;
+}
+[data-md-link='box'] {
+  width: min(28rem, 100%);
+  background: var(--md-surface);
+  border: 1px solid var(--md-border);
+  border-radius: 10px;
+  padding: 1.1rem 1.2rem;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
+  color: var(--md-text);
+}
+[data-md-link='title'] {
+  font-size: 1rem;
+  font-weight: 600;
+  margin-bottom: 0.7rem;
+}
+[data-md-link='input'] {
+  width: 100%;
+  box-sizing: border-box;
+  font: inherit;
+  font-size: 0.9rem;
+  background: var(--md-bg);
+  color: var(--md-text);
+  border: 1px solid var(--md-border);
+  border-radius: 6px;
+  padding: 0.5rem 0.6rem;
+  outline: none;
+}
+[data-md-link='input']:focus {
+  border-color: var(--md-primary);
+}
+[data-md-link='actions'] {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+[data-md-link='cancel'],
+[data-md-link='apply'] {
+  font: inherit;
+  font-size: 0.85rem;
+  border-radius: 6px;
+  padding: 0.4rem 0.85rem;
+  cursor: pointer;
+  border: 1px solid var(--md-border);
+}
+[data-md-link='cancel'] {
+  background: var(--md-surface);
+  color: var(--md-text);
+}
+[data-md-link='apply'] {
+  background: var(--md-primary);
+  color: #fff;
+  border-color: var(--md-primary);
+}

package/dist/surfaces/link-dialog.d.ts

@@ -0,0 +1,19 @@
+import { type Mountable, type Signal } from '@llui/dom';
+import { type DialogMsg, type DialogState } from '@llui/components/dialog';
+export interface LinkDialogOptions {
+    /** The `{ open }` slice driving the modal. */
+    dialog: Signal<DialogState>;
+    /** The URL input value. */
+    url: Signal<string>;
+    /** Called as the user edits the URL. */
+    onInput: (url: string) => void;
+    /** Called on Apply / Enter. */
+    onSubmit: () => void;
+    /** Called when the dialog requests open/close (dismiss, close button). */
+    onDialog: (msg: DialogMsg) => void;
+    /** Dialog instance id for ARIA wiring (default 'md-link-dialog'). */
+    id?: string;
+}
+/** Render the link dialog. Hidden (portal, nothing inline) until `dialog.open`. */
+export declare function linkDialog(opts: LinkDialogOptions): Mountable;
+//# sourceMappingURL=link-dialog.d.ts.map

package/dist/surfaces/link-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-dialog.d.ts","sourceRoot":"","sources":["../../src/surfaces/link-dialog.ts"],"names":[],"mappings":"AAKA,OAAO,EAA4B,KAAK,SAAS,EAAE,KAAK,MAAM,EAAE,MAAM,WAAW,CAAA;AACjF,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,yBAAyB,CAAA;AAEhC,MAAM,WAAW,iBAAiB;IAChC,8CAA8C;IAC9C,MAAM,EAAE,MAAM,CAAC,WAAW,CAAC,CAAA;IAC3B,2BAA2B;IAC3B,GAAG,EAAE,MAAM,CAAC,MAAM,CAAC,CAAA;IACnB,wCAAwC;IACxC,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,+BAA+B;IAC/B,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,0EAA0E;IAC1E,QAAQ,EAAE,CAAC,GAAG,EAAE,SAAS,KAAK,IAAI,CAAA;IAClC,qEAAqE;IACrE,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ;AAED,mFAAmF;AACnF,wBAAgB,UAAU,CAAC,IAAI,EAAE,iBAAiB,GAAG,SAAS,CAqC7D"}

package/dist/surfaces/link-dialog.js

@@ -0,0 +1,45 @@
+// The link editor — a modal dialog (built on the @llui/components `dialog`) for
+// entering/editing a URL. Pure view: it's driven by `{ open }` + `url` signals
+// and reports changes through callbacks, so any owner (the link plugin) can wire
+// it to its own messages.
+import { button, div, input, text } from '@llui/dom';
+import { connect as connectDialog, overlay as overlayDialog, } from '@llui/components/dialog';
+/** Render the link dialog. Hidden (portal, nothing inline) until `dialog.open`. */
+export function linkDialog(opts) {
+    const parts = connectDialog(opts.dialog, opts.onDialog, {
+        id: opts.id ?? 'md-link-dialog',
+        closeLabel: 'Cancel',
+    });
+    return overlayDialog({
+        state: opts.dialog,
+        send: opts.onDialog,
+        parts,
+        closeOnEscape: true,
+        closeOnOutsideClick: true,
+        content: () => [
+            div({ ...parts.content, 'data-md-link': 'box' }, [
+                div({ ...parts.title, 'data-md-link': 'title' }, [text('Insert link')]),
+                input({
+                    'data-md-link': 'input',
+                    type: 'url',
+                    placeholder: 'https://example.com',
+                    value: opts.url,
+                    onInput: (e) => opts.onInput(e.target.value),
+                    onKeyDown: (e) => {
+                        if (e.key === 'Enter') {
+                            e.preventDefault();
+                            opts.onSubmit();
+                        }
+                    },
+                }),
+                div({ 'data-md-link': 'actions' }, [
+                    button({ ...parts.closeTrigger, 'data-md-link': 'cancel' }, [text('Cancel')]),
+                    button({ type: 'button', 'data-md-link': 'apply', onClick: () => opts.onSubmit() }, [
+                        text('Apply'),
+                    ]),
+                ]),
+            ]),
+        ],
+    });
+}
+//# sourceMappingURL=link-dialog.js.map

package/dist/surfaces/link-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-dialog.js","sourceRoot":"","sources":["../../src/surfaces/link-dialog.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,+EAA+E;AAC/E,iFAAiF;AACjF,0BAA0B;AAE1B,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAA+B,MAAM,WAAW,CAAA;AACjF,OAAO,EACL,OAAO,IAAI,aAAa,EACxB,OAAO,IAAI,aAAa,GAGzB,MAAM,yBAAyB,CAAA;AAiBhC,mFAAmF;AACnF,MAAM,UAAU,UAAU,CAAC,IAAuB;IAChD,MAAM,KAAK,GAAG,aAAa,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,EAAE;QACtD,EAAE,EAAE,IAAI,CAAC,EAAE,IAAI,gBAAgB;QAC/B,UAAU,EAAE,QAAQ;KACrB,CAAC,CAAA;IAEF,OAAO,aAAa,CAAC;QACnB,KAAK,EAAE,IAAI,CAAC,MAAM;QAClB,IAAI,EAAE,IAAI,CAAC,QAAQ;QACnB,KAAK;QACL,aAAa,EAAE,IAAI;QACnB,mBAAmB,EAAE,IAAI;QACzB,OAAO,EAAE,GAAG,EAAE,CAAC;YACb,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE;gBAC/C,GAAG,CAAC,EAAE,GAAG,KAAK,CAAC,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;gBACvE,KAAK,CAAC;oBACJ,cAAc,EAAE,OAAO;oBACvB,IAAI,EAAE,KAAK;oBACX,WAAW,EAAE,qBAAqB;oBAClC,KAAK,EAAE,IAAI,CAAC,GAAG;oBACf,OAAO,EAAE,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC;oBACzE,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;wBAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;4BACtB,CAAC,CAAC,cAAc,EAAE,CAAA;4BAClB,IAAI,CAAC,QAAQ,EAAE,CAAA;wBACjB,CAAC;oBACH,CAAC;iBACF,CAAC;gBACF,GAAG,CAAC,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE;oBACjC,MAAM,CAAC,EAAE,GAAG,KAAK,CAAC,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;oBAC7E,MAAM,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,cAAc,EAAE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,EAAE;wBAClF,IAAI,CAAC,OAAO,CAAC;qBACd,CAAC;iBACH,CAAC;aACH,CAAC;SACH;KACF,CAAC,CAAA;AACJ,CAAC","sourcesContent":["// The link editor — a modal dialog (built on the @llui/components `dialog`) for\n// entering/editing a URL. Pure view: it's driven by `{ open }` + `url` signals\n// and reports changes through callbacks, so any owner (the link plugin) can wire\n// it to its own messages.\n\nimport { button, div, input, text, type Mountable, type Signal } from '@llui/dom'\nimport {\n  connect as connectDialog,\n  overlay as overlayDialog,\n  type DialogMsg,\n  type DialogState,\n} from '@llui/components/dialog'\n\nexport interface LinkDialogOptions {\n  /** The `{ open }` slice driving the modal. */\n  dialog: Signal<DialogState>\n  /** The URL input value. */\n  url: Signal<string>\n  /** Called as the user edits the URL. */\n  onInput: (url: string) => void\n  /** Called on Apply / Enter. */\n  onSubmit: () => void\n  /** Called when the dialog requests open/close (dismiss, close button). */\n  onDialog: (msg: DialogMsg) => void\n  /** Dialog instance id for ARIA wiring (default 'md-link-dialog'). */\n  id?: string\n}\n\n/** Render the link dialog. Hidden (portal, nothing inline) until `dialog.open`. */\nexport function linkDialog(opts: LinkDialogOptions): Mountable {\n  const parts = connectDialog(opts.dialog, opts.onDialog, {\n    id: opts.id ?? 'md-link-dialog',\n    closeLabel: 'Cancel',\n  })\n\n  return overlayDialog({\n    state: opts.dialog,\n    send: opts.onDialog,\n    parts,\n    closeOnEscape: true,\n    closeOnOutsideClick: true,\n    content: () => [\n      div({ ...parts.content, 'data-md-link': 'box' }, [\n        div({ ...parts.title, 'data-md-link': 'title' }, [text('Insert link')]),\n        input({\n          'data-md-link': 'input',\n          type: 'url',\n          placeholder: 'https://example.com',\n          value: opts.url,\n          onInput: (e: Event) => opts.onInput((e.target as HTMLInputElement).value),\n          onKeyDown: (e: KeyboardEvent) => {\n            if (e.key === 'Enter') {\n              e.preventDefault()\n              opts.onSubmit()\n            }\n          },\n        }),\n        div({ 'data-md-link': 'actions' }, [\n          button({ ...parts.closeTrigger, 'data-md-link': 'cancel' }, [text('Cancel')]),\n          button({ type: 'button', 'data-md-link': 'apply', onClick: () => opts.onSubmit() }, [\n            text('Apply'),\n          ]),\n        ]),\n      ]),\n    ],\n  })\n}\n"]}

package/dist/surfaces/toolbar.d.ts

@@ -0,0 +1,48 @@
+import { type Mountable, type Send, type Signal } from '@llui/dom';
+import type { CommandItem } from '../plugins/types.js';
+import type { EditorMsg, FormatState } from '../state.js';
+export interface ToolbarItemParts {
+    type: 'button';
+    'data-scope': 'md-toolbar';
+    'data-part': 'item';
+    'data-id': string;
+    'aria-label': string;
+    title: string;
+    'aria-pressed': Signal<'true' | 'false'>;
+    'aria-disabled': Signal<'true' | undefined>;
+    disabled: Signal<boolean>;
+    'data-active': Signal<'' | undefined>;
+    onClick: (e: MouseEvent) => void;
+}
+export interface ToolbarParts {
+    root: {
+        role: 'toolbar';
+        'aria-label': string;
+        'data-scope': 'md-toolbar';
+        'data-part': 'root';
+    };
+    item: (id: string) => ToolbarItemParts;
+}
+/** Build reactive toolbar parts from the format signal. Spread `item(id)` onto a
+ * `<button>`; `aria-pressed` / `data-active` / `disabled` track the format. */
+export declare function connectToolbar(format: Signal<FormatState>, send: Send<EditorMsg>, items: readonly CommandItem[]): ToolbarParts;
+/** Compact glyphs so the default toolbar reads as a real toolbar without icon
+ * assets. SVG strings render as icons; everything else as text. Override via
+ * `ToolbarOptions.glyphs`. */
+export declare const DEFAULT_GLYPHS: Readonly<Record<string, string>>;
+export interface ToolbarOptions {
+    format: Signal<FormatState>;
+    send: Send<EditorMsg>;
+    items: readonly CommandItem[];
+    /** Explicit grouped layout of ids; defaults to grouping by `item.group`. */
+    groups?: readonly (readonly string[])[];
+    /** Glyph overrides (id → text/emoji). Merged over {@link DEFAULT_GLYPHS}. */
+    glyphs?: Readonly<Record<string, string>>;
+    /** Render the `block` group as a `<select>` dropdown instead of buttons
+     * (default true). */
+    blockSelect?: boolean;
+    'aria-label'?: string;
+}
+/** A ready-made grouped toolbar. Items not surfaced to `'toolbar'` are dropped. */
+export declare function toolbar(opts: ToolbarOptions): Mountable;
+//# sourceMappingURL=toolbar.d.ts.map

package/dist/surfaces/toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../src/surfaces/toolbar.ts"],"names":[],"mappings":"AAIA,OAAO,EASL,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,MAAM,EACZ,MAAM,WAAW,CAAA;AAClB,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACtD,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAEzD,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,QAAQ,CAAA;IACd,YAAY,EAAE,YAAY,CAAA;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,EAAE,MAAM,CAAA;IACpB,KAAK,EAAE,MAAM,CAAA;IACb,cAAc,EAAE,MAAM,CAAC,MAAM,GAAG,OAAO,CAAC,CAAA;IACxC,eAAe,EAAE,MAAM,CAAC,MAAM,GAAG,SAAS,CAAC,CAAA;IAC3C,QAAQ,EAAE,MAAM,CAAC,OAAO,CAAC,CAAA;IACzB,aAAa,EAAE,MAAM,CAAC,EAAE,GAAG,SAAS,CAAC,CAAA;IACrC,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;CACjC;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS,CAAA;QACf,YAAY,EAAE,MAAM,CAAA;QACpB,YAAY,EAAE,YAAY,CAAA;QAC1B,WAAW,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,IAAI,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,gBAAgB,CAAA;CACvC;AAED;+EAC+E;AAC/E,wBAAgB,cAAc,CAC5B,MAAM,EAAE,MAAM,CAAC,WAAW,CAAC,EAC3B,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,EACrB,KAAK,EAAE,SAAS,WAAW,EAAE,GAC5B,YAAY,CA2Bd;AAUD;;8BAE8B;AAC9B,eAAO,MAAM,cAAc,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAoB3D,CAAA;AAuBD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC,WAAW,CAAC,CAAA;IAC3B,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAA;IACrB,KAAK,EAAE,SAAS,WAAW,EAAE,CAAA;IAC7B,4EAA4E;IAC5E,MAAM,CAAC,EAAE,SAAS,CAAC,SAAS,MAAM,EAAE,CAAC,EAAE,CAAA;IACvC,6EAA6E;IAC7E,MAAM,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAA;IACzC;yBACqB;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AA0BD,mFAAmF;AACnF,wBAAgB,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,SAAS,CA2CvD"}