@panphora/bevel 0.1.0

package/examples/components/reference/sources/hypercms/src/styles.css

@@ -0,0 +1,298 @@
+.hcms-shell {
+  --hcms-primary: #2563eb;
+  --hcms-bg: #F6F7F9;
+  --hcms-text: #0f172a;
+  --hcms-muted: #64748b;
+  --hcms-border: #e2e8f0;
+  --hcms-error: #b91c1c;
+  --hcms-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-family: var(--hcms-font-family);
+  font-size: 14px;
+  line-height: 1.45;
+  color: var(--hcms-text);
+  background: var(--hcms-bg);
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 100vw;
+  max-width: 400px;
+  overflow-y: auto;
+  border-left: 1px solid var(--hcms-border);
+  z-index: 2147483000;
+  display: flex;
+  flex-direction: column;
+  box-shadow: -4px 0 24px rgba(15, 23, 42, 0.08);
+}
+
+.hcms-shell.hcms-side-left {
+  left: 0;
+  right: auto;
+  border-left: 0;
+  border-right: 1px solid var(--hcms-border);
+  box-shadow: 4px 0 24px rgba(15, 23, 42, 0.08);
+}
+
+.hcms-shell * {
+  box-sizing: border-box;
+}
+
+.hcms-shell-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid var(--hcms-border);
+}
+
+.hcms-shell-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.hcms-shell-close {
+  background: transparent;
+  border: 0;
+  color: var(--hcms-muted);
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 4px 8px;
+  border-radius: 6px;
+}
+.hcms-shell-close:hover { background: rgba(15, 23, 42, 0.06); color: var(--hcms-text); }
+
+.hcms-shell-error {
+  margin: 12px 16px;
+  padding: 10px 12px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  color: var(--hcms-error);
+  border-radius: 6px;
+  font-size: 13px;
+}
+
+.hcms-form {
+  flex: 1;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.hcms-field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.hcms-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--hcms-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.hcms-input {
+  font-family: inherit;
+  font-size: 14px;
+  padding: 8px 10px;
+  border: 1px solid var(--hcms-border);
+  border-radius: 6px;
+  background: #fdfdfd;
+  color: var(--hcms-text);
+  width: 100%;
+}
+.hcms-input:focus {
+  outline: 2px solid var(--hcms-primary);
+  outline-offset: -1px;
+  border-color: var(--hcms-primary);
+}
+
+textarea.hcms-input { min-height: 80px; resize: vertical; }
+
+.hcms-object {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 12px;
+  border: 1px solid var(--hcms-border);
+  border-radius: 8px;
+  background: #fdfdfd;
+}
+
+.hcms-object-title,
+.hcms-array-title {
+  margin: 0 0 8px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--hcms-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.hcms-array {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.hcms-array-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.hcms-array-items {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.hcms-array-item,
+.hcms-card {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  background: #fdfdfd;
+  border: 1px solid var(--hcms-border);
+  border-radius: 6px;
+}
+
+.hcms-card {
+  flex-direction: column;
+  align-items: stretch;
+  padding: 12px;
+  gap: 10px;
+}
+
+.hcms-card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.hcms-card-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.hcms-drag-handle {
+  cursor: grab;
+  color: var(--hcms-muted);
+  user-select: none;
+  font-family: monospace;
+  font-size: 14px;
+}
+
+.hcms-remove,
+.hcms-add {
+  font-family: inherit;
+  background: transparent;
+  border: 1px solid var(--hcms-border);
+  border-radius: 6px;
+  padding: 4px 10px;
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--hcms-muted);
+}
+.hcms-remove:hover { color: var(--hcms-error); border-color: #fecaca; }
+.hcms-add { align-self: flex-start; padding: 6px 12px; color: var(--hcms-text); }
+.hcms-add:hover { border-color: var(--hcms-primary); color: var(--hcms-primary); }
+
+.hcms-error {
+  margin: 6px 0;
+  padding: 6px 10px;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  color: var(--hcms-error);
+  border-radius: 6px;
+  font-size: 12px;
+}
+.hcms-error[hidden] { display: none; }
+
+.hcms-shell-footer {
+  border-top: 1px solid var(--hcms-border);
+  padding: 12px 16px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.hcms-shell-save {
+  font-family: inherit;
+  background: var(--hcms-primary);
+  color: #fdfdfd;
+  border: 0;
+  border-radius: 6px;
+  padding: 8px 16px;
+  font-size: 14px;
+  cursor: pointer;
+  font-weight: 500;
+}
+.hcms-shell-save:hover { filter: brightness(1.08); }
+
+@media (max-width: 799px) {
+  .hcms-shell { max-width: 100vw; }
+}
+
+/* Scroll lock only when the sidebar covers the page (overlay + mobile fullscreen). In push mode the page keeps its own scroll. */
+body.hcms-open.hcms-overlay {
+  overflow: hidden;
+}
+
+body.hcms-open:not(.hcms-overlay) {
+  padding-right: 400px;
+}
+body.hcms-open.hcms-side-left:not(.hcms-overlay) {
+  padding-right: 0;
+  padding-left: 400px;
+}
+@media (max-width: 799px) {
+  body.hcms-open:not(.hcms-overlay),
+  body.hcms-open.hcms-side-left:not(.hcms-overlay) {
+    padding-right: 0;
+    padding-left: 0;
+  }
+  body.hcms-open {
+    overflow: hidden;
+  }
+}
+
+/* sr-only: visually hidden but accessible to screen readers + becomes
+   visible on keyboard focus, so keyboard users can see move buttons land. */
+.hcms-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+.hcms-sr-only:focus {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 2px 6px;
+  margin: 0 2px;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+  background: #F6F7F9;
+  border: 1px solid #c0c8d6;
+  border-radius: 3px;
+  color: #1f2532;
+  font-size: 12px;
+  cursor: pointer;
+}
+.hcms-sr-only[hidden] { display: none; }

package/examples/components/reference/sources/hypercms/src/targets.js

@@ -0,0 +1,144 @@
+// Every editable thing on the page, as the inline view needs to see it: the
+// element a rule resolved to, the real data path that reaches it, and which
+// affordance belongs on it.
+//
+// This is the same walk `unresolved.js` does, with the opposite output. That one
+// reports paths as strings and collapses every row of a list to a single '*',
+// because it answers "which fields are broken" once for the whole page. The
+// inline view needs the resolved element and the real row index, because it puts
+// a control on each one.
+
+import domAdapter from 'hyper-html-api/dom'
+import { ruleAttrIndex } from 'hyper-html-api/engine'
+
+const FIND_OPTS = { skip: '[data-hcms-shell]', templateAttr: 'cms-template' }
+// templateAttr:null includes the hidden [cms-template] seed. A list that has been
+// emptied down to its seed still has a place on the page — the seed is sitting in
+// it — and that is the one list most in need of an "+ Add" row. Finding the seed
+// is the only way to know where the row goes, so an empty list resolves its
+// container this way and nothing else uses these opts.
+const SEED_OPTS = { skip: '[data-hcms-shell]', templateAttr: null }
+
+// How someone changes this field, in place:
+//
+//   'text'    the page element IS the affordance. richclay binds to it and the
+//             text is edited where it sits; commit on blur.
+//   'native'  the page already carries the control — an enabled input, textarea
+//             or select bound through @value. Add nothing at all: let them use
+//             the control that is already there and commit on change. A readonly
+//             or disabled one is NOT this: the author disabled it on purpose, so
+//             it falls through to a handle rather than being quietly re-enabled.
+//   'handle'  everything else gets a small handle over the anchor's corner,
+//             which opens the popover holding that field's real form control.
+const TEXT = 'text'
+const NATIVE = 'native'
+const HANDLE = 'handle'
+
+const NATIVE_TAGS = new Set(['INPUT', 'TEXTAREA', 'SELECT'])
+
+// Elements that cannot hold editable text, either because they are void or
+// replaced, or because their text content is their value and belongs to the
+// control rather than to the document. A bare rule pointing at one of these is
+// unusual but legal (it extracts ''), and binding a rich text editor to it would
+// put a caret inside an <img>. They get a handle like anything else.
+const NON_TEXT_TAGS = new Set([
+  'IMG', 'INPUT', 'TEXTAREA', 'SELECT', 'OPTION', 'BR', 'HR', 'VIDEO', 'AUDIO',
+  'IFRAME', 'EMBED', 'OBJECT', 'CANVAS', 'SOURCE', 'TRACK', 'AREA', 'COL', 'PARAM',
+  'BUTTON',
+])
+
+export function resolveTargets(root, rules) {
+  const targets = []
+  const lists = []
+  walk(root, rules, [], targets, lists)
+  return { targets, lists }
+}
+
+function walk(ctx, rule, path, targets, lists) {
+  if (typeof rule === 'string') {
+    // A scalar array ("ul.tags li[]"): every match is its own editable item, and
+    // the run of them is a list that can be added to and removed from.
+    if (rule.endsWith('[]')) {
+      const selector = rule.slice(0, -2)
+      if (!selector) return
+      const items = find(ctx, selector)
+      items.forEach((el, i) => {
+        targets.push(describe([...path, i], el, rule, null))
+      })
+      lists.push(makeList(ctx, path, selector, items, true))
+      return
+    }
+    const at = ruleAttrIndex(rule)
+    const attr = at === -1 ? null : rule.slice(at + 1)
+    const selector = at === -1 ? rule : rule.slice(0, at)
+    // "." and a bare "@attr" both address the context node itself, so they can
+    // never fail to resolve and there is nothing to query.
+    const el = !selector || selector === '.' ? ctx : find(ctx, selector)[0]
+    if (el) targets.push(describe(path, el, rule, attr))
+    return
+  }
+
+  if (Array.isArray(rule)) {
+    const [selector, shape] = rule
+    if (typeof selector !== 'string' || !selector) return
+    const items = find(ctx, selector)
+    items.forEach((el, i) => walk(el, shape, [...path, i], targets, lists))
+    lists.push(makeList(ctx, path, selector, items, typeof shape === 'string'))
+    return
+  }
+
+  if (rule && typeof rule === 'object') {
+    for (const [key, sub] of Object.entries(rule)) walk(ctx, sub, [...path, key], targets, lists)
+  }
+}
+
+// `container` is where a new row goes. With rows present it is their shared
+// parent; with none it comes from the seed, which is why an emptied list can
+// still be grown back.
+function makeList(ctx, path, selector, items, scalar) {
+  let container = items[0] ? items[0].parentElement : null
+  if (!container) {
+    const seed = find(ctx, selector, SEED_OPTS)[0]
+    container = seed ? seed.parentElement : null
+  }
+  return { path, items, container, scalar }
+}
+
+function describe(path, el, rule, attr) {
+  return { path, el, rule, attr, kind: kindOf(el, attr), icon: iconOf(el, attr) }
+}
+
+function kindOf(el, attr) {
+  const tag = (el.tagName || '').toUpperCase()
+  if (!attr || attr === 'innerHTML') return NON_TEXT_TAGS.has(tag) ? HANDLE : TEXT
+  if (attr === 'value' && NATIVE_TAGS.has(tag) && !el.readOnly && !isEffectivelyDisabled(el)) return NATIVE
+  return HANDLE
+}
+
+// el.disabled is false for an input inside <fieldset disabled>, but :disabled
+// matches it and the browser will not let anyone type in it. Checking only the
+// property leaves an unusable field with no control at all.
+function isEffectivelyDisabled(el) {
+  if (el.disabled) return true
+  return typeof el.matches === 'function' && el.matches(':disabled')
+}
+
+function iconOf(el, attr) {
+  const tag = (el.tagName || '').toUpperCase()
+  if ((!attr || attr === 'innerHTML') && !NON_TEXT_TAGS.has(tag)) return null
+  if (tag === 'IMG' || attr === 'srcset') return 'camera'
+  if (tag === 'A' && attr === 'href') return 'paperclip'
+  return 'pencil'
+}
+
+function find(ctx, selector, opts = FIND_OPTS) {
+  try {
+    return domAdapter.find(ctx, selector, opts)
+  } catch (_) {
+    // unresolved.js already turns an invalid selector into a named
+    // InvalidRuleSelector before the first extract, so by the time the inline
+    // view walks, a throw here would be a duplicate of an error the session has
+    // already surfaced. Skip the rule instead of taking the whole view down.
+    return []
+  }
+}