@architecture-model/editable-metadata 0.1.0 → 0.3.0

package/Derived.astro

@@ -0,0 +1,17 @@
+---
+import type { LikeC4Model } from 'likec4/model'
+import { model } from './model.js'
+
+type Value = string | number | boolean | null | undefined | Array<string | number>
+
+interface Props {
+  of: string
+  value: (element: LikeC4Model.Element, model: LikeC4Model) => Value
+}
+
+const { of, value } = Astro.props
+const result = value(model.element(of), model)
+const text = typeof result === 'boolean' ? (result ? 'Yes' : 'No') : [result ?? []].flat().join(', ')
+---
+
+{text}

package/Editor.jsx

@@ -0,0 +1,227 @@
+import * as Popover from '@radix-ui/react-popover'
+import * as Switch from '@radix-ui/react-switch'
+import { Command } from 'cmdk'
+import { useRef, useState } from 'react'
+import './editor.css'
+
+const post = async (change) => {
+  const response = await fetch('/__model/element', { method: 'POST', body: JSON.stringify(change) })
+  if (!response.ok) throw new Error(await response.text())
+}
+
+const listOf = (value) => [value].flat().filter(Boolean)
+const linksOf = (links) =>
+  links
+    .map(({ url, label }) => ({ url: url.trim(), label: label?.trim() }))
+    .filter((link) => link.url)
+    .map(({ url, label }) => (label ? { url, label } : { url }))
+const keyOf = (list) => JSON.stringify(list.map((item) => JSON.stringify(item)).sort())
+const shown = (type, values, labelOf) =>
+  type === 'links' ? values.map((link) => link.label || link.url).join(', ') : values.map(labelOf).join(', ')
+
+function Options({ type, options, chosen, onChoose, onClear }) {
+  const [query, setQuery] = useState('')
+  const typed = query.trim()
+  const known = options.some((option) => option.value === typed || option.label === typed)
+
+  return (
+    <Command className="em-command" loop>
+      <Command.Input
+        className="em-input"
+        value={query}
+        onValueChange={setQuery}
+        placeholder={type === 'text' ? 'Search or add a value…' : 'Search…'}
+      />
+      <Command.List className="em-list">
+        <Command.Empty className="em-empty">No options</Command.Empty>
+        {options.map((option) => (
+          <Command.Item
+            key={option.value}
+            value={option.value}
+            keywords={[option.label]}
+            className="em-item"
+            onSelect={() => onChoose(option.value)}
+          >
+            <span className="em-check">{chosen.includes(option.value) ? '✓' : ''}</span>
+            {option.label}
+          </Command.Item>
+        ))}
+        {type === 'text' && typed && !known && (
+          <Command.Item value={typed} className="em-item" onSelect={() => (setQuery(''), onChoose(typed))}>
+            <span className="em-check">+</span>
+            Add “{typed}”
+          </Command.Item>
+        )}
+      </Command.List>
+      {type !== 'multiselect' && chosen.length > 0 && (
+        <button type="button" className="em-item em-muted em-clear" onClick={onClear}>
+          <span className="em-check" />
+          Clear
+        </button>
+      )}
+    </Command>
+  )
+}
+
+function Links({ links, onChange, onSave }) {
+  const set = (index, field) => (event) =>
+    onChange(links.map((link, at) => (at === index ? { ...link, [field]: event.target.value } : link)))
+  const onKeyDown = (event) => event.key === 'Enter' && (event.preventDefault(), onSave())
+
+  return (
+    <div className="em-command">
+      {links.map((link, index) => (
+        <div className="em-link" key={index}>
+          <input
+            className="em-input"
+            type="url"
+            placeholder="https://…"
+            aria-label="URL"
+            value={link.url}
+            onChange={set(index, 'url')}
+            onKeyDown={onKeyDown}
+            autoFocus={index === links.length - 1}
+          />
+          <input
+            className="em-input"
+            placeholder="Label"
+            aria-label="Label"
+            value={link.label ?? ''}
+            onChange={set(index, 'label')}
+            onKeyDown={onKeyDown}
+          />
+          <button
+            type="button"
+            className="em-remove"
+            aria-label={`Remove ${link.url || 'link'}`}
+            onClick={() => onChange(links.filter((_, at) => at !== index))}
+          >
+            ×
+          </button>
+        </div>
+      ))}
+      <button type="button" className="em-item em-muted em-clear" onClick={() => onChange([...links, { url: '', label: '' }])}>
+        <span className="em-check">+</span>
+        Add link
+      </button>
+    </div>
+  )
+}
+
+export default function Editor({ fqn, name, property = false, type, values: initial, options: listed = [] }) {
+  const [values, setValues] = useState(initial)
+  const [open, setOpen] = useState(false)
+  const [draft, setDraft] = useState(initial)
+  const [error, setError] = useState('')
+  const cancelled = useRef(false)
+  const labels = new Map(listed.map((option) => [option.value, option.label]))
+  const labelOf = (value) => labels.get(value) ?? value
+  const options = [...listed, ...draft.filter((value) => !labels.has(value)).map((value) => ({ value, label: value }))]
+  const listedType = ['select', 'multiselect', 'text'].includes(type)
+
+  const save = (value) => {
+    setOpen(false)
+    const next = type === 'links' ? linksOf(value) : listOf(value)
+    if (keyOf(next) === keyOf(values)) return
+    const previous = values
+    setValues(next)
+    setError('')
+    post({ fqn, [property ? 'property' : 'key']: name, value: type === 'links' ? next : value }).catch((failure) => {
+      setValues(previous)
+      setError(failure.message)
+    })
+  }
+  const saveDraft = () => save(type === 'multiselect' || type === 'links' ? draft : (draft[0] ?? '').trim())
+
+  // Everything but a select and text keeps a draft and saves it on close, unless Escape closed it.
+  // A multiselect can't save per toggle because every save reloads the page.
+  const onOpenChange = (next) => {
+    if (next) {
+      cancelled.current = false
+      setDraft(type === 'links' && !values.length ? [{ url: '', label: '' }] : values)
+      return setOpen(true)
+    }
+    if (!cancelled.current && (type === 'multiselect' || !listedType)) return saveDraft()
+    setOpen(false)
+  }
+  const onChoose = (option) => {
+    if (type !== 'multiselect') return save(option)
+    setDraft(draft.includes(option) ? draft.filter((value) => value !== option) : [...draft, option])
+  }
+
+  const text = shown(type, values, labelOf)
+  const problem = error && (
+    <span className="em-error" role="alert" title={error}>
+      {' '}
+      not saved
+    </span>
+  )
+
+  if (type === 'boolean') {
+    return (
+      <>
+        <Switch.Root
+          className="em-switch"
+          checked={values[0] === 'true'}
+          onCheckedChange={(checked) => save(String(checked))}
+          aria-label={name}
+        >
+          <Switch.Thumb className="em-thumb" />
+        </Switch.Root>
+        {problem}
+      </>
+    )
+  }
+
+  const editor = listedType ? (
+    <Options type={type} options={options} chosen={draft} onChoose={onChoose} onClear={() => save('')} />
+  ) : type === 'links' ? (
+    <Links links={draft} onChange={setDraft} onSave={saveDraft} />
+  ) : type === 'textarea' ? (
+    <div className="em-command">
+      <textarea
+        className="em-input em-textarea"
+        aria-label={name}
+        value={draft[0] ?? ''}
+        onChange={(event) => setDraft([event.target.value])}
+        onKeyDown={(event) => event.key === 'Enter' && (event.metaKey || event.ctrlKey) && saveDraft()}
+        autoFocus
+      />
+      <p className="em-hint">⌘ or Ctrl + Enter or a click outside saves. Escape cancels. Markdown works.</p>
+    </div>
+  ) : (
+    <div className="em-command">
+      <input
+        className="em-input"
+        type={type === 'line' ? 'text' : type}
+        aria-label={name}
+        value={draft[0] ?? ''}
+        onChange={(event) => setDraft([event.target.value])}
+        onKeyDown={(event) => event.key === 'Enter' && (event.preventDefault(), saveDraft())}
+        autoFocus
+      />
+      <p className="em-hint">Enter or a click outside saves. Escape cancels.{name === 'title' ? '' : ' Empty clears it.'}</p>
+    </div>
+  )
+
+  return (
+    <>
+      <Popover.Root open={open} onOpenChange={onOpenChange}>
+        <Popover.Trigger className={type === 'textarea' ? 'em-value em-multiline' : 'em-value'} aria-label={`Edit ${name}: ${text || 'not set'}`}>
+          {text || '—'}
+        </Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Content
+            className={type === 'textarea' || type === 'links' ? 'em-popover em-wide' : 'em-popover'}
+            align="start"
+            sideOffset={6}
+            onEscapeKeyDown={() => (cancelled.current = true)}
+          >
+            {editor}
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+      {problem}
+    </>
+  )
+}

