@mosetta/editor 0.0.0-stage → 0.0.28

package/tiles/treeView/treeView.css

@@ -0,0 +1,303 @@
+/* A FLEX column on purpose: flex items never collapse margins. The move zones are zero-net
+   (22px padding against -22px margins), but wherever two zones end up adjacent — a nested
+   section's end meeting the parent's next gap — collapsed block margins gave -11 instead of
+   -22, and the tree grew 11px per boundary the moment the mode rendered them. */
+.tree-view {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  font: var(--mosetta-wb-font)/1.5 ui-sans-serif, system-ui, sans-serif;
+}
+
+.tree-view__empty {
+  color: #71717a;
+  padding: 12px;
+}
+
+.tree-view__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border-bottom: 1px solid #e4e4e7;
+  font-weight: 600;
+}
+
+.tree-view__dirty {
+  color: #dc2626;
+}
+
+.tree-view__save {
+  margin-left: auto;
+  cursor: pointer;
+}
+
+.tree-view__node {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 3px 8px;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+/* hover on every row — a shade lighter than the selection, so pointing never reads as picking.
+   Guarded on the stateful rows: :hover outweighs a single state class by specificity, and a
+   selected/picked row must not flicker lighter under the pointer */
+.tree-view__node:hover {
+  background: #f4f4f5;
+}
+
+/* the inspector's hover, echoed: pointing at a block in ANY canvas washes its row a pale blue —
+   quieter than the selection, gone the moment the pointer moves on */
+.tree-view__node--hovered {
+  background: #eff6ff;
+}
+
+.tree-view__node--selected,
+.tree-view__node--selected:hover {
+  background: #e4e4e7;
+}
+
+/* The Ctrl (multi) mode wears YELLOW, here as in the canvas — the whole picked branch lights up.
+   No radius: adjacent picked rows must read as ONE band, not an accordion of pills */
+.tree-view__node--multi,
+.tree-view__node--multi:hover {
+  background: #fef08a;
+  border-radius: 0;
+}
+
+/* Ctrl held: pointing at a row promises the yellow pick, the way ctrl-hover does in the canvas */
+.tree-view--ctrl .tree-view__node:hover {
+  background: #fef9c3;
+}
+
+.tree-view--ctrl .tree-view__node--multi:hover {
+  background: #fde047;
+}
+
+.tree-view--ctrl .tree-view__slot:hover {
+  background: #fef9c3;
+}
+
+.tree-view--ctrl .tree-view__slot--multi:hover {
+  background: #fde047;
+}
+
+/* a block of a DISCONNECTED distribution: still in the page, left out by the site — its name
+   struck through, a small amber "off" beside it (disconnected.ts) */
+.tree-view__node--off .tree-view__label {
+  color: #a1a1aa;
+  text-decoration: line-through;
+}
+
+.tree-view__off {
+  flex: none;
+  padding: 0 5px;
+  border-radius: 3px;
+  background: #fef3c7;
+  color: #92400e;
+  font-size: var(--mosetta-wb-font-xs);
+  line-height: 16px;
+}
+
+/* a block with a newer version (ADR-0061): its row names it, quietly blue */
+.tree-view__up {
+  flex: none;
+  padding: 0 5px;
+  border-radius: 3px;
+  background: #dbeafe;
+  color: #1d4ed8;
+  font-size: var(--mosetta-wb-font-xs);
+  line-height: 16px;
+}
+
+/* a slot's section title (the default one included) — the children under it live in that slot.
+   Not a node, but a DOOR and a selectable one: plain click selects it, Ctrl passes to children */
+.tree-view__slot {
+  color: #a1a1aa;
+  font-size: var(--mosetta-wb-font-xs);
+  padding: 2px 8px;
+  letter-spacing: 0.02em;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.tree-view__slot:hover {
+  background: #f4f4f5;
+}
+
+.tree-view__slot--multi,
+.tree-view__slot--multi:hover {
+  background: #fef08a;
+  border-radius: 0;
+}
+
+/* the slot IS the selection — same gray the selected node row wears */
+.tree-view__slot--selected,
+.tree-view__slot--selected:hover {
+  background: #e4e4e7;
+  color: #3f3f46;
+}
+
+
+/* the fold chevron before a row with something inside; a leaf keeps its room so labels line up */
+.tree-view__fold {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--mosetta-wb-icon-sm);
+  height: var(--mosetta-wb-icon-sm);
+  margin-left: -2px;
+  padding: 0;
+  border: 0;
+  border-radius: 3px;
+  background: none;
+  color: #a1a1aa;
+  cursor: pointer;
+}
+
+.tree-view__fold svg {
+  width: var(--mosetta-wb-icon-sm);
+  height: var(--mosetta-wb-icon-sm);
+  transform: rotate(90deg);
+  transition: transform 120ms ease;
+}
+
+.tree-view__fold[data-folded] svg {
+  transform: none;
+}
+
+.tree-view__fold:hover {
+  color: #27272a;
+  background: #e4e4e7;
+}
+
+.tree-view__fold--none {
+  pointer-events: none;
+}
+
+/* row actions (move + remove) stay out of sight until the row is under the pointer (or a button
+   is keyboard-focused — hover must not be the only way to reach them) */
+.tree-view__row-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.tree-view__node:hover .tree-view__row-actions,
+.tree-view__row-actions:focus-within {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.tree-view__move,
+.tree-view__remove {
+  display: flex;
+  align-items: center;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  color: #a1a1aa;
+  padding: 1px;
+}
+
+.tree-view__move svg {
+  width: var(--mosetta-wb-icon-sm);
+  height: var(--mosetta-wb-icon-sm);
+}
+
+/* purple is the MOVE colour, everywhere the mode shows */
+.tree-view__move:hover {
+  color: #8b5cf6;
+}
+
+.tree-view__remove:hover {
+  color: #dc2626;
+}
+
+/* The MOVE mode: rows stop being targets — the GAPS between them take over. A zone is flat in
+   the flow but its hit area reaches halfway into both neighbouring rows (padding + negative
+   margins), so "hovering between the centres of two rows" is literal. */
+.tree-view--move .tree-view__node,
+.tree-view--move .tree-view__slot {
+  cursor: default;
+}
+
+.tree-view--move .tree-view__node:hover,
+.tree-view--move .tree-view__slot:hover {
+  background: none;
+}
+
+/* the travelling branch wears the mode's colour */
+.tree-view__node--moving,
+.tree-view--move .tree-view__node--moving:hover {
+  background: #ede9fe;
+}
+
+.tree-view__move-zone {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  height: 0;
+  padding: 11px 0;
+  margin: -11px 0;
+}
+
+/* the SKEWER: a hairline runs the whole gap — exactly between the two rows — and the tip sits
+   ON it (the line is behind, the tip's own background keeps its letters clean) */
+.tree-view__move-zone:hover::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  left: var(--skewer-left, 8px);
+  height: 2px;
+  margin-top: -1px;
+  border-radius: 1px;
+  background: #8b5cf6;
+}
+
+.tree-view__move-tip {
+  position: relative;
+  display: none;
+  margin-left: auto;
+  margin-right: 12px;
+  padding: 1px 6px;
+  border-radius: 3px;
+  background: #8b5cf6;
+  color: #ffffff;
+  font-size: calc(var(--mosetta-wb-font-2xs) - 1px);
+  line-height: 12px;
+  cursor: pointer;
+}
+
+.tree-view__move-zone:hover .tree-view__move-tip {
+  display: inline-block;
+}
+
+/* …and the tip itself answers the pointer: a shade deeper right before the click */
+.tree-view__move-tip:hover {
+  background: #7c3aed;
+}
+
+.tree-view__error {
+  color: #dc2626;
+  padding: 4px 8px;
+}
+
+/* a PREFAB's own blocks under its node: seen, not changed — quieter than the page's; a click on
+   one selects it to be seen, read-only (prefabParts.ts) */
+.tree-view__node--prefab {
+  color: #a1a1aa;
+  font-style: italic;
+}
+
+.tree-view__node--prefab.tree-view__node--selected {
+  color: #52525b;
+}

package/tiles/treeView/treeView.editor.tsx

@@ -0,0 +1,12 @@
+import { defineEditorSide } from '@mosetta/react';
+import { PreviewEditingSession } from '../content/previewEnvironment';
+
+export default defineEditorSide({
+  // the REAL panel is the preview: its environment is arranged — a session seeded with a small
+  // page to outline — and the component itself never knows it is being looked at
+  preview: 'self',
+  previewServices: [PreviewEditingSession],
+  Component() {
+    return <div data-no-settings>This panel has no settings.</div>;
+  },
+});

package/tiles/workbench/assistant.css

@@ -0,0 +1,401 @@
+/* The assistant: a column on the right of the workbench, the full height of it. */
+/* The assistant: an island over the workbench, never a column taking its room. */
+.assistant {
+  position: absolute;
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  min-height: 0;
+  border: 1px solid var(--wb-border, #e4e4e7);
+  border-radius: 14px;
+  background: #fafafa;
+  box-shadow: 0 12px 36px rgb(24 24 27 / 16%), 0 2px 6px rgb(24 24 27 / 8%);
+}
+
+/* over Home and the lists: at the bottom, in the middle — the page stays in sight above it */
+.assistant--bottom {
+  left: 50%;
+  bottom: 16px;
+  width: min(760px, calc(100% - 32px));
+  max-height: min(62%, 600px);
+  transform: translateX(-50%);
+}
+
+/* in the editor: over the tree — the tree's column takes the island's width while it is open (the
+   tree hidden under it), so the canvas beside it stays whole */
+.workbench {
+  --assistant-tree: 360px;
+}
+
+.assistant--tree {
+  top: 46px;
+  bottom: 10px;
+  left: 8px;
+  width: calc(var(--assistant-tree) - 16px);
+}
+
+.workbench[data-assistant="tree"] .workbench__tree {
+  display: block !important;
+  width: var(--assistant-tree) !important;
+}
+
+.workbench[data-assistant="tree"] .workbench__splitter {
+  display: none;
+}
+
+.assistant--folded .assistant__head {
+  border-bottom: 0;
+}
+
+.assistant__head {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px 8px 14px;
+  border-bottom: 1px solid var(--wb-border, #e4e4e7);
+}
+
+.assistant__title {
+  flex: 1;
+  font-weight: 600;
+}
+
+.assistant__cost {
+  color: var(--wb-muted, #71717a);
+  font-size: 0.85em;
+  font-variant-numeric: tabular-nums;
+}
+
+.assistant__head-button {
+  padding: 3px 8px;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  background: none;
+  color: var(--wb-muted, #71717a);
+  font: inherit;
+  cursor: pointer;
+}
+
+.assistant__head-button:hover:not(:disabled) {
+  border-color: var(--wb-border, #e4e4e7);
+  background: #ffffff;
+  color: var(--wb-ink, #18181b);
+}
+
+.assistant__head-button:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* ---- the conversation ------------------------------------------------------------------------ */
+
+.assistant__list {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+  padding: 12px;
+  overflow-y: auto;
+}
+
+.assistant__user {
+  align-self: flex-end;
+  max-width: 85%;
+  padding: 7px 10px;
+  border-radius: 10px 10px 2px;
+  background: var(--wb-blue, #2563eb);
+  color: #ffffff;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.assistant__reply {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.assistant__reply a {
+  color: var(--wb-blue, #2563eb);
+}
+
+.assistant__reply code {
+  padding: 1px 4px;
+  border-radius: 4px;
+  background: #ececef;
+  font: 0.92em ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.assistant__tool {
+  border: 1px solid var(--wb-border, #e4e4e7);
+  border-radius: 7px;
+  background: #ffffff;
+  font-size: 0.92em;
+}
+
+.assistant__tool summary {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 5px 8px;
+  color: var(--wb-muted, #71717a);
+  cursor: pointer;
+  list-style: none;
+}
+
+.assistant__tool summary::-webkit-details-marker {
+  display: none;
+}
+
+.assistant__tool-mark {
+  display: inline-flex;
+  justify-content: center;
+  width: 14px;
+  color: #16a34a;
+}
+
+.assistant__tool--failed .assistant__tool-mark {
+  color: #dc2626;
+}
+
+.assistant__tool-summary {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.assistant__tool-result {
+  max-height: 220px;
+  margin: 0;
+  padding: 6px 8px;
+  border-top: 1px solid var(--wb-border, #e4e4e7);
+  overflow: auto;
+  font: 11px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* the screenshots a tool took: small, side by side, each opening whole */
+.assistant__pictures {
+  display: flex;
+  gap: 6px;
+  margin-top: -2px;
+}
+
+.assistant__pictures a {
+  display: block;
+  flex: 0 1 auto;
+  max-width: 50%;
+  border: 1px solid var(--wb-border, #e4e4e7);
+  border-radius: 6px;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.assistant__pictures img {
+  display: block;
+  max-width: 100%;
+  max-height: 120px;
+  object-fit: cover;
+  object-position: top;
+}
+
+.assistant__spinner {
+  width: 10px;
+  height: 10px;
+  border: 2px solid #d4d4d8;
+  border-top-color: var(--wb-blue, #2563eb);
+  border-radius: 50%;
+  animation: assistant-spin 0.8s linear infinite;
+}
+
+@keyframes assistant-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.assistant__error {
+  padding: 7px 10px;
+  border-radius: 7px;
+  background: #fef2f2;
+  color: #b91c1c;
+}
+
+.assistant__thinking {
+  color: var(--wb-muted, #71717a);
+}
+
+.assistant__empty {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  color: var(--wb-muted, #71717a);
+}
+
+.assistant__empty p {
+  margin: 0 0 4px;
+}
+
+.assistant__suggestion {
+  padding: 7px 10px;
+  border: 1px solid var(--wb-border, #e4e4e7);
+  border-radius: 7px;
+  background: #ffffff;
+  color: var(--wb-ink, #18181b);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.assistant__suggestion:hover {
+  border-color: var(--wb-blue, #2563eb);
+}
+
+/* ---- the composer ---------------------------------------------------------------------------- */
+
+.assistant__composer {
+  padding: 8px 10px 10px;
+}
+
+.assistant__field {
+  display: flex;
+  align-items: flex-end;
+  gap: 6px;
+  padding: 6px 6px 6px 10px;
+  border: 1px solid var(--wb-border, #e4e4e7);
+  border-radius: 12px;
+  background: #ffffff;
+}
+
+.assistant__field:focus-within {
+  border-color: var(--wb-blue, #2563eb);
+  box-shadow: 0 0 0 3px rgb(37 99 235 / 12%);
+}
+
+.assistant__field--listening {
+  border-color: #dc2626;
+  box-shadow: 0 0 0 3px rgb(220 38 38 / 12%);
+}
+
+/* grows with what is written (set from the panel), never dragged by a corner */
+.assistant__input {
+  flex: 1;
+  box-sizing: border-box;
+  min-height: 30px;
+  max-height: 168px;
+  padding: 5px 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  line-height: 1.45;
+  resize: none;
+}
+
+.assistant__actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 4px;
+}
+
+.assistant__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 0;
+  border-radius: 9px;
+  background: none;
+  color: var(--wb-muted, #71717a);
+  cursor: pointer;
+}
+
+.assistant__icon svg {
+  width: 16px;
+  height: 16px;
+}
+
+.assistant__icon:hover:not(:disabled) {
+  background: #f1f1f3;
+  color: var(--wb-ink, #18181b);
+}
+
+.assistant__icon--on,
+.assistant__icon--on:hover:not(:disabled) {
+  background: #fef2f2;
+  color: #dc2626;
+}
+
+.assistant__icon--send,
+.assistant__icon--send:hover:not(:disabled) {
+  background: var(--wb-blue, #2563eb);
+  color: #ffffff;
+}
+
+.assistant__icon:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+
+/* how long the recording runs — in place of the language switch, which the platform needs not */
+.assistant__clock {
+  padding: 2px 4px;
+  color: #dc2626;
+  font: 600 10px/1.4 ui-sans-serif, system-ui, sans-serif;
+  font-variant-numeric: tabular-nums;
+}
+
+.assistant__lang {
+  padding: 2px 5px;
+  border: 0;
+  border-radius: 6px;
+  background: none;
+  color: var(--wb-muted, #71717a);
+  font: 600 10px/1.4 ui-sans-serif, system-ui, sans-serif;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+}
+
+.assistant__lang:hover {
+  background: #f1f1f3;
+  color: var(--wb-ink, #18181b);
+}
+
+.assistant__hint {
+  margin: 6px 4px 0;
+  color: var(--wb-muted, #71717a);
+  font-size: 0.86em;
+}
+
+/* ---- the workbench while the assistant works: frozen, its work showing through ---------------- */
+
+.workbench__main {
+  position: relative;
+}
+
+.workbench__frozen {
+  position: absolute;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 14px;
+  background: rgb(255 255 255 / 18%);
+  cursor: progress;
+}
+
+.workbench__frozen-note {
+  padding: 5px 12px;
+  border-radius: 999px;
+  background: var(--wb-ink, #18181b);
+  color: #ffffff;
+  font-size: 0.92em;
+  box-shadow: 0 4px 14px rgb(0 0 0 / 18%);
+}