@mosetta/editor 0.0.0-stage → 0.0.28

package/tiles/workbenchEditor/workbenchEditor.css

@@ -0,0 +1,370 @@
+/* The editor page of the workbench: the tab row, the quick picker, the tree, the handle, the canvases. */
+
+/* a pane kept mounted but out of sight: a canvas behind another tab */
+.workbench__pane--hidden {
+  display: none !important;
+}
+
+/* ---- the editor ------------------------------------------------------------------------------ */
+
+.workbench__editor {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.workbench__desk {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+/* the quick picker: a card under the tab row, over the desk's left edge, the compact list inside;
+   a clear backdrop over the whole desk takes the click that closes it */
+.workbench__picker-backdrop {
+  position: absolute;
+  inset: 0;
+  z-index: 29;
+}
+
+.workbench__picker {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  width: min(380px, calc(100% - 16px));
+  max-height: calc(100% - 16px);
+  border: 1px solid var(--wb-border);
+  border-radius: 10px;
+  background: #ffffff;
+  box-shadow: 0 12px 32px rgb(0 0 0 / 14%), 0 2px 6px rgb(0 0 0 / 8%);
+  overflow: hidden;
+}
+
+.workbench__picker-switch {
+  display: flex;
+  gap: 2px;
+  padding: 6px 8px 0;
+  border-bottom: 1px solid var(--wb-border);
+}
+
+.workbench__picker-choice {
+  padding: 5px 10px 7px;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  background: none;
+  font: inherit;
+  font-size: var(--mosetta-wb-font-sm);
+  color: var(--wb-muted);
+  cursor: pointer;
+}
+
+.workbench__picker-choice:hover {
+  color: var(--wb-ink);
+}
+
+.workbench__picker-choice--on {
+  color: var(--wb-ink);
+  font-weight: 600;
+  border-bottom-color: var(--wb-blue);
+}
+
+.workbench__picker-list {
+  display: flex;
+  flex-direction: column;
+  min-height: 160px;
+  max-height: 60vh;
+  overflow: hidden;
+}
+
+.workbench__picker-list > *,
+.workbench__picker-list > * > *,
+.workbench__picker-list > * > * > * {
+  flex: 1;
+  min-height: 0;
+}
+
+.workbench__tab-new--on {
+  background: #d4d4d8;
+  color: var(--wb-ink);
+}
+
+.workbench__tree {
+  flex: none;
+  width: 280px; /* the document's own width is set inline */
+  max-width: calc(100% - 320px); /* the canvas keeps at least this much */
+  min-height: 0;
+  overflow-y: auto;
+  background: #ffffff;
+}
+
+/* the handle between the tree and the canvas: a hairline that thickens and turns blue under the
+   pointer; the grab area is wider than the line */
+.workbench__splitter {
+  position: relative;
+  flex: none;
+  width: 6px;
+  cursor: col-resize;
+  z-index: 2;
+  touch-action: none;
+}
+
+.workbench__splitter::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 1px;
+  background: var(--wb-border);
+  transition: width 80ms ease, background-color 80ms ease;
+}
+
+.workbench__splitter:hover::before,
+.workbench__desk--resizing .workbench__splitter::before {
+  width: 3px;
+  background: var(--wb-blue);
+}
+
+/* while the handle is dragged the canvases take no pointer events (an iframe would swallow the drag) */
+.workbench__desk--resizing {
+  cursor: col-resize;
+  user-select: none;
+}
+
+.workbench__desk--resizing .workbench__canvases {
+  pointer-events: none;
+}
+
+.workbench__canvases {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.workbench__canvas {
+  display: flex;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.workbench__canvas > *,
+.workbench__canvas > * > *,
+.workbench__canvas > * > * > * {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
+
+.workbench__blank {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: var(--wb-muted);
+}
+
+.workbench__blank p {
+  margin: 0;
+}
+
+/* ---- the tabs: a browser's tab row — the one in front joined to the content below it --------- */
+
+.workbench__tabs {
+  display: flex;
+  align-items: flex-end;
+  flex: none;
+  gap: 0;
+  height: 38px;
+  padding: 6px 8px 0;
+  background: var(--wb-frame);
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: none;
+}
+
+.workbench__tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.workbench__tab {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 0 1 220px;
+  min-width: 96px;
+  height: 32px;
+  padding: 0 8px 0 12px;
+  border-radius: var(--wb-tab-radius) var(--wb-tab-radius) 0 0;
+  color: #52525b;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+}
+
+/* a hairline between tabs at rest, none beside the front one */
+.workbench__tab + .workbench__tab::after {
+  content: '';
+  position: absolute;
+  top: 8px;
+  bottom: 8px;
+  left: -1px;
+  width: 1px;
+  background: #c9c9cf;
+}
+
+.workbench__tab--front + .workbench__tab::after,
+.workbench__tab + .workbench__tab--front::after {
+  display: none;
+}
+
+.workbench__tab:hover {
+  background: #f1f1f3;
+  color: var(--wb-ink);
+}
+
+.workbench__tab:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--wb-blue);
+}
+
+/* the front tab: the content's own white, and the two curves that make it one with the row below —
+   a square at each foot, painted with a circle of the frame's colour cut out of the tab's white */
+.workbench__tab--front,
+.workbench__tab--front:hover {
+  background: #ffffff;
+  color: var(--wb-ink);
+}
+
+.workbench__tab--front::before {
+  content: '';
+  position: absolute;
+  right: 100%;
+  bottom: 0;
+  width: var(--wb-tab-radius);
+  height: var(--wb-tab-radius);
+  background: radial-gradient(circle at 0 0, transparent calc(var(--wb-tab-radius) - 0.5px), #ffffff var(--wb-tab-radius));
+  pointer-events: none;
+}
+
+/* the right curve: the tab's own ::after is taken by the hairline, so the close button (static,
+   positioned against the tab) lends its ::before — `left: 100%` is the TAB's right edge */
+.workbench__tab--front > .workbench__tab-close::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 100%;
+  width: var(--wb-tab-radius);
+  height: var(--wb-tab-radius);
+  background: radial-gradient(circle at 100% 0, transparent calc(var(--wb-tab-radius) - 0.5px), #ffffff var(--wb-tab-radius));
+  pointer-events: none;
+}
+
+.workbench__tab-kind {
+  display: flex;
+  flex: none;
+  color: #a1a1aa;
+}
+
+.workbench__tab--front .workbench__tab-kind {
+  color: var(--wb-blue);
+}
+
+.workbench__tab-kind svg {
+  width: var(--mosetta-wb-icon-sm);
+  height: var(--mosetta-wb-icon-sm);
+}
+
+.workbench__tab-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--mosetta-wb-font-sm);
+}
+
+.workbench__tab--front .workbench__tab-label {
+  font-weight: 500;
+}
+
+.workbench__tab-loading {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--wb-blue);
+  animation: workbench-pulse 1s ease-in-out infinite;
+}
+
+@keyframes workbench-pulse {
+  50% { opacity: 0.25; }
+}
+
+.workbench__tab-close {
+  position: static;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  color: #71717a;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.workbench__tab:hover .workbench__tab-close,
+.workbench__tab--front .workbench__tab-close,
+.workbench__tab-close:focus-visible {
+  opacity: 1;
+}
+
+.workbench__tab-close:hover {
+  background: #d4d4d8;
+  color: var(--wb-ink);
+}
+
+.workbench__tab-close svg {
+  width: 10px;
+  height: 10px;
+}
+
+.workbench__tab-new {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 28px;
+  height: 28px;
+  margin: 0 0 2px 6px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: none;
+  color: #52525b;
+  cursor: pointer;
+}
+
+.workbench__tab-new:hover {
+  background: #d4d4d8;
+  color: var(--wb-ink);
+}
+
+.workbench__tab-new svg {
+  width: var(--mosetta-wb-icon-sm);
+  height: var(--mosetta-wb-icon-sm);
+}

package/tiles/workbenchHome/workbenchHome.component.tsx

@@ -0,0 +1,196 @@
+// HOME of the workbench (ADR-0051 §4): the project — its name and addresses, the site itself as
+// it is published, and beside it what is worth knowing at a glance. One page under
+// `/workbench/{...rest}`: whatever the sidebar's links name that no other page answers lands here.
+import { defineComponentSide, Link, markInternalTile } from '@mosetta/react';
+import { useIsPreviewMode, useRoute } from '@mosetta/react';
+import { Mosaic } from '@mosetta/ui';
+import { useEffect, useState } from 'react';
+import { useServerAction } from '@mosetta/react/server-action';
+import { listPagesToken } from '../content/contentCommon';
+import '../content/workbenchScale.css';
+import './workbenchHome.css';
+import { basePathOf } from '../workbench/workbenchAddress';
+import { IProjectInfo, useProjectInfo } from '../workbench/projectInfo';
+
+const OutIcon = (
+  <svg viewBox="0 0 16 16"
+       aria-hidden="true">
+    <path d="M6.5 3.5H3.5v9h9V9.5M9 3.5h3.5V7M12.5 3.5L7.5 8.5"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.4"
+          strokeLinecap="round" />
+  </svg>
+);
+
+const projectNameOf = (host: string): string => host.split(':')[0].split('.')[0] || host;
+
+/** the screen the Home preview shows the site on: a common desktop, 16:10 */
+const DESKTOP_WIDTH = 1440;
+const DESKTOP_HEIGHT = 900;
+
+/**
+ * Home: the project — its name and addresses, the site itself as it is published (half the
+ * width: a window, not a wall), and beside it what is worth knowing at a glance: how many pages
+ * are live and how many drafts are in progress, the prefabs, the public address, the live routes
+ * each a step into the editor. The site's frame loads behind a blur and a spinner — a blank
+ * white card while a page loads reads as broken.
+ */
+function HomeView({ project, base }: { project: IProjectInfo; base: string }) {
+  const origin = typeof window === 'undefined' ? '' : window.location.origin;
+  const addresses = [origin, ...(project.publicOrigin && project.publicOrigin !== origin ? [project.publicOrigin] : [])];
+  // the listings the pages views hold already (the same cache entries) — counted here
+  const pages = useServerAction({ token: listPagesToken, input: { kind: 'pages' } });
+  const prefabs = useServerAction({ token: listPagesToken, input: { kind: 'prefabs' } });
+  const listed = pages.isSuccess() && pages.serverData.ok ? pages.serverData.pages : null;
+  const prefabList = prefabs.isSuccess() && prefabs.serverData.ok ? prefabs.serverData.pages : null;
+  const live = listed?.filter((page) => page.meta.live != null && !page.meta.locked) ?? [];
+  const drafts = listed?.reduce((sum, page) => sum + page.drafts.length, 0) ?? 0;
+  const [frameLoaded, setFrameLoaded] = useState(false);
+  // the site believes it is on a desktop screen (DESKTOP_WIDTH wide) and is scaled down into its
+  // half of the page: a page honestly squeezed into half a screen looks like a phone's, which is
+  // not what the author published
+  const [previewBox, setPreviewBox] = useState<HTMLDivElement | null>(null);
+  const [previewSize, setPreviewSize] = useState<{ width: number; height: number }>({ width: 0, height: 0 });
+  useEffect(() => {
+    if (!previewBox) return undefined;
+    const measure = () => setPreviewSize({ width: previewBox.clientWidth, height: previewBox.clientHeight });
+    measure();
+    const Observer = previewBox.ownerDocument.defaultView?.ResizeObserver;
+    if (!Observer) return undefined;
+    const observer = new Observer(measure);
+    observer.observe(previewBox);
+    return () => observer.disconnect();
+  }, [previewBox]);
+  const previewScale = previewSize.width ? Math.min(previewSize.width / DESKTOP_WIDTH, previewSize.height / DESKTOP_HEIGHT) : 1;
+  const bare = (address: string) => address.replace(/^https?:\/\//, '');
+  return (
+    <div className="workbench__home"
+         data-test-id="workbench-home">
+      <header className="workbench__home-head">
+        <Mosaic seed={projectNameOf(project.host)}
+                size={48}
+                className="workbench__home-mosaic" />
+        <div>
+          <h1 className="workbench__home-name">{projectNameOf(project.host)}</h1>
+          <div className="workbench__home-addresses">
+            {addresses.map((address) => (
+              <a key={address}
+                 className="workbench__home-address"
+                 href={address}
+                 target="_blank"
+                 rel="noreferrer">
+                {bare(address)}
+                {OutIcon}
+              </a>
+            ))}
+          </div>
+        </div>
+      </header>
+      <div className="workbench__home-body">
+        <section className="workbench__home-card">
+          <div className="workbench__home-card-head">
+            <span className="workbench__home-card-title">The home page, as published</span>
+            <span className="workbench__home-card-actions">
+              <a className="workbench__button workbench__button--ghost"
+                 href="/"
+                 target="_blank"
+                 rel="noreferrer">
+                Open the site
+              </a>
+              <Link className="workbench__button"
+                    href={`${base}/pages`}>
+                Edit the pages
+              </Link>
+            </span>
+          </div>
+          {/* the live site, as a reader gets it: the editor's own window keeps nothing of it */}
+          <div ref={setPreviewBox}
+               className={`workbench__home-preview${frameLoaded ? '' : ' workbench__home-preview--loading'}`}
+               data-test-id="workbench-home-preview"
+               data-loaded={frameLoaded || undefined}
+               data-preview-scale={previewScale.toFixed(3)}>
+            <iframe className="workbench__home-frame"
+                    title="The site's home page"
+                    src="/"
+                    loading="lazy"
+                    style={{ width: `${DESKTOP_WIDTH}px`, height: `${DESKTOP_HEIGHT}px`, transform: `scale(${previewScale})` }}
+                    onLoad={() => setFrameLoaded(true)} />
+            {frameLoaded ? null : (
+              <div className="workbench__home-veil"
+                   aria-label="Loading the home page">
+                <span className="workbench__spinner" />
+              </div>
+            )}
+          </div>
+        </section>
+        <aside className="workbench__home-facts"
+               data-test-id="workbench-home-facts">
+          <div className="workbench__home-fact-row">
+            <Link className="workbench__home-fact workbench__home-fact--button"
+                  href={`${base}/pages`}>
+              <span className="workbench__home-fact-value">{listed ? live.length : '…'}</span>
+              <span className="workbench__home-fact-label">published {live.length === 1 ? 'page' : 'pages'}{listed && drafts ? ` · ${drafts} ${drafts === 1 ? 'draft' : 'drafts'} in progress` : ''}</span>
+            </Link>
+            <Link className="workbench__home-fact workbench__home-fact--button"
+                  href={`${base}/prefabs`}>
+              <span className="workbench__home-fact-value">{prefabList ? prefabList.length : '…'}</span>
+              <span className="workbench__home-fact-label">{prefabList?.length === 1 ? 'prefab' : 'prefabs'}</span>
+            </Link>
+          </div>
+          <div className="workbench__home-fact">
+            <span className="workbench__home-fact-value workbench__home-fact-value--address">
+              {project.publicOrigin ? bare(project.publicOrigin) : bare(origin)}
+            </span>
+            <span className="workbench__home-fact-label">
+              {project.publicOrigin ? 'the public address — readers get the pages there' : 'the address readers get the pages at'}
+            </span>
+          </div>
+          {live.length > 0 ? (
+            <div className="workbench__home-fact workbench__home-routes">
+              <span className="workbench__home-fact-label">live routes</span>
+              <ul className="workbench__home-route-list">
+                {live.slice(0, 10).map((page) => (
+                  <li key={page.name}>
+                    <Link className="workbench__home-route"
+                          data-test-id="workbench-home-route"
+                          data-page={page.name}
+                          data-tooltip={`Open ${page.livePattern ?? page.name} in the editor`}
+                          href={`${base}/pages/${encodeURIComponent(page.name)}`}>
+                      <span className="workbench__home-route-path">{page.livePattern ?? page.name}</span>
+                      <span className="workbench__home-route-rev">r{page.meta.live}</span>
+                    </Link>
+                  </li>
+                ))}
+                {live.length > 10 ? (
+                  <li className="workbench__home-route-more">…and {live.length - 10} more — see the pages</li>
+                ) : null}
+              </ul>
+            </div>
+          ) : null}
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+
+function HomeBlock() {
+  const route = useRoute();
+  const project = useProjectInfo();
+  const preview = useIsPreviewMode();
+  if (preview) {
+    return <div className="workbench__home workbench__home--bare"
+                data-workbench-preview-stub>Home inside a preview does not load the site</div>;
+  }
+  if (typeof window === 'undefined') return null; // the facts and the frame are the browser's
+  return <HomeView project={project}
+                   base={basePathOf(route?.pattern ?? null, window.location.pathname)} />;
+}
+
+export default markInternalTile(defineComponentSide({
+  Component: HomeBlock,
+  defaultSettings() {
+    return {};
+  },
+}));