Refresh UI components and showcase; release updated framework packages

packages/ui/components/WysiwygEditor.wrn

@@ -1,11 +1,4 @@
 component WysiwygEditor {
-  // A chrome shell around a slotted editor, not an editor itself: it renders a
-  // heading, a description, an optional item strip and a slot. It therefore
-  // emits none of these outputs on its own -- they forward whatever the slotted
-  // control raises. Slot a textarea or input and a parent @change or @input
-  // hears it, because those events bubble to this root; @focus and @blur arrive
-  // too, since the runtime binds the non-bubbling pair in the capture phase.
-  // Slot nothing interactive and there is nothing to hear.
   outputs {
     input(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
     change(payload: { value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)
@@ -20,98 +13,48 @@ component WysiwygEditor {
     description: string = ""
     items: unknown[] = []
     variant: string = "default"
+    value: string = ""
+    readonly: boolean = false
+    placeholder: string = "Write something…"
     class: string = ""
   }
+  functions {
+    client function format(command, sourceEvent, root, editor) {
+      sourceEvent.preventDefault()
+      root = sourceEvent.currentTarget.closest(".wrn-editor")
+      editor = root.querySelector("[contenteditable]")
+      editor.focus()
+      document.execCommand(command, false, null)
+      output.input({ value: editor.innerHTML, text: editor.textContent })
+      output.change({ value: editor.innerHTML, text: editor.textContent })
+    }
+    client function edit(sourceEvent) { output.input({ value: sourceEvent.currentTarget.innerHTML, text: sourceEvent.currentTarget.textContent }) }
+    client function finish(sourceEvent) { output.change({ value: sourceEvent.currentTarget.innerHTML, text: sourceEvent.currentTarget.textContent }); output.blur({ sourceEvent: sourceEvent }) }
+  }
   view {
-    <section class="wrn-component wrn-component--color-{color} wrn-component--size-{size} wrn-next--wysiwyg-editor wrn-next--variant-{variant} {class}">
-      {#if title}<strong>{title}</strong>{/if}
-      {#if description}<p>{description}</p>{/if}
-      {#if items}<div class="wrn-next__items">{#each items as item}<span>{item.label}</span>{/each}</div>{/if}
-      <slot />
+    <section {...attrs} class="wrn-editor {class}">
+      {#if title}<strong>{title}</strong>{/if}{#if description}<p>{description}</p>{/if}
+      <div class="wrn-editor__surface">
+        <div role="toolbar" aria-label="Text formatting" class="wrn-editor__toolbar">
+          <button type="button" disabled="{readonly}" aria-label="Bold" @mousedown="event.preventDefault()" @click="format('bold', event)"><strong>B</strong></button>
+          <button type="button" disabled="{readonly}" aria-label="Italic" @mousedown="event.preventDefault()" @click="format('italic', event)"><em>I</em></button>
+          <button type="button" disabled="{readonly}" aria-label="Underline" @mousedown="event.preventDefault()" @click="format('underline', event)"><u>U</u></button>
+          <button type="button" disabled="{readonly}" aria-label="Bulleted list" @mousedown="event.preventDefault()" @click="format('insertUnorderedList', event)"><span class="icon-[lucide--list]" aria-hidden="true"></span></button>
+          <button type="button" disabled="{readonly}" aria-label="Undo" @mousedown="event.preventDefault()" @click="format('undo', event)"><span class="icon-[lucide--undo-2]" aria-hidden="true"></span></button>
+<button type="button" disabled="{readonly}" aria-label="Strike through" @mousedown="event.preventDefault()" @click="format('strikeThrough', event)">S̶</button><button type="button" disabled="{readonly}" aria-label="Numbered list" @mousedown="event.preventDefault()" @click="format('insertOrderedList', event)">1.</button><button type="button" disabled="{readonly}" aria-label="Align left" @mousedown="event.preventDefault()" @click="format('justifyLeft', event)">⇤</button><button type="button" disabled="{readonly}" aria-label="Align center" @mousedown="event.preventDefault()" @click="format('justifyCenter', event)">↔</button><button type="button" disabled="{readonly}" aria-label="Align right" @mousedown="event.preventDefault()" @click="format('justifyRight', event)">⇥</button><button type="button" disabled="{readonly}" aria-label="Indent" @mousedown="event.preventDefault()" @click="format('indent', event)">→</button><button type="button" disabled="{readonly}" aria-label="Outdent" @mousedown="event.preventDefault()" @click="format('outdent', event)">←</button><button type="button" disabled="{readonly}" aria-label="Remove formatting" @mousedown="event.preventDefault()" @click="format('removeFormat', event)">Tx</button><button type="button" disabled="{readonly}" aria-label="Redo" @mousedown="event.preventDefault()" @click="format('redo', event)">↻</button>        </div>
+        <div contenteditable="{readonly ? 'false' : 'true'}" role="textbox" aria-label="{title || 'Rich text editor'}" aria-multiline="true" aria-readonly="{readonly}" data-placeholder="{placeholder}" class="wrn-editor__content" @input="edit(event)" @blur="finish(event)" @focus="output.focus({ sourceEvent: event })">{value}</div>
+      </div><slot />
     </section>
   }
-
   style {
-    .wrn-next--wysiwyg-editor {
-      display: grid;
-      gap: 0.75rem;
-      padding: 1rem;
-      border: 1px solid var(--wrn-color-border);
-      border-radius: var(--wrn-radius);
-      color: var(--wrn-color-text);
-      background: var(--wrn-color-surface);
-    }
-    .wrn-next--wysiwyg-editor > p { margin: 0; color: var(--wrn-color-muted); }
-    .wrn-next--wysiwyg-editor > .wrn-next__items { display: flex; flex-wrap: wrap; gap: 0.5rem; }
-    .wrn-next--wysiwyg-editor > .wrn-next__items > span { padding: 0.35rem 0.6rem; border-radius: var(--wrn-radius-sm); background: var(--wrn-color-surface-2); }
-
-    /* Shared component foundation. */
-
-        .wrn-component {
-          --wrn-component-color: var(--wrn-color-primary);
-          --wrn-component-scale: 1;
-          margin: 0;
-          color: var(--wrn-color-text);
-          font-family: var(--wrn-font-sans, inherit);
-        }
-
-        .wrn-component--color-primary {
-          --wrn-component-color: var(--wrn-color-primary);
-        }
-
-        .wrn-component--color-secondary {
-          --wrn-component-color: var(--wrn-color-secondary);
-        }
-
-        .wrn-component--color-success {
-          --wrn-component-color: var(--wrn-color-success);
-        }
-
-        .wrn-component--color-warning {
-          --wrn-component-color: var(--wrn-color-warning);
-        }
-
-        .wrn-component--color-danger {
-          --wrn-component-color: var(--wrn-color-danger);
-        }
-
-        .wrn-component--color-info {
-          --wrn-component-color: var(--wrn-color-info);
-        }
-
-        .wrn-component--size-xs {
-          --wrn-component-scale: 0.78;
-        }
-
-        .wrn-component--size-sm {
-          --wrn-component-scale: 0.88;
-        }
-
-        .wrn-component--size-default,
-        .wrn-component--size-md {
-          --wrn-component-scale: 1;
-        }
-
-        .wrn-component--size-lg {
-          --wrn-component-scale: 1.14;
-        }
-
-        .wrn-component--size-xl {
-          --wrn-component-scale: 1.28;
-        }
-
-        .wrn-component:not(.wrn-btn) {
-          font-size: calc(1em * var(--wrn-component-scale));
-        }
-
-        .wrn-component :is(a, button, input, select, textarea):focus-visible {
-          outline-color: var(--wrn-component-color);
-        }
-
-        .wrn-component p {
-          margin: 0;
-          color: var(--wrn-color-muted);
-          line-height: 1.6;
-        }
+    .wrn-editor { display:grid; gap:.65rem; color:var(--wrn-color-text); }
+    .wrn-editor > p { margin:0; color:var(--wrn-color-muted); font-size:.875rem; }
+    .wrn-editor__surface { border:1px solid var(--wrn-color-border); border-radius:var(--wrn-radius-md); overflow:hidden; background:var(--wrn-color-surface); }
+    .wrn-editor__toolbar { display:flex; flex-wrap:wrap; gap:.25rem; padding:.4rem; border-bottom:1px solid var(--wrn-color-border); }
+    .wrn-editor button { display:grid; place-items:center; width:2rem; height:2rem; border:0; border-radius:4px; background:transparent; color:inherit; cursor:pointer; }
+    .wrn-editor button:hover { background:var(--wrn-color-surface-2); }
+    .wrn-editor button span { width:1rem; height:1rem; }
+    .wrn-editor__content { min-height:10rem; padding:1rem; outline-offset:-2px; font-size:.875rem; line-height:1.65; }
+    .wrn-editor__content:empty::before { content:attr(data-placeholder); color:var(--wrn-color-muted); pointer-events:none; }
   }
 }