package/LICENSE

@@ -0,0 +1,7 @@
+Copyright 2020 Igor S. Morozov <igor@morozov.is>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/Metadata.astro

@@ -1,6 +1,7 @@
 ---
 import { existsSync, readFileSync } from 'node:fs'
 import config from 'virtual:editable-metadata/config'
+import Editor from './Editor.jsx'
 import { model } from './model.js'
 
 interface Props {
@@ -8,150 +9,40 @@ interface Props {
   name: string
 }
 
+type Option = string | { value: string; label?: string }
+
 const types = ['text', 'number', 'date', 'url', 'boolean', 'select', 'multiselect']
 
 const { of, name } = Astro.props
 const fields = existsSync(config.fieldsFile) ? JSON.parse(readFileSync(config.fieldsFile, 'utf8')) : {}
-const field: { type: string; options?: string[] } = fields[name] ?? { type: 'text' }
+const field: { type: string; options?: Option[] } = fields[name] ?? { type: 'text' }
 if (!types.includes(field.type)) {
   throw new Error(`Unknown type "${field.type}" for metadata "${name}". Known types: ${types.join(', ')}`)
 }
 
 const valuesOf = (fqn: string) => [model.element(fqn).getMetadata(name) ?? []].flat()
 const values = valuesOf(of)
-const inUse = [...model.elements()].flatMap((element) => valuesOf(element.id))
-const options = [...new Set([...(field.options ?? []), ...inUse])]
-
-const text = field.type === 'boolean' && values.length ? (values[0] === 'true' ? 'Yes' : 'No') : values.join(', ')
+const listed = (field.options ?? []).map((option) =>
+  typeof option === 'string' ? { value: option, label: option } : { value: option.value, label: option.label ?? option.value },
+)
+const labels = new Map(listed.map((option) => [option.value, option.label]))
+const inUse = [...new Set([...model.elements()].flatMap((element) => valuesOf(element.id)))]
+const options = [...listed, ...inUse.filter((value) => !labels.has(value)).map((value) => ({ value, label: value }))]
+
+const text =
+  field.type === 'boolean' && values.length
+    ? values[0] === 'true'
+      ? 'Yes'
+      : 'No'
+    : values.map((value) => labels.get(value) ?? value).join(', ')
 ---
 
 {
   import.meta.env.DEV ? (
-    <span
-      class="model-metadata not-content"
-      tabindex="0"
-      data-fqn={of}
-      data-key={name}
-      data-type={field.type}
-      data-values={JSON.stringify(values)}
-      data-options={JSON.stringify(options)}
-    >{text}</span>
+    <Editor client:load fqn={of} name={name} type={field.type} values={values} options={options} />
   ) : field.type === 'url' && text ? (
     <a href={text}>{text}</a>
   ) : (
     text
   )
 }
-
-<style is:global>
-  .model-metadata {
-    border-bottom: 1px dashed currentColor;
-    cursor: pointer;
-  }
-  .model-metadata:empty::before {
-    content: '—';
-  }
-  .model-metadata.editing {
-    border-bottom: none;
-    cursor: auto;
-  }
-  .model-metadata label {
-    margin-inline-end: 0.75em;
-  }
-</style>
-
-<script>
-  if (import.meta.env.DEV) {
-    const create = <K extends keyof HTMLElementTagNameMap>(tag: K, props: Partial<HTMLElementTagNameMap[K]> = {}) =>
-      Object.assign(document.createElement(tag), props)
-
-    const edit = (el: HTMLElement) => {
-      const type = el.dataset.type!
-      const values: string[] = JSON.parse(el.dataset.values!)
-      const options: string[] = JSON.parse(el.dataset.options!)
-      const display = el.textContent
-      const controls: HTMLElement[] = []
-      let read: () => string | string[]
-
-      if (type === 'multiselect') {
-        const boxes = options.map((option) =>
-          create('input', { type: 'checkbox', value: option, checked: values.includes(option) }),
-        )
-        for (const box of boxes) {
-          const label = create('label')
-          label.append(box, ` ${box.value}`)
-          controls.push(label)
-        }
-        read = () => boxes.filter((box) => box.checked).map((box) => box.value)
-      } else if (type === 'select') {
-        const select = create('select')
-        for (const option of ['', ...options]) select.append(create('option', { value: option, textContent: option }))
-        select.value = values[0] ?? ''
-        controls.push(select)
-        read = () => select.value
-      } else if (type === 'boolean') {
-        const box = create('input', { type: 'checkbox', checked: values[0] === 'true' })
-        controls.push(box)
-        read = () => String(box.checked)
-      } else {
-        const input = create('input', { type, value: values[0] ?? '' })
-        controls.push(input)
-        if (type === 'text') {
-          const list = create('datalist', { id: `model-metadata-${el.dataset.key}` })
-          for (const option of options) list.append(create('option', { value: option }))
-          input.setAttribute('list', list.id)
-          controls.push(list)
-        }
-        read = () => input.value.trim()
-      }
-
-      let dirty = false
-      let closed = false
-      // Checkboxes and labels don't reliably take focus on click, so leaving is detected by where the pointer goes.
-      const outside = (event: Event) => el.contains(event.target as Node) || close(true)
-      const close = async (save: boolean) => {
-        if (closed) return
-        closed = true
-        document.removeEventListener('pointerdown', outside)
-        const value = read()
-        el.classList.remove('editing')
-        el.textContent = display
-        if (!save || !dirty) return
-        const response = await fetch('/__model/metadata', {
-          method: 'POST',
-          body: JSON.stringify({ fqn: el.dataset.fqn, key: el.dataset.key, value }),
-        })
-        // On success the dev server sees the model change and reloads the page with the new value.
-        if (response.ok) el.textContent = [value].flat().join(', ')
-        else console.error(await response.text())
-      }
-
-      el.classList.add('editing')
-      el.replaceChildren(...controls)
-      el.querySelector<HTMLElement>('input, select')!.focus()
-      el.oninput = () => (dirty = true)
-      el.onchange = () => {
-        dirty = true
-        if (type === 'select' || type === 'boolean') close(true)
-      }
-      el.onkeydown = (event) => {
-        if (event.key === 'Enter') close(true)
-        if (event.key === 'Escape') close(false)
-      }
-      el.onfocusout = (event) => {
-        const next = event.relatedTarget as Node | null
-        if (next && !el.contains(next)) close(true)
-      }
-      document.addEventListener('pointerdown', outside)
-    }
-
-    const start = (event: Event) => {
-      const el = (event.target as HTMLElement).closest<HTMLElement>('.model-metadata:not(.editing)')
-      if (!el || (event instanceof KeyboardEvent && event.key !== 'Enter')) return
-      event.preventDefault()
-      edit(el)
-    }
-    document.addEventListener('click', start)
-    document.addEventListener('keydown', start)
-  }
-</script>

package/NoEditor.jsx

@@ -0,0 +1,3 @@
+export default function NoEditor() {
+  return null
+}

package/Property.astro

@@ -0,0 +1,38 @@
+---
+import Editor from './Editor.jsx'
+import { model } from './model.js'
+
+interface Props {
+  of: string
+  name: 'title' | 'summary' | 'description' | 'technology' | 'links'
+}
+
+const types = { title: 'line', technology: 'line', summary: 'textarea', description: 'textarea', links: 'links' }
+
+const { of, name } = Astro.props
+const type = types[name]
+if (!type) throw new Error(`Unknown property "${name}". Known properties: ${Object.keys(types).join(', ')}`)
+
+const element = model.element(of)
+const rich = name === 'summary' || name === 'description' ? element[name] : null
+const links = element.links.map(({ url, title }) => (title ? { url, label: title } : { url }))
+const values =
+  name === 'links' ? links : [rich ? (rich.$source?.md ?? rich.$source?.txt ?? '') : (element[name] ?? '')].filter(Boolean)
+---
+
+{
+  import.meta.env.DEV ? (
+    <Editor client:load fqn={of} name={name} property type={type} values={values} />
+  ) : name === 'links' ? (
+    links.map((link, index) => (
+      <>
+        {index > 0 && ', '}
+        <a href={link.url}>{link.label ?? link.url}</a>
+      </>
+    ))
+  ) : rich?.isMarkdown ? (
+    <Fragment set:html={rich.html} />
+  ) : (
+    values.join('')
+  )
+}

package/README.md

@@ -1,6 +1,6 @@
 # @architecture-model/editable-metadata
 
-Shows the metadata of [LikeC4](https://likec4.dev/) elements in [Astro](https://astro.build/) pages. In the dev server the values are click-to-edit and save back to the model; in the built site they are plain text.
+Shows the metadata and properties of [LikeC4](https://likec4.dev/) elements in [Astro](https://astro.build/) pages. In the dev server the values are click-to-edit and save back to the model; in the built site they are plain text.
 
 Made for repositories created with `npm create @architecture-model`, and works in any Astro site that has a LikeC4 model.
 
@@ -13,7 +13,7 @@ npx astro add @architecture-model/editable-metadata
 or by hand:
 
 ```bash
-npm install @architecture-model/editable-metadata
+npm install @architecture-model/editable-metadata @astrojs/react react react-dom
 ```
 
 ```js
@@ -47,7 +47,9 @@ Owner: <Metadata of="system" name="owner" />
 
 `of` is the element's fully qualified name, `name` is the metadata key. Keep the component on the same line as its label.
 
-Run `npm run dev` and click the value to edit it. Enter or a click elsewhere saves, Escape cancels, and an empty value removes the key from the model.
+Run `npm run dev` and click the value to edit it. A select saves the option you choose, text saves the value you choose or add, and a multiselect, number, date or url saves when its editor closes. Escape closes without saving, and Clear or an empty value removes the key from the model.
+
+The editors are React components built on [Radix](https://www.radix-ui.com/) and [cmdk](https://cmdk.paco.me/). The addon adds Astro's React integration if the site doesn't have it, and the built site contains none of the editor code.
 
 ## Field types
 
@@ -63,14 +65,55 @@ Without configuration every key is text. To give keys other types, create `model
 
 | Type | Editor | Stored in the model as |
 | --- | --- | --- |
-| `text` | text input that suggests values already used for the key | string |
+| `text` | searchable list of the values already used for the key, and adds what you type | string |
 | `number`, `date`, `url` | the browser's input for that type | string |
-| `boolean` | checkbox | `'true'` or `'false'`, shown as Yes or No |
-| `select` | dropdown | string |
-| `multiselect` | a checkbox per option | list of strings |
+| `boolean` | switch | `'true'` or `'false'`, shown as Yes or No |
+| `select` | searchable list of the options | string |
+| `multiselect` | searchable list of the options, several can be checked | list of strings |
 
 The options of `select` and `multiselect` are the ones listed plus every value already in use in the model. A `url` is a link in the built site.
 
+An option can have a label that pages and editors show in place of the stored value:
+
+```json
+{
+  "owners": { "type": "multiselect", "options": [{ "value": "igor", "label": "Igor Morozov" }, "platform-team"] }
+}
+```
+
+## Derived values
+
+A value that follows from the model, such as whether an external system calls you back, is asked in the page instead of stored in the model. Define a function of the [element](https://likec4.dev/tooling/model-api/) and the model, and show its answer with `Derived`:
+
+```mdx
+import Derived from '@architecture-model/editable-metadata/Derived.astro'
+
+export const ours = (element, model) => element.id === 'shop' || element.isDescendantOf(model.element('shop'))
+export const callsBack = (element, model) => [...element.outgoing()].some(({ target }) => ours(target, model))
+
+Payments calls us back: <Derived of="payments" value={callsBack} />
+```
+
+A function returns a string, a number, a list, or a boolean, shown as Yes or No. A derived value is never editable.
+
+## Properties
+
+`Property` shows and edits an element's own `title`, `summary`, `description`, `technology` or `links`:
+
+```mdx
+import Property from '@architecture-model/editable-metadata/Property.astro'
+
+<Property of="system" name="description" />
+```
+
+| Property | Editor | In the built site |
+| --- | --- | --- |
+| `title`, `technology` | one-line input | text |
+| `summary`, `description` | text area; ⌘ or Ctrl + Enter saves, line breaks are saved as a Markdown string | Markdown rendered as HTML |
+| `links` | a URL and a label per row | links |
+
+A title can't be emptied. Links replace the element's own links, and a row without a URL is dropped.
+
 ## Options
 
 ```js
@@ -84,4 +127,4 @@ Both paths are relative to the Astro project root.
 
 ## How it saves
 
-The dev server gets an endpoint that rewrites the element's `metadata` block with [likec4-mutator](https://github.com/rebaseandpanic/likec4-mutator), leaving the rest of the file as it was. It only accepts requests from the page itself, and it does not exist in the built site.
+The dev server gets an endpoint that rewrites the edited metadata key or property of the element with [likec4-mutator](https://github.com/rebaseandpanic/likec4-mutator), leaving the rest of the file as it was. It only accepts requests from the page itself, and it does not exist in the built site.

package/editor.css

@@ -0,0 +1,163 @@
+.em-value {
+  all: unset;
+  cursor: pointer;
+  border-bottom: 1px dashed currentColor;
+}
+.em-multiline {
+  white-space: pre-line;
+}
+.em-value:focus-visible {
+  outline: 2px solid var(--sl-color-accent, Highlight);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.em-popover {
+  --em-bg: var(--sl-color-bg, Canvas);
+  --em-border: var(--sl-color-hairline-light, #d4d4d8);
+  --em-hover: var(--sl-color-gray-6, #f4f4f5);
+  --em-muted: var(--sl-color-gray-3, #71717a);
+  z-index: 100;
+  min-width: 14rem;
+  max-width: 20rem;
+  padding: 0.25rem;
+  border: 1px solid var(--em-border);
+  border-radius: 0.5rem;
+  background: var(--em-bg);
+  color: var(--sl-color-text, CanvasText);
+  box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.25);
+  font-family: var(--sl-font, system-ui, sans-serif);
+  font-size: var(--sl-text-sm, 0.875rem);
+  line-height: 1.4;
+}
+
+.em-wide {
+  width: min(32rem, calc(100vw - 2rem));
+  max-width: none;
+}
+
+.em-textarea {
+  min-height: 8rem;
+  resize: vertical;
+}
+
+.em-link {
+  display: grid;
+  grid-template-columns: 3fr 2fr auto;
+  align-items: center;
+}
+.em-link .em-input {
+  min-width: 0;
+}
+.em-remove {
+  all: unset;
+  padding: 0 0.5rem;
+  cursor: pointer;
+  color: var(--em-muted);
+}
+.em-remove:hover,
+.em-remove:focus-visible {
+  color: inherit;
+}
+
+.em-command {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+
+.em-input {
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border: none;
+  border-bottom: 1px solid var(--em-border);
+  padding: 0.5rem 0.5rem 0.6rem;
+  outline: none;
+}
+.em-input::placeholder {
+  color: var(--em-muted);
+}
+
+.em-list {
+  max-height: 16rem;
+  overflow-y: auto;
+  padding-top: 0.25rem;
+}
+
+.em-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  user-select: none;
+}
+.em-item[data-selected='true'],
+.em-clear:hover,
+.em-clear:focus-visible {
+  background: var(--em-hover);
+}
+.em-clear {
+  all: unset;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.25rem;
+  padding: 0.375rem 0.5rem;
+  border-top: 1px solid var(--em-border);
+  border-radius: 0 0 0.25rem 0.25rem;
+  cursor: pointer;
+}
+.em-error {
+  color: var(--sl-color-red, #dc2626);
+  font-size: 0.85em;
+}
+.em-muted,
+.em-empty,
+.em-hint {
+  color: var(--em-muted);
+}
+.em-empty,
+.em-hint {
+  margin: 0;
+  padding: 0.5rem;
+}
+
+.em-check {
+  width: 1rem;
+  text-align: center;
+  color: var(--sl-color-accent, currentColor);
+}
+
+.em-switch {
+  all: unset;
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  width: 2.25rem;
+  height: 1.25rem;
+  border-radius: 999px;
+  background: var(--sl-color-gray-5, #d4d4d8);
+  cursor: pointer;
+}
+.em-switch[data-state='checked'] {
+  background: var(--sl-color-accent, #2563eb);
+}
+.em-switch:focus-visible {
+  outline: 2px solid var(--sl-color-accent, Highlight);
+  outline-offset: 2px;
+}
+.em-thumb {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+  margin: 0.125rem;
+  border-radius: 999px;
+  background: white;
+  transition: transform 100ms;
+}
+.em-thumb[data-state='checked'] {
+  transform: translateX(1rem);
+}

package/editor.js

@@ -1,6 +1,20 @@
+import { randomUUID } from 'node:crypto'
 import { globSync, readFileSync, writeFileSync } from 'node:fs'
 import { join } from 'node:path'
 
+export const properties = ['title', 'summary', 'description', 'technology', 'links']
+
+const update = async (dir, fqn, patch, rewrite = (text) => text) => {
+  const sources = Object.fromEntries(
+    globSync('**/*.c4', { cwd: dir }).map((file) => [file, readFileSync(join(dir, file), 'utf8')]),
+  )
+  const { LikeC4Mutator } = await import('likec4-mutator')
+  const mutator = LikeC4Mutator.fromFiles(sources)
+  const { changedFiles } = mutator.updateElement(fqn, patch)
+  const updated = mutator.serialize()
+  for (const file of changedFiles) writeFileSync(join(dir, file), rewrite(updated[file]))
+}
+
 export async function setMetadata(dir, { fqn, key, value }) {
   const values = [value].flat().map((item) => (typeof item === 'string' ? item.trim() : item))
   if (typeof fqn !== 'string' || !/^[A-Za-z_][\w-]*$/.test(key) || values.some((item) => typeof item !== 'string')) {
@@ -8,15 +22,31 @@ export async function setMetadata(dir, { fqn, key, value }) {
   }
   const present = values.filter(Boolean)
   const stored = present.length ? (Array.isArray(value) ? present : present[0]) : null
+  await update(dir, fqn, { metadata: { [key]: stored } })
+}
 
-  const sources = Object.fromEntries(
-    globSync('**/*.c4', { cwd: dir }).map((file) => [file, readFileSync(join(dir, file), 'utf8')]),
-  )
-  const { LikeC4Mutator } = await import('likec4-mutator')
-  const mutator = LikeC4Mutator.fromFiles(sources)
-  const { changedFiles } = mutator.updateElement(fqn, { metadata: { [key]: stored } })
-  const updated = mutator.serialize()
-  for (const file of changedFiles) writeFileSync(join(dir, file), updated[file])
+// likec4-mutator writes a summary or description on one line, so a multi-line one goes in as a token and is swapped for a Markdown string.
+const asMarkdown = (token, value) => (text) =>
+  text.replace(new RegExp(`^([ \\t]*)(.*)'${token}'`, 'm'), (_, indent, before) => {
+    const lines = value.split(/\r?\n/).map((line) => line && `${indent}  ${line.replace(/\\/g, '\\\\').replace(/'(?=')/g, "\\'")}`)
+    return `${indent}${before}'''\n${lines.join('\n')}\n${indent}'''`
+  })
+
+export async function setProperty(dir, { fqn, property, value }) {
+  if (typeof fqn !== 'string' || !properties.includes(property)) {
+    throw new Error(`Expected { fqn, property, value } with one of ${properties.join(', ')} as the property`)
+  }
+  if (property === 'links') {
+    const valid = Array.isArray(value) && value.every((link) => /^\S+$/.test(link?.url) && ['string', 'undefined'].includes(typeof link.label))
+    if (!valid) throw new Error('Expected links as a list of { url, label } with no spaces in the url')
+    return update(dir, fqn, { links: value.map(({ url, label }) => (label?.trim() ? { url, label: label.trim() } : { url })) })
+  }
+  if (typeof value !== 'string') throw new Error(`Expected ${property} as a string`)
+  const text = value.trim()
+  if (property === 'title' && !text) throw new Error('An element needs a title')
+  if (!/\n/.test(text) || ['title', 'technology'].includes(property)) return update(dir, fqn, { [property]: text })
+  const token = `editable${randomUUID().replaceAll('-', '')}`
+  await update(dir, fqn, { [property]: token }, asMarkdown(token, text))
 }
 
 export const editor = ({ modelDir, fieldsFile }) => ({
@@ -31,7 +61,7 @@ export const editor = ({ modelDir, fieldsFile }) => ({
       server.ws.send({ type: 'full-reload' })
     })
 
-    server.middlewares.use('/__model/metadata', async (req, res) => {
+    server.middlewares.use('/__model/element', async (req, res) => {
       // The endpoint writes to disk, so a page from another site must not be able to call it.
       if (req.method !== 'POST' || req.headers['sec-fetch-site'] !== 'same-origin') {
         res.statusCode = 403
@@ -40,7 +70,8 @@ export const editor = ({ modelDir, fieldsFile }) => ({
       try {
         let body = ''
         for await (const chunk of req) body += chunk
-        await setMetadata(modelDir, JSON.parse(body))
+        const change = JSON.parse(body)
+        await ('property' in change ? setProperty : setMetadata)(modelDir, change)
         res.statusCode = 204
         res.end()
       } catch (error) {

package/index.js

@@ -1,18 +1,34 @@
-import { resolve } from 'node:path'
+import react from '@astrojs/react'
+import { dirname, resolve } from 'node:path'
 import { fileURLToPath } from 'node:url'
 import { editor } from './editor.js'
 
 const name = '@architecture-model/editable-metadata'
 const virtual = 'virtual:editable-metadata/config'
+const here = dirname(fileURLToPath(import.meta.url))
+const editorFile = resolve(here, 'Editor.jsx')
+
+// The editor only runs in the dev server, so the build gets an empty component instead of Radix and cmdk.
+const withoutEditor = {
+  name: 'editable-metadata-no-editor',
+  enforce: 'pre',
+  resolveId: (id, importer) => {
+    const path = id.split('?')[0]
+    const absolute = path.startsWith('.') && importer ? resolve(dirname(importer.split('?')[0]), path) : path
+    return absolute === editorFile ? resolve(here, 'NoEditor.jsx') : undefined
+  },
+}
 
 export default function editableMetadata({ model = 'model', fields = 'model/metadata.json' } = {}) {
   return {
     name,
     hooks: {
-      'astro:config:setup': ({ config, updateConfig }) => {
+      'astro:config:setup': ({ config, command, updateConfig }) => {
         const root = fileURLToPath(config.root)
         const paths = { modelDir: resolve(root, model), fieldsFile: resolve(root, fields) }
+        const hasReact = config.integrations.some((integration) => integration.name === '@astrojs/react')
         updateConfig({
+          integrations: hasReact ? [] : [react()],
           vite: {
             ssr: { noExternal: [name] },
             plugins: [
@@ -22,6 +38,7 @@ export default function editableMetadata({ model = 'model', fields = 'model/meta
                 load: (id) => (id === `\0${virtual}` ? `export default ${JSON.stringify(paths)}` : undefined),
               },
               editor(paths),
+              command === 'build' && withoutEditor,
             ],
           },
         })

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@architecture-model/editable-metadata",
-  "version": "0.1.0",
-  "description": "Show LikeC4 element metadata in Astro pages and edit it in place in the dev server",
+  "version": "0.3.0",
+  "description": "Show LikeC4 element metadata and properties in Astro pages and edit them in place in the dev server",
   "keywords": [
     "astro-integration",
     "astro-component",
@@ -19,25 +19,38 @@
   "type": "module",
   "exports": {
     ".": "./index.js",
-    "./Metadata.astro": "./Metadata.astro"
+    "./Metadata.astro": "./Metadata.astro",
+    "./Property.astro": "./Property.astro",
+    "./Derived.astro": "./Derived.astro"
   },
   "files": [
     "index.js",
     "editor.js",
     "model.js",
-    "Metadata.astro"
+    "Metadata.astro",
+    "Property.astro",
+    "Derived.astro",
+    "Editor.jsx",
+    "NoEditor.jsx",
+    "editor.css"
   ],
   "engines": {
     "node": ">=22.22.3"
   },
-  "scripts": {
-    "test": "node --test"
-  },
   "peerDependencies": {
+    "@astrojs/react": ">=7",
     "astro": ">=7",
-    "likec4": "^1.59.4"
+    "likec4": "^1.59.4",
+    "react": ">=19",
+    "react-dom": ">=19"
   },
   "dependencies": {
+    "@radix-ui/react-popover": "^1.3.1",
+    "@radix-ui/react-switch": "^1.4.1",
+    "cmdk": "^1.1.1",
     "likec4-mutator": "0.9.0"
+  },
+  "scripts": {
+    "test": "node --test"
   }
-}
+}