@panphora/bevel 0.1.0

package/examples/components/reference/sources/hypercms/src/views/sidebar.js

@@ -0,0 +1,97 @@
+// The sidebar view: the shell panel and the form inside it. Everything here is
+// chrome for one way of rendering a session — the session core (src/session.js)
+// owns the page, the rules and the data.
+
+import { mountShell } from '../shell.js'
+import { buildForm } from '../form-builder.js'
+import { bindEvents, suppressUndo } from '../events.js'
+import { enhanceFields, upgradeRichTextRules } from '../enhance.js'
+import { applyUnresolvedState } from '../unresolved.js'
+import { refreshForm } from '../refresh.js'
+
+const FOCUSABLE =
+  'input:not([disabled]):not([type="hidden"]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex="-1"])'
+
+export function createSidebarView({ doc, pageRoot, opts = {} }) {
+  // Rich-text upgrade (default on). Opt out with cms.open({ richText: false }).
+  const richText = opts.richText !== false
+  let shell = null
+
+  return {
+    name: 'sidebar',
+    richText,
+    // The form IS the editing surface here, so its rich-text fields are the
+    // ones richclay has to be on.
+    enhanceFormRichText: true,
+    ctx: null,
+    root: null,
+    formRoot: null,
+    errorEl: null,
+    noticeEl: null,
+
+    prepareRules(sourceRules) {
+      return richText ? upgradeRichTextRules(sourceRules, pageRoot) : sourceRules
+    },
+
+    mount(initialData) {
+      const ctx = this.ctx
+      // Suppress undo around mountShell: it toggles chrome-only classes on
+      // document.body (hcms-open, etc.) which would otherwise land as undoable
+      // page edits. The shell subtree itself is already filtered via save-ignore.
+      shell = suppressUndo(() => mountShell({
+        mountTo: opts.mountTo || doc.body,
+        side: opts.side || 'right',
+        overlay: !!opts.overlay,
+        showSaveButton: !!opts.showSaveButton,
+        title: opts.title,
+        eyebrow: opts.eyebrow,
+        theme: opts.theme,
+        doc,
+      }))
+      this.root = shell.root
+      this.formRoot = shell.formRoot
+      this.errorEl = shell.errorEl
+      this.noticeEl = shell.noticeEl
+
+      const fragment = buildForm({
+        pageRules: ctx.pageRules,
+        formRules: ctx.formRules,
+        data: initialData,
+        doc,
+      })
+      shell.formRoot.appendChild(fragment)
+      ctx.seeder.seed(shell.formRoot)
+      enhanceFields(shell.formRoot, doc)
+      applyUnresolvedState(ctx)
+
+      bindEvents(ctx)
+    },
+
+    refresh(reason) {
+      if (reason === 'livesync') {
+        // A full-document morph can wipe the shell's <head> stylesheet and the
+        // <body> chrome classes (both live outside the save-ignore shell subtree).
+        // Re-assert them before re-extracting.
+        shell?.restoreChrome?.()
+        refreshForm(this.ctx, { ignoreActiveValue: true })
+        return
+      }
+      if (reason === 'undo') {
+        refreshForm(this.ctx, { ignoreActiveValue: false })
+        return
+      }
+      refreshForm(this.ctx)
+    },
+
+    // Move focus into the shell — survives close+restore via previouslyFocused.
+    focusOnOpen() {
+      const target = this.root && this.root.querySelector(FOCUSABLE)
+      if (target && typeof target.focus === 'function') target.focus()
+    },
+
+    destroy() {
+      shell?.destroy()
+      shell = null
+    },
+  }
+}

package/examples/components/reference/sources/modal-reference.html

