@quario/editor 0.1.0

package/lib/chrome.js

@@ -0,0 +1,431 @@
+/**
+ * The editor's chrome: bar, stage and the one right rail, under stable `qe-*`
+ * class names, plus the default palette — the `:host` block below is the one
+ * place a `--qe-*` fallback is written, and everything else paints from the
+ * `--_*` alias it declares (the viewer's discipline, editor.test.js pins it).
+ * The fallbacks are `light-dark()`, so the host's `color-scheme` pin paints
+ * chrome without a class (ADR 0018): a color scheme reaches chrome only,
+ * never the sheet, the report, or the drag furniture.
+ *
+ * Drag furniture — grips, carets, drop indicators, placeholders — is chrome
+ * by ownership but **sheet-relative in colour**: tuned once for legibility
+ * against the white sheet and never inverted, or a dark scheme would turn the
+ * carets light and vanish them against the paper. Those rules use literal
+ * colours on purpose.
+ *
+ * One token owns the gutter: `--_gutter` sizes both the stage padding left of
+ * the sheet and the sheet's own left padding, so a grip can overlap the item
+ * by a couple of pixels and the two numbers cannot drift.
+ */
+import { css } from "lit";
+
+export let CHROME = css`
+  :host {
+    display: block;
+    color-scheme: light;
+
+    --_backdrop: var(--qe-backdrop, light-dark(#e9e9eb, #1c1c1e));
+    --_text: var(--qe-text, light-dark(#454548, #c7c7cc));
+    --_bar: var(--qe-bar, light-dark(#f8f8f9, #2c2c2e));
+    --_rail: var(--qe-rail, light-dark(#f8f8f9, #2c2c2e));
+    --_border: var(--qe-border, light-dark(#dededf, #3a3a3c));
+    --_icon: var(--qe-icon, light-dark(#58585c, #8e8e93));
+    --_hover: var(--qe-hover, light-dark(#ebebec, #3a3a3c));
+    --_focus: var(--qe-focus, #4a90d9);
+    --_field: var(--qe-field, light-dark(#ffffff, #1c1c1e));
+    --_error: var(--qe-error, light-dark(#fdeded, #3b1c1c));
+    --_error-text: var(--qe-error-text, light-dark(#5f2120, #f5c6c6));
+    --_error-border: var(--qe-error-border, light-dark(#f1c5c5, #6b3434));
+    --_sheet-shadow: var(
+      --qe-sheet-shadow,
+      0 1px 2px light-dark(rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.5)),
+      0 6px 24px light-dark(rgba(0, 0, 0, 0.09), rgba(0, 0, 0, 0.45))
+    );
+
+    /* The gutter's one number: stage chrome left of the sheet, and the
+       sheet's own matching padding. */
+    --_gutter: 28px;
+  }
+
+  .qe-editor {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: var(--_backdrop);
+    color: var(--_text);
+    font: 13px/1.4 system-ui, sans-serif;
+  }
+
+  .qe-bar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    flex: none;
+    padding: 5px 10px;
+    background: var(--_bar);
+    border-bottom: 1px solid var(--_border);
+  }
+
+  .qe-button {
+    appearance: none;
+    border: 0;
+    border-radius: 5px;
+    background: none;
+    color: var(--_icon);
+    font: inherit;
+    padding: 4px 8px;
+    cursor: pointer;
+  }
+
+  .qe-button:hover:not(:disabled) {
+    background: var(--_hover);
+  }
+
+  .qe-button:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  .qe-button:focus-visible {
+    outline: 2px solid var(--_focus);
+    outline-offset: 1px;
+  }
+
+  .qe-button[aria-pressed="true"] {
+    background: var(--_hover);
+    color: var(--_text);
+  }
+
+  .qe-crumbs {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    min-width: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    margin-right: auto;
+  }
+
+  .qe-crumb {
+    font-family: ui-monospace, monospace;
+    font-size: 12px;
+  }
+
+  .qe-crumbs .qe-here {
+    color: var(--_text);
+    font-weight: 600;
+  }
+
+  /* The body: the stage, then the fixed rail. One breakpoint moves the rail
+     below the stage on a narrow host; no docking, no resizing. */
+  .qe-body {
+    position: relative;
+    display: flex;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .qe-rail {
+    flex: none;
+    width: 280px;
+    overflow-y: auto;
+    background: var(--_rail);
+    border-left: 1px solid var(--_border);
+  }
+
+  @media (max-width: 640px) {
+    .qe-body {
+      flex-direction: column;
+    }
+    .qe-rail {
+      width: auto;
+      max-height: 45%;
+      border-left: 0;
+      border-top: 1px solid var(--_border);
+    }
+  }
+
+  .qe-section {
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--_border);
+  }
+
+  .qe-section h3 {
+    margin: 0 0 6px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--_icon);
+  }
+
+  .qe-field {
+    display: block;
+    margin: 6px 0;
+  }
+
+  .qe-field > span {
+    display: block;
+    font-size: 11px;
+    color: var(--_icon);
+    margin-bottom: 2px;
+  }
+
+  .qe-field input[type="text"],
+  .qe-field input[type="number"],
+  .qe-field select,
+  .qe-field textarea {
+    width: 100%;
+    box-sizing: border-box;
+    font: 12px/1.4 ui-monospace, monospace;
+    color: var(--_text);
+    background: var(--_field);
+    border: 1px solid var(--_border);
+    border-radius: 4px;
+    padding: 3px 6px;
+  }
+
+  .qe-row {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+  }
+
+  .qe-inline-error {
+    margin: 2px 0 0;
+    font-size: 11px;
+    color: var(--_error-text);
+  }
+
+  .qe-inline-error u {
+    text-decoration: underline wavy;
+    text-underline-offset: 2px;
+  }
+
+  .qe-problem {
+    display: block;
+    width: 100%;
+    text-align: left;
+    font-size: 12px;
+    padding: 3px 4px;
+    border-radius: 4px;
+    border: 0;
+    background: none;
+    color: var(--_error-text);
+    cursor: pointer;
+  }
+
+  .qe-problem:hover {
+    background: var(--_hover);
+  }
+
+  .qe-group-row {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 2px 0;
+  }
+
+  .qe-group-row .qe-name {
+    flex: 1;
+    font-family: ui-monospace, monospace;
+    font-size: 12px;
+  }
+
+  .qe-panel {
+    position: absolute;
+    inset: 0 0 auto 0;
+    z-index: 3;
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    padding: 8px 12px;
+    background: var(--_error);
+    color: var(--_error-text);
+    border-bottom: 1px solid var(--_error-border);
+  }
+
+  .qe-panel code {
+    font: 12px ui-monospace, monospace;
+    overflow-wrap: anywhere;
+  }
+`;
+
+/**
+ * The stage and the drag furniture. The stage owns the scroll and the gutter;
+ * the sheet stays paper — white by identity, whatever the chrome's scheme.
+ * Furniture colours are literal (sheet-relative), never scheme tokens.
+ */
+export let SURFACE = css`
+  .qe-stage {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    overflow: auto;
+    padding: 24px;
+    padding-left: var(--_gutter);
+  }
+
+  .qe-sheet {
+    position: relative;
+    box-sizing: border-box;
+    margin: 0 auto;
+    background: #fff;
+    color: #000;
+    box-shadow: var(--_sheet-shadow);
+  }
+
+  /* Selection and hover: every instance of the definition lights softly, the
+     clicked one strongly, and hover previews what a click would select. On
+     the sheet, so the colours are sheet-relative. */
+  .qe-peek {
+    outline: 1px dashed #74a5d8;
+    outline-offset: 1px;
+  }
+
+  .qe-hit {
+    outline: 1.5px solid #a5c8ec;
+    outline-offset: 1px;
+  }
+
+  .qe-hit-first {
+    outline: 2px solid #2f76c4;
+    outline-offset: 1px;
+  }
+
+  /* The overlay above the sheet: grips, carets, placeholders. It spans the
+     stage's scrollable content and never takes pointer events itself — each
+     piece of furniture opts back in. */
+  .qe-overlay {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  .qe-grip {
+    position: absolute;
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    padding-top: 1px;
+    width: 18px;
+    color: #9a9aa0;
+    background: none;
+    border: 0;
+    border-radius: 3px;
+    font-size: 12px;
+    line-height: 1.2;
+    cursor: grab;
+    pointer-events: auto;
+  }
+
+  .qe-grip:hover {
+    color: #2f76c4;
+    background: rgba(47, 118, 196, 0.08);
+  }
+
+  .qe-plus {
+    position: absolute;
+    box-sizing: border-box;
+    width: 18px;
+    height: 16px;
+    padding: 0;
+    color: #9a9aa0;
+    background: none;
+    border: 0;
+    border-radius: 3px;
+    font-size: 12px;
+    line-height: 1;
+    cursor: pointer;
+    pointer-events: auto;
+  }
+
+  .qe-plus:hover {
+    color: #2f76c4;
+    background: rgba(47, 118, 196, 0.08);
+  }
+
+  .qe-caret {
+    position: absolute;
+    height: 0;
+    border-top: 2px solid #2f76c4;
+  }
+
+  .qe-caret::before {
+    content: "";
+    position: absolute;
+    left: -3px;
+    top: -4px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: #2f76c4;
+  }
+
+  .qe-vcaret {
+    position: absolute;
+    width: 0;
+    border-left: 2px solid #2f76c4;
+  }
+
+  .qe-lifted {
+    opacity: 0.45;
+  }
+
+  .qe-menu {
+    position: absolute;
+    z-index: 4;
+    display: flex;
+    flex-direction: column;
+    min-width: 110px;
+    padding: 3px;
+    background: #fff;
+    color: #333;
+    border: 1px solid #d5d5d8;
+    border-radius: 6px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
+    pointer-events: auto;
+  }
+
+  .qe-menu button {
+    appearance: none;
+    border: 0;
+    background: none;
+    font: 12px system-ui, sans-serif;
+    color: inherit;
+    text-align: left;
+    padding: 4px 8px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .qe-menu button:hover {
+    background: #eef4fb;
+  }
+
+  /* Placeholders: what the render leaves out, drawn where it would sit. An
+     empty band's is an insertion point; a hidden item's shows its template
+     source dimmed, so several hidden items are distinguishable. */
+  .qe-ghost {
+    position: absolute;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 0 8px;
+    font: italic 11px system-ui, sans-serif;
+    color: #8a8a90;
+    background: rgba(120, 120, 128, 0.06);
+    border: 1px dashed #c0c0c6;
+    border-radius: 4px;
+    pointer-events: auto;
+  }
+
+  .qe-ghost.qe-hidden-item {
+    font-style: normal;
+    font-family: ui-monospace, monospace;
+    cursor: pointer;
+  }
+`;