@mosetta/editor 0.0.0-stage → 0.0.28

package/tiles/pagesPanel/pagesPanel.css

@@ -0,0 +1,713 @@
+.pages-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+  font-size: var(--mosetta-wb-font);
+}
+
+/* the top bar: the search owns the width, the "+" keeps to the corner */
+.pages-panel__bar {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+  padding: 6px 8px;
+  border-bottom: 1px solid #e4e4e7;
+}
+
+.pages-panel__search {
+  flex: 1;
+  min-width: 0;
+  height: var(--mosetta-wb-icon-box);
+  padding: 0 8px;
+  border: 1px solid #d4d4d8;
+  border-radius: 5px;
+  font: inherit;
+  font-size: var(--mosetta-wb-font-sm);
+  color: #27272a;
+  background: #fff;
+  outline: none;
+}
+
+.pages-panel__search:focus {
+  border-color: #2563eb;
+}
+
+.pages-panel__create {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--mosetta-wb-icon-box);
+  height: var(--mosetta-wb-icon-box);
+  flex: none;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  color: #2563eb;
+  background: none;
+  cursor: pointer;
+}
+
+.pages-panel__create svg {
+  width: var(--mosetta-wb-icon);
+  height: var(--mosetta-wb-icon);
+}
+
+.pages-panel__create:hover {
+  background: #e4e4e7;
+}
+
+.pages-panel__groups {
+  overflow-y: auto;
+  padding: 4px 0 8px;
+}
+
+/* groups keep path families (/a…, then /b…) together in the order; no gap between them — the
+   rows read as one list */
+.pages-panel__group {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pages-panel__route-item {
+  margin: 0;
+}
+
+/* the route row OPENS the page; the chevron unfolds its versions; folded, the row names them as
+   tags right after the path — the path keeps its natural width, the tags take what is left */
+.pages-panel__route {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  padding: 3px 10px 3px 4px;
+  color: #27272a;
+  cursor: pointer;
+  outline: none;
+}
+
+.pages-panel__route:hover,
+.pages-panel__route:focus-visible {
+  background: #f4f4f5;
+}
+
+.pages-panel__route-item[data-expanded] > .pages-panel__route {
+  background: #eff6ff;
+}
+
+.pages-panel__chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--mosetta-wb-icon-box);
+  height: var(--mosetta-wb-icon-box);
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  color: #a1a1aa;
+  background: none;
+  cursor: pointer;
+}
+
+.pages-panel__chevron:hover {
+  color: #27272a;
+  background: #e4e4e7;
+}
+
+.pages-panel__chevron svg {
+  width: var(--mosetta-wb-icon-sm);
+  height: var(--mosetta-wb-icon-sm);
+  transition: transform 120ms ease;
+  transform: rotate(90deg); /* unfolded: pointing at what is under the row */
+}
+
+.pages-panel__chevron[data-folded] svg {
+  transform: none;
+}
+
+/* the compact list: the versions of the row behind a button at its end — stacked sheets, open =
+   pressed (the tree puts a chevron on the left instead, and nests the versions under the row) */
+.pages-panel__versions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: var(--mosetta-wb-icon-box);
+  height: var(--mosetta-wb-icon-box);
+  margin-left: auto;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  color: #a1a1aa;
+  background: none;
+  cursor: pointer;
+}
+
+.pages-panel__versions svg {
+  width: var(--mosetta-wb-icon-sm);
+  height: var(--mosetta-wb-icon-sm);
+}
+
+.pages-panel__versions:hover,
+.pages-panel__versions--open {
+  color: #27272a;
+  background: #e4e4e7;
+}
+
+/* the tree's row carries its own actions (a draft from the live revision, the trash) at its end:
+   the row has the room, and the trash no longer hides under the drafts */
+.pages-panel__route-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  flex: none;
+  margin-left: auto;
+}
+
+/* a folder of the tree: a prefix no page owns — quieter words, only the chevron answers */
+.pages-panel__route--folder {
+  color: #71717a;
+}
+
+.pages-panel__route--folder .pages-panel__path {
+  font-style: italic;
+}
+
+/* the compact list has no chevron column: the path gets its room from the row's padding */
+.pages-panel--compact .pages-panel__route {
+  padding-left: 10px;
+}
+
+/* the tree's row actions: a glyph and a word each — the row has the room, and a word reads */
+.pages-panel__route-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  height: var(--mosetta-wb-icon-box);
+  padding: 0 8px 0 6px;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  font: inherit;
+  font-size: var(--mosetta-wb-font-xs);
+  color: #52525b;
+  background: none;
+  cursor: pointer;
+}
+
+.pages-panel__route-button svg {
+  width: var(--mosetta-wb-icon-sm);
+  height: var(--mosetta-wb-icon-sm);
+}
+
+.pages-panel__route-button:hover {
+  border-color: #d4d4d8;
+  color: #18181b;
+  background: #fff;
+}
+
+.pages-panel__route-button--danger:hover {
+  border-color: #fecaca;
+  color: #b91c1c;
+  background: #fef2f2;
+}
+
+.pages-panel__route-button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+/* …and as a link (opens in a new tab): the same button, no underline */
+a.pages-panel__route-button {
+  text-decoration: none;
+}
+
+/* the version rows of the tree carry the same worded buttons, a little closer together */
+.pages-panel__row-actions .pages-panel__route-button {
+  margin-left: 2px;
+}
+
+/* the tree: the versions nest under the row one level down — a thin rail under the next level's
+   chevron marks the nesting, and the rows start where that level's words would */
+.pages-panel__expander--nested {
+  margin-top: 2px;
+  margin-bottom: 4px;
+  padding-top: 0;
+  padding-bottom: 2px;
+  border-left: 1px solid #e4e4e7;
+}
+
+/* the tree reads at the content's width: rows breathe a little more than the compact list's */
+.pages-panel--tree .pages-panel__groups {
+  padding: 6px 8px 12px;
+}
+
+.pages-panel--tree .pages-panel__route {
+  padding-top: 4px;
+  padding-bottom: 4px;
+  border-radius: 6px;
+}
+
+.pages-panel__path {
+  /* its natural width first (the tags get the rest); it shrinks with an ellipsis only when the
+     path alone is wider than the row */
+  flex: 0 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--mosetta-wb-font-sm);
+}
+
+.pages-panel__path mark {
+  padding: 0;
+  border-radius: 2px;
+  color: inherit;
+  background: #fde68a;
+}
+
+.pages-panel__tags {
+  position: relative;
+  display: flex;
+  flex: 1 1 0;
+  justify-content: flex-start;
+  gap: 4px; /* TAG_GAP in pagesPanel.component.tsx */
+  margin-left: 4px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* ---- tags: a version named in one chip (the folded row, the version rows, the delete dialog) */
+.pages-panel__tag {
+  flex: none;
+  padding: 1px 6px;
+  border: 0;
+  border-radius: 4px;
+  font: inherit;
+  font-size: var(--mosetta-wb-font-xs);
+  line-height: 1.4;
+  white-space: nowrap;
+  color: #27272a;
+}
+
+button.pages-panel__tag {
+  cursor: pointer;
+}
+
+button.pages-panel__tag:hover {
+  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 20%);
+}
+
+.pages-panel__tag--published {
+  background: #d3f2dc;
+}
+
+.pages-panel__tag--archived {
+  color: #71717a;
+  background: #ececee;
+}
+
+.pages-panel__tag--draft {
+  background: #fdf3d0;
+}
+
+/* the platform's frozen page: a padlock, not a version */
+.pages-panel__tag--locked {
+  display: inline-flex;
+  align-items: center;
+  color: #52525b;
+  background: #ececee;
+}
+
+.pages-panel__tag--locked svg {
+  width: var(--mosetta-wb-icon-sm);
+  height: var(--mosetta-wb-icon-sm);
+}
+
+.pages-panel__tag--more {
+  color: #52525b;
+  background: #ececee;
+}
+
+/* a tag the row has no room for: still rendered (its width is measured), out of the flow */
+.pages-panel__tag--unfit {
+  position: absolute;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* the created/found route flashes once — the eye lands where the action ended */
+.pages-panel__route-item--flash > .pages-panel__route {
+  animation: pages-panel-flash 1.6s ease-out 1;
+}
+
+@keyframes pages-panel-flash {
+  0% { background: #fde68a; }
+  100% { background: transparent; }
+}
+
+/* the expander: published versions and drafts of one route; a row opens its version */
+.pages-panel__expander {
+  padding: 2px 10px 6px 26px;
+}
+
+.pages-panel__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 1px 0;
+}
+
+/* the whole-page row closes the expander: set apart by a hairline, the trash sits where every trash sits */
+.pages-panel__page-row {
+  margin-top: 4px;
+  padding-top: 4px;
+  border-top: 1px solid #f4f4f5;
+}
+
+.pages-panel__row-label,
+.pages-panel__row-open {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.pages-panel__row-open {
+  flex: 1;
+  padding: 2px 4px;
+  margin-left: -4px;
+  border: 0;
+  border-radius: 4px;
+  font: inherit;
+  text-align: left;
+  color: inherit;
+  background: none;
+  cursor: pointer;
+}
+
+.pages-panel__row-open:hover {
+  background: #f4f4f5;
+}
+
+/* a publication's name beside its revision tag */
+.pages-panel__row-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--mosetta-wb-font-sm);
+  color: #27272a;
+}
+
+.pages-panel__row-note {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--mosetta-wb-font-2xs);
+  color: #a1a1aa;
+}
+
+.pages-panel__row-note--moved {
+  color: #b45309;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+}
+
+.pages-panel__row-actions {
+  display: flex;
+  gap: 2px;
+  flex: none;
+}
+
+.pages-panel__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--mosetta-wb-icon-box);
+  height: var(--mosetta-wb-icon-box);
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  color: #52525b;
+  background: none;
+  cursor: pointer;
+}
+
+.pages-panel__icon svg {
+  width: var(--mosetta-wb-icon);
+  height: var(--mosetta-wb-icon);
+}
+
+.pages-panel__icon:hover {
+  background: #e4e4e7;
+  color: #2563eb;
+}
+
+.pages-panel__icon:disabled {
+  color: #d4d4d8;
+  cursor: default;
+}
+
+/* the armed trash: the second click is the destructive one, so it reads differently */
+.pages-panel__confirm {
+  font-size: var(--mosetta-wb-font-sm);
+  font-weight: 700;
+  color: #dc2626;
+}
+
+.pages-panel__empty {
+  padding: 14px 10px;
+  color: #a1a1aa;
+}
+
+.pages-panel__loading {
+  padding: 8px;
+}
+
+.pages-panel__error {
+  padding: 2px 0;
+  color: #b00;
+  font-size: var(--mosetta-wb-font-xs);
+}
+
+/* the create modal: a fixed overlay — the panel may be short, the dialog must not be */
+.pages-panel__modal-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 60;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 12vh;
+  background: rgb(24 24 27 / 35%);
+}
+
+.pages-panel__modal {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: min(440px, calc(100vw - 32px));
+  max-height: 70vh;
+  overflow-y: auto;
+  padding: 12px;
+  border-radius: 8px;
+  font-family: ui-sans-serif, system-ui, sans-serif;
+  font-size: var(--mosetta-wb-font);
+  background: #fff;
+  box-shadow: 0 12px 32px rgb(0 0 0 / 25%);
+}
+
+.pages-panel__modal-title {
+  font-size: calc(var(--mosetta-wb-font) + 2px);
+  font-weight: 600;
+  color: #18181b;
+}
+
+/* the name the entity gets, said as the path is typed */
+.pages-panel__modal-name {
+  font-size: var(--mosetta-wb-font-xs);
+  color: #71717a;
+}
+
+.pages-panel__modal-name code {
+  padding: 1px 5px;
+  border-radius: 4px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--mosetta-wb-font-xs);
+  color: #27272a;
+  background: #f4f4f5;
+}
+
+.pages-panel__modal-submit {
+  height: calc(var(--mosetta-wb-icon-box) + 10px);
+  margin-top: 4px;
+  font-weight: 600;
+}
+
+.pages-panel__modal-input {
+  height: calc(var(--mosetta-wb-icon-box) + 6px);
+  padding: 0 10px;
+  border: 1px solid #d4d4d8;
+  border-radius: 6px;
+  font: inherit;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--mosetta-wb-font);
+  outline: none;
+}
+
+.pages-panel__modal-input:focus {
+  border-color: #2563eb;
+}
+
+.pages-panel__modal-hint {
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 5px;
+  font: inherit;
+  font-size: var(--mosetta-wb-font-sm);
+  text-align: left;
+  color: #1d4ed8;
+  background: #eff6ff;
+  cursor: pointer;
+}
+
+.pages-panel__modal-caption {
+  font-size: var(--mosetta-wb-font-xs);
+  color: #71717a;
+}
+
+.pages-panel__modal-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.pages-panel__modal-item {
+  display: block;
+  width: 100%;
+  padding: 4px 8px;
+  border: 0;
+  border-radius: 5px;
+  font: inherit;
+  font-size: var(--mosetta-wb-font-sm);
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  text-align: left;
+  color: #27272a;
+  background: none;
+  cursor: pointer;
+}
+
+.pages-panel__modal-item mark {
+  padding: 0;
+  color: inherit;
+  background: #fde68a;
+}
+
+.pages-panel__modal-item:hover {
+  background: #f4f4f5;
+}
+
+.pages-panel__modal-item--root {
+  font-family: inherit;
+  color: #1d4ed8;
+}
+
+.pages-panel__modal-item:disabled {
+  color: #a1a1aa;
+  cursor: default;
+}
+
+/* FROZEN while an action and the listing refetch after it run: the old list stays readable but
+   takes no clicks — a second click on a row about to change is the mistake this prevents */
+.pages-panel--frozen .pages-panel__groups {
+  pointer-events: none;
+  opacity: 0.5;
+  transition: opacity 0.15s;
+}
+
+.pages-panel__working {
+  font-size: var(--mosetta-wb-font-xs);
+  color: #71717a;
+  white-space: nowrap;
+}
+
+/* ---- the delete-page dialog: the page as the panel shows it, in short — what goes ---- */
+.pages-panel__delete {
+  gap: 10px;
+  padding: 16px;
+}
+
+.pages-panel__delete-title {
+  font-weight: 600;
+  font-size: calc(var(--mosetta-wb-font) + 1px);
+}
+
+.pages-panel__delete-text {
+  color: #52525b;
+}
+
+.pages-panel__delete-page {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 8px 10px;
+  border: 1px solid #fecaca;
+  border-radius: 6px;
+  background: #fef2f2;
+}
+
+.pages-panel__delete-path {
+  overflow-wrap: anywhere;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--mosetta-wb-font-sm);
+}
+
+.pages-panel__delete-versions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.pages-panel__delete-buttons {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.pages-panel__button {
+  height: calc(var(--mosetta-wb-icon-box) + 4px);
+  padding: 0 12px;
+  border: 1px solid #d4d4d8;
+  border-radius: 6px;
+  font: inherit;
+  color: #27272a;
+  background: #fff;
+  cursor: pointer;
+}
+
+.pages-panel__button:hover {
+  background: #f4f4f5;
+}
+
+/* the coloured buttons come AFTER the plain hover: the same specificity, the later rule wins —
+   the plain hover painted the primary one grey under white words */
+.pages-panel__button--primary {
+  border-color: #2563eb;
+  color: #fff;
+  background: #2563eb;
+}
+
+.pages-panel__button--primary:hover {
+  border-color: #1d4ed8;
+  background: #1d4ed8;
+}
+
+.pages-panel__button--danger {
+  border-color: #dc2626;
+  color: #fff;
+  background: #dc2626;
+}
+
+.pages-panel__button--danger:hover {
+  background: #b91c1c;
+}
+
+.pages-panel__button:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+/* the list page asked for a list that does not exist */
+.pages-panel--none {
+  padding: 24px;
+  color: #52525b;
+}
+
+.pages-panel--none a {
+  color: #2563eb;
+}

package/tiles/pagesPanel/pagesPanel.editor.tsx

@@ -0,0 +1,23 @@
+import { defineEditorSide, useSettingsDraft } from '@mosetta/react';
+import type { ContentKind } from '@mosetta/content';
+
+export default defineEditorSide({
+  // the panel itself is the preview: mounted standalone it lists the app's pages live — its own
+  // DI, its own requests — which is exactly what a hovering user needs to recognize it
+  preview: 'self',
+  Component() {
+    const { draft, update } = useSettingsDraft<{ kind?: ContentKind }>();
+    return (
+      <label>
+        Lists
+        {' '}
+        <select data-field="kind"
+                value={draft.kind ?? 'pages'}
+                onChange={(e) => update({ kind: e.target.value as ContentKind })}>
+          <option value="pages">the pages</option>
+          <option value="prefabs">the prefabs</option>
+        </select>
+      </label>
+    );
+  },
+});