@@ -0,0 +1,301 @@
+<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Hyperclay modal source reference</title><style class="micromodal-css">
+.micromodal {
+  display: none;
+  color: #fff;
+  font-family: var(--hyperclay-modal-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
+  font-size: var(--hyperclay-modal-font-size, 18px);
+}
+
+.micromodal button:not(.custom-button) {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  margin: 0;
+  width: auto;
+  overflow: visible;
+  font: inherit;
+  line-height: inherit;
+  text-transform: none;
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  outline: 0;
+}
+
+.micromodal .micromodal__hide {
+  display: none;
+}
+
+.micromodal.is-open {
+  display: block;
+}
+
+.micromodal__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0,0,0,.65);
+}
+
+.micromodal__container {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  max-width: min(550px, calc(100vw - 2rem));
+  max-height: calc(100vh - 4rem);
+  max-height: calc(100dvh - 2rem);
+  box-sizing: border-box;
+  overflow: hidden;
+  border: 2px solid #FFFFFF;
+  background-color: #11131E;
+}
+
+.micromodal__inner {
+  overflow-x: hidden;
+  overflow-y: auto;
+  /* Must subtract container's 4px border (2px top + 2px bottom) from max-height,
+     otherwise inner overflows past container since box-sizing: border-box
+     makes the container's content area smaller than its max-height */
+  max-height: calc(100dvh - 2rem - 4px);
+  padding: 26px 40px 40px 40px;
+}
+
+@media (min-width: 640px) {
+  .micromodal .micromodal__inner {
+    padding: 52px 64px 60px 64px;
+  }
+}
+
+.micromodal[aria-hidden="false"] .micromodal__overlay {
+  animation: microModalFadeIn .2s cubic-bezier(0.0, 0.0, 0.2, 1);
+}
+
+.micromodal[aria-hidden="false"] .micromodal__container {
+  animation: microModalSlideIn .2s cubic-bezier(0, 0, .2, 1);
+}
+
+.micromodal .micromodal__container,
+.micromodal .micromodal__overlay {
+  will-change: transform;
+}
+
+@keyframes microModalFadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+@keyframes microModalSlideIn {
+  from { transform: translateY(15%); }
+  to { transform: translateY(0); }
+}
+
+.micromodal .micromodal__content {
+  margin-bottom: 14px;
+  overflow-wrap: anywhere;
+}
+
+.micromodal .micromodal__heading {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: 8px;
+  overflow-wrap: anywhere;
+}
+
+.micromodal .micromodal__input {
+  width: min(calc(100vw - 100px), 420px);
+  padding: 6px 6px 7px;
+  font-size: var(--hyperclay-modal-input-font-size, 16px);
+  color: #000;
+  background: #fff;
+}
+
+.micromodal .micromodal__input:focus, .micromodal .micromodal__input:active {
+  outline: 3px solid #6A73B6;
+}
+
+.micromodal button.micromodal__yes {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 39px;
+  line-height: 0;
+  border: 3px solid;
+  border-top-color: #94BA6F;
+  border-left-color: #94BA6F;
+  border-bottom-color: #1A3004;
+  border-right-color: #1A3004;
+  background-color: #49870B;
+}
+
+.micromodal button.micromodal__yes:focus,
+.micromodal button.micromodal__yes:hover {
+  background-color: #549B0D;
+}
+
+.micromodal button.micromodal__yes:active {
+  border-top-color: #1A3004;
+  border-left-color: #1A3004;
+  border-bottom-color: #94BA6F;
+  border-right-color: #94BA6F;
+}
+
+.micromodal button.micromodal__secondary-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 39px;
+  line-height: 0;
+  border: 3px solid;
+  border-top-color: #474C65;
+  border-left-color: #474C65;
+  border-bottom-color: #131725;
+  border-right-color: #131725;
+  background-color: #1D1F2F;
+  color: #E5E7EB;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: bold;
+}
+
+.micromodal button.micromodal__secondary-btn:focus,
+.micromodal button.micromodal__secondary-btn:hover {
+  background-color: #232639;
+}
+
+.micromodal button.micromodal__secondary-btn:active {
+  border-top-color: #131725;
+  border-left-color: #131725;
+  border-bottom-color: #474C65;
+  border-right-color: #474C65;
+}
+
+.micromodal:has(.snippet-code-block) .micromodal__content {
+  margin-bottom: 0;
+}
+
+.micromodal .snippet-code-block {
+  background-color: #292E54;
+  padding: 1rem;
+  margin-bottom: 14px;
+  max-width: 420px;
+  overflow-x: auto;
+}
+
+.micromodal .snippet-code-block pre {
+  color: white;
+  font-family: var(--hyperclay-modal-code-font-family, var(--hyperclay-modal-font-family, monospace));
+  font-size: 0.875rem;
+  white-space: nowrap;
+  margin: 0;
+}
+
+.micromodal .snippet-warning {
+  padding: 0.75rem;
+  border: 2px solid #989742;
+  background-color: #1E1E11;
+  font-size: 0.875rem;
+  color: #FBF7B7;
+  max-width: 420px;
+}
+
+.micromodal .snippet-link-box {
+  font-size: 16px;
+  margin-top: 0.75rem;
+  text-align: right;
+}
+
+.micromodal .snippet-link-box a {
+  color: #F6F7F9;
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  padding: 0.35rem 0.45rem;
+  border: 1px solid #474C64;
+  line-height: 1;
+}
+
+.micromodal .snippet-link-box a:hover {
+  color: #E5E7EB;
+  border-color: #75798B;
+}
+
+.micromodal .snippet-link-box a svg {
+  width: 0.85rem;
+  height: 0.85rem;
+  flex-shrink: 0;
+}
+
+.micromodal button.micromodal__close {
+  clip-path: polygon(0% 4%, 0% 0%, 100% 0%, 100% 100%, 94% 100%);
+  position: absolute;
+  top: -1px;
+  right: -1px;
+  width: 68px;
+}
+
+.micromodal .micromodal__close-bg {
+  fill: #1D2032;
+}
+
+.micromodal .micromodal__close:hover .micromodal__close-bg {
+  fill: #212543;
+}
+
+.micromodal .micromodal__close-x {
+  fill: #fff;
+}
+
+.micromodal .micromodal__tell {
+  max-width: 440px;
+  margin-bottom: 28px;
+}
+
+.micromodal .micromodal__tell > * + * {
+  margin-top: 20px;
+}
+
+.micromodal .micromodal__tell-title {
+  font-size: var(--hyperclay-modal-title-font-size, 20px);
+  font-weight: bold;
+}
+
+.micromodal .micromodal__tell-content {
+  font-size: var(--hyperclay-modal-font-size, 16px);
+  font-weight: normal;
+}
+
+@media (min-width: 640px) {
+  .micromodal .micromodal__tell-title {
+    font-size: var(--hyperclay-modal-title-font-size, 22px);
+  }
+  .micromodal .micromodal__tell-content {
+    font-size: var(--hyperclay-modal-font-size, 18px);
+  }
+}
+</style><style>body{margin:0;background:#273047;color:#eee;font:18px monospace}article{padding:50px}</style><article><h1>Field notes</h1><p>Northstar Studio</p></article><div class="micromodal is-open" id="micromodal" aria-hidden="false">
+  <div class="micromodal__overlay" tabindex="-1">
+    <form class="micromodal__container" role="dialog" aria-modal="true">
+      <div class="micromodal__inner">
+        <div class="micromodal__content"><div class="micromodal__heading">Give this document a name.</div><input class="micromodal__input" aria-label="Document name" value="Field notes"></div>
+        <div class="micromodal__buttons">
+          <button class="micromodal__no" type="button">Cancel</button>
+          <button class="micromodal__yes" type="submit">Save name</button>
+        </div>
+      </div>
+      <button class="micromodal__close" type="button" aria-label="Close modal"><svg viewBox="0 0 134 134" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="micromodal__close-bg" d="M132 132.5 1 1.5h131v131Z" /><path class="micromodal__close-x" fill-rule="evenodd" clip-rule="evenodd" d="M0 0h3v1.5h1.5V3H6v1.5h1.5V6H9v1.5h1.5V9H12v1.5h1.5V12H15v1.5h1.5V15H18v1.5h1.5V18H21v1.5h1.5V21H24v1.5h1.5V24H27v1.5h1.5V27H30v1.5h1.5V30H33v1.5h1.5V33H36v1.5h1.5V36H39v1.5h1.5V39H42v1.5h1.5V42H45v1.5h1.5V45H48v1.5h1.5V48H51v1.5h1.5V51H54v1.5h1.5V54H57v1.5h1.5V57H60v1.5h1.5V60H63v1.5h1.5V63H66v1.5h1.5V66H69v1.5h1.5V69H72v1.5h1.5V72H75v1.5h1.5V75H78v1.5h1.5V78H81v1.5h1.5V81H84v1.5h1.5V84H87v1.5h1.5V87H90v1.5h1.5V90H93v1.5h1.5V93H96v1.5h1.5V96H99v1.5h1.5V99h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v1.5h1.5v3h-3V132H129v-1.5h-1.5V129H126v-1.5h-1.5V126H123v-1.5h-1.5V123H120v-1.5h-1.5V120H117v-1.5h-1.5V117H114v-1.5h-1.5V114H111v-1.5h-1.5V111H108v-1.5h-1.5V108H105v-1.5h-1.5V105H102v-1.5h-1.5V102H99v-1.5h-1.5V99H96v-1.5h-1.5V96H93v-1.5h-1.5V93H90v-1.5h-1.5V90H87v-1.5h-1.5V87H84v-1.5h-1.5V84H81v-1.5h-1.5V81H78v-1.5h-1.5V78H75v-1.5h-1.5V75H72v-1.5h-1.5V72H69v-1.5h-1.5V69H66v-1.5h-1.5V66H63v-1.5h-1.5V63H60v-1.5h-1.5V60H57v-1.5h-1.5V57H54v-1.5h-1.5V54H51v-1.5h-1.5V51H48v-1.5h-1.5V48H45v-1.5h-1.5V45H42v-1.5h-1.5V42H39v-1.5h-1.5V39H36v-1.5h-1.5V36H33v-1.5h-1.5V33H30v-1.5h-1.5V30H27v-1.5h-1.5V27H24v-1.5h-1.5V24H21v-1.5h-1.5V21H18v-1.5h-1.5V18H15v-1.5h-1.5V15H12v-1.5h-1.5V12H9v-1.5H7.5V9H6V7.5H4.5V6H3V4.5H1.5V3H0V0ZM108.8 22h5.2v5.1h-2.6v2.6H109v2.6h-2.6v2.6h-2.6v2.5h-2.6v5.2h2.6V45h2.6v2.6h2.6v2.6h2.5v2.6h2.6V58h-5.1v-2.6h-2.6V53h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6h-5.2v2.6H91v2.6h-2.6v2.6h-2.6v2.5h-2.6V58H78v-5.1h2.6v-2.6H83v-2.6h2.6v-2.6h2.6v-2.5h2.6v-5.2h-2.6V35h-2.6v-2.6h-2.6v-2.6h-2.5v-2.6H78V22h5.2v2.6h2.5V27h2.6v2.6h2.6v2.6h2.5v2.6h5.2v-2.6h2.5v-2.6h2.6v-2.6h2.6v-2.5h2.5V22Z" /></svg></button>
+    </form>
+  </div>
+</div><script>document.querySelector("form").addEventListener("submit",event=>event.preventDefault());</script></html>

package/examples/components/reference/sources/quickcrop/quickcrop.css

@@ -0,0 +1,124 @@
+/* quickcrop — pixel-quiet default theme. Override via the --qc-* variables. */
+
+:root {
+  --qc-surface: #f7f2ea;
+  --qc-surface-hover: #efe7d8;
+  --qc-border: #cdbfa6;
+  --qc-text: #2b241b;
+  --qc-text-hover: #463c2e;
+  --qc-on-dark: #efe7d8;
+  --qc-overlay: rgba(43, 36, 27, .6);
+  --qc-dim: rgba(0, 0, 0, .55);
+  --qc-radius: 8px;
+  --qc-crop-line: #fff;
+  --qc-font: ui-sans-serif, system-ui, sans-serif;
+}
+
+/* presence probe: quickcrop.js skips CSS injection when this rule applies */
+.qc-css-probe { position: absolute; }
+
+/* ---- built-in modal ---- */
+.qc-backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--qc-overlay);
+  display: grid;
+  place-items: center;
+  z-index: 1000;
+  animation: qc-fade .15s ease;
+}
+@keyframes qc-fade { from { opacity: 0 } }
+
+.qc-modal {
+  background: var(--qc-surface);
+  border: 1px solid var(--qc-border);
+  border-radius: var(--qc-radius);
+  padding: 16px;
+  max-width: 92vw;
+  font-family: var(--qc-font);
+}
+
+.qc-bar {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 12px;
+}
+
+.qc-btn {
+  font: inherit;
+  font-family: var(--qc-font);
+  font-size: .85rem;
+  padding: .3rem .75rem;
+  border: 1px solid var(--qc-border);
+  border-radius: 6px;
+  background: var(--qc-surface);
+  color: var(--qc-text);
+  cursor: pointer;
+}
+.qc-btn:hover { background: var(--qc-surface-hover); }
+
+.qc-btn-primary {
+  background: var(--qc-text);
+  border-color: var(--qc-text);
+  color: var(--qc-on-dark);
+  font-weight: 600;
+}
+.qc-btn-primary:hover {
+  background: var(--qc-text-hover);
+  border-color: var(--qc-text-hover);
+}
+
+/* ---- crop stage (shared by every modal host) ---- */
+.qc-stage {
+  position: relative;
+  line-height: 0;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: none; /* let pointer events own the gestures */
+}
+.qc-stage img {
+  display: block;
+  max-width: 100%;
+  pointer-events: none;
+}
+
+/* dims the image outside the crop box; the hole is a clip-path set by render() */
+.qc-dim {
+  position: absolute;
+  inset: 0;
+  background: var(--qc-dim);
+  pointer-events: none;
+}
+
+.qc-box {
+  position: absolute;
+  cursor: move;
+  outline: 1px solid var(--qc-crop-line);
+  background:
+    linear-gradient(var(--qc-crop-line), var(--qc-crop-line)) 0 33.33%/100% 1px no-repeat,
+    linear-gradient(var(--qc-crop-line), var(--qc-crop-line)) 0 66.66%/100% 1px no-repeat,
+    linear-gradient(var(--qc-crop-line), var(--qc-crop-line)) 33.33% 0/1px 100% no-repeat,
+    linear-gradient(var(--qc-crop-line), var(--qc-crop-line)) 66.66% 0/1px 100% no-repeat; /* rule-of-thirds */
+  background-blend-mode: overlay;
+}
+
+/* 14px visual square inside a 28px touch target: the transparent border
+   widens the hit area for fingers without changing the look */
+.qc-handle {
+  position: absolute;
+  box-sizing: border-box;
+  width: 28px;
+  height: 28px;
+  border: 7px solid transparent;
+  background: var(--qc-crop-line);
+  background-clip: padding-box;
+  border-radius: 9px; /* reads as 2px on the visible square after the border */
+}
+.qc-nw { left: -14px; top: -14px; cursor: nwse-resize; }
+.qc-ne { right: -14px; top: -14px; cursor: nesw-resize; }
+.qc-sw { left: -14px; bottom: -14px; cursor: nesw-resize; }
+.qc-se { right: -14px; bottom: -14px; cursor: nwse-resize; }
+
+/* mount point inside a host modal (e.g. themodal) */
+.qc-mount { line-height: 0; }