@theoremjs/studio 0.0.0-stage → 0.3.2

package/ui/studio.css

@@ -0,0 +1,427 @@
+/*
+ * The studio screen's own rules: the tree, the phone sheets and the few layout classes its editors
+ * use. Every look comes from Astryx and its theme tokens, which the host loads.
+ */
+
+/* A box that takes all the room its parent gives: the screen and the code view. */
+.studio-fill {
+  height: 100%;
+  width: 100%;
+}
+
+/* The guardrail examples scroll sideways with no bar under them. */
+.scrollbar-none {
+  scrollbar-width: none;
+}
+
+/* A criterion's label keeps a fixed share of its row, so the texts beside them line up. */
+.criterion-label {
+  flex: 0 0 38%;
+  min-width: 0;
+}
+
+/*
+ * A studio tree row's add or remove button shows on hover or keyboard focus, fading in,
+ * so the tree reads as names at rest. Without hover (touch), it always shows.
+ */
+.studio-tree-row {
+  position: relative;
+}
+
+/* Out of the row's flow, so it neither heightens the row nor narrows the label at rest. */
+.studio-tree-action {
+  position: absolute;
+  inset-inline-end: var(--spacing-1);
+  top: 50%;
+  translate: 0 -50%;
+  display: inline-flex;
+  opacity: 0;
+  transition: opacity var(--duration-fast) var(--ease-standard);
+}
+
+.studio-tree-row:hover .studio-tree-action,
+.studio-tree-row:has(:focus-visible) .studio-tree-action {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .studio-tree-action {
+    opacity: 1;
+  }
+}
+
+/*
+ * The button sits over the label's end rather than beside it, so it never widens the row; the
+ * label fades out beneath it instead of being pushed along.
+ */
+@media (hover: none) {
+  .studio-tree-row > button:not([data-tree-toggle]) {
+    mask-image: linear-gradient(to left, transparent var(--spacing-6), #000 var(--spacing-10));
+  }
+}
+
+.studio-tree-row:is(:hover, :has(:focus-visible)) > button:not([data-tree-toggle]) {
+  mask-image: linear-gradient(to left, transparent var(--spacing-6), #000 var(--spacing-10));
+}
+
+/* A row with two buttons fades a button's width further in. */
+.studio-tree-row:has(.studio-tree-action > :nth-child(2)):is(:hover, :has(:focus-visible))
+> button:not([data-tree-toggle]) {
+  mask-image: linear-gradient(
+    to left,
+    transparent calc(var(--spacing-6) + var(--spacing-8)),
+    #000 calc(var(--spacing-10) + var(--spacing-8))
+  );
+}
+
+/* A list row's badges stay on one line: past the field's width they end in an ellipsis beside the
+   count, rather than wrapping the count out of the field. */
+.inspector-list span:has(> .astryx-badge) {
+  flex-wrap: nowrap;
+  min-width: 0;
+}
+
+/*
+ * Controls the project's files set in code: the fieldset is the lock, with no box of its own, and
+ * it greys what it holds. A lock inside a lock greys once.
+ */
+.inspector-set-in-code {
+  border: 0;
+  margin: 0;
+  min-inline-size: 0;
+  opacity: 0.75;
+  padding: 0;
+  pointer-events: none;
+}
+
+.inspector-set-in-code .inspector-set-in-code {
+  opacity: 1;
+}
+
+/*
+ * Where a value set in code comes from: the field status's box under the control, in grey since
+ * nothing is wrong, held to one line. The open button sits inside the box's own padding.
+ */
+.inspector-origin {
+  align-items: center;
+  background: var(--color-background-muted);
+  border-radius: var(--radius-element);
+  color: var(--color-text-secondary);
+  display: flex;
+  font-size: var(--text-supporting-size);
+  gap: var(--spacing-1);
+  line-height: var(--text-supporting-leading);
+  min-width: 0;
+  padding-block: var(--spacing-1);
+  padding-inline: var(--spacing-2);
+}
+
+/* The hover card's trigger wraps the line inline: it takes the row's width instead. */
+.inspector-origin-trigger {
+  display: flex;
+  min-width: 0;
+}
+
+/* The line is the way to its file: a button that looks like the note it is. */
+button.inspector-origin {
+  border: 0;
+  cursor: pointer;
+  font-family: inherit;
+  text-align: start;
+  width: 100%;
+}
+
+button.inspector-origin:hover {
+  color: var(--color-text-primary);
+}
+
+.inspector-origin-text {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* An optional section the draft leaves out: in the tree, a step quieter than the rest. */
+.studio-tree-off {
+  color: var(--color-text-secondary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .studio-tree-action {
+    transition: none;
+  }
+}
+
+/*
+ * The studio on a phone, the way the docs reader works: the editor fills the screen, the tree
+ * opens over it from Sections, and the preview opens over it from Preview, with Back to return. The
+ * draft lives only on this page, so the preview is a sheet here rather than another page.
+ */
+.studio-phone {
+  display: none;
+}
+
+/* The frame's class in each selector outranks Astryx's own one-class rules, including the panel's
+   resized width, without !important. */
+@media (width < 768px) {
+  .studio-phone {
+    display: contents;
+  }
+
+  .studio-frame {
+    position: relative;
+  }
+
+  .studio-frame .studio-side {
+    width: 100%;
+    max-width: none;
+    flex: 1 1 auto;
+  }
+
+  .studio-frame .studio-side-handle,
+  .studio-frame .studio-tree,
+  .studio-frame .studio-preview {
+    display: none;
+  }
+
+  .studio-frame.studio-tree-open .studio-tree,
+  .studio-frame.studio-preview-open .studio-preview {
+    display: flex;
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    width: 100%;
+  }
+
+  /* The tree covers the editor inside the raised panel; the preview covers the page. */
+  .studio-frame.studio-tree-open .studio-tree {
+    background: var(--color-background-surface);
+  }
+
+  .studio-frame.studio-preview-open .studio-preview {
+    background: var(--color-background-body);
+  }
+
+  .studio-frame.studio-tree-open .studio-tree > * {
+    width: 100%;
+  }
+}
+
+/*
+ * The map opens beside the editor, in the room the preview gives up: the panel widens over the
+ * preview, which goes with its handle, and the tree and the editor keep the widths they had. A
+ * handle between the editor and the map resizes the editor as the panel's did. The frame's class
+ * outranks the panel's resized width.
+ */
+.studio-map-pane {
+  min-width: 0;
+  border-inline-start: 1px solid var(--color-border);
+}
+
+@media (width >= 768px) {
+  .studio-frame:is(.studio-map-open, .studio-settings-open) .studio-side {
+    width: 100%;
+    max-width: none;
+    flex: 1 1 auto;
+  }
+
+  .studio-frame.studio-map-open .studio-view {
+    flex: 0 0 var(--studio-view-width, 24rem);
+    width: var(--studio-view-width, 24rem);
+    min-width: 0;
+  }
+
+  .studio-frame:is(.studio-map-open, .studio-settings-open) .studio-side-handle,
+  .studio-frame:is(.studio-map-open, .studio-settings-open) .studio-preview {
+    display: none;
+  }
+}
+
+/* On a phone the map covers the editor inside the raised panel, the way the tree does. */
+@media (width < 768px) {
+  .studio-frame .studio-map-handle {
+    display: none;
+  }
+
+  .studio-frame .studio-map-pane {
+    position: absolute;
+    inset: 0;
+    z-index: 2;
+    width: 100%;
+    border-inline-start: 0;
+    background: var(--color-background-surface);
+  }
+}
+
+/*
+ * An editor swaps its list for one row's page, and back: a detector's, a question's. Each side
+ * fades in as it mounts, so the swap reads as a move rather than a jump.
+ */
+.editor-page {
+  animation: editor-page-enter var(--duration-fast) var(--ease-standard);
+}
+
+@keyframes editor-page-enter {
+  from {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .editor-page {
+    animation: none;
+  }
+}
+
+/*
+ * A row's own action, shown while the row is hovered or holds focus. Where nothing hovers (touch),
+ * it always shows.
+ */
+@media (hover: hover) {
+  .row-reveal {
+    opacity: 0;
+    transition: opacity var(--duration-fast) var(--ease-standard);
+  }
+
+  .astryx-list-item:hover .row-reveal,
+  .astryx-list-item:focus-within .row-reveal {
+    opacity: 1;
+  }
+}
+
+/* A unified diff, in the Save review and the file-conflict dialog: removed lines red, added lines
+   green, each with its sign in a gutter. */
+.studio-diff {
+  margin: 0;
+  min-width: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-element);
+  overflow: hidden;
+  font-family: var(--font-family-code);
+  font-size: var(--font-size-xs);
+  line-height: 1.6;
+}
+
+.studio-diff-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+  padding: var(--spacing-1) var(--spacing-3);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--color-background-muted);
+  color: var(--color-text-secondary);
+}
+
+.studio-diff-title {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.studio-diff-sides {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--spacing-4);
+  min-width: 0;
+}
+
+.studio-diff-count {
+  display: flex;
+  flex: none;
+  gap: var(--spacing-2);
+  font-variant-numeric: tabular-nums;
+}
+
+.studio-diff-head [data-sign="-"] {
+  color: var(--color-text-red);
+}
+
+.studio-diff-head [data-sign="+"] {
+  color: var(--color-text-green);
+}
+
+/* The gutters size to their widest cell and every line shares them. */
+.studio-diff-lines {
+  display: grid;
+  grid-template-columns: repeat(2, max-content) minmax(max-content, 1fr);
+  overflow: auto;
+  padding-block: var(--spacing-1);
+}
+
+.studio-diff[data-wrapped="true"] .studio-diff-lines {
+  grid-template-columns: repeat(2, max-content) minmax(0, 1fr);
+}
+
+.studio-diff-line {
+  display: grid;
+  grid-column: 1 / -1;
+  grid-template-columns: subgrid;
+}
+
+.studio-diff-line[data-sign="-"] {
+  background: var(--color-background-red);
+}
+
+.studio-diff-line[data-sign="+"] {
+  background: var(--color-background-green);
+}
+
+.studio-diff-number,
+.studio-diff-sign {
+  padding-inline: var(--spacing-2);
+  color: var(--color-text-secondary);
+  text-align: end;
+  user-select: none;
+}
+
+.studio-diff-sign {
+  grid-column: 2;
+  text-align: center;
+}
+
+.studio-diff-line[data-sign="-"] .studio-diff-sign {
+  color: var(--color-text-red);
+}
+
+.studio-diff-line[data-sign="+"] .studio-diff-sign {
+  color: var(--color-text-green);
+}
+
+.studio-diff-line code {
+  grid-column: 3;
+  padding-inline-end: var(--spacing-3);
+  font: inherit;
+  white-space: pre;
+  transition: opacity 120ms ease;
+}
+
+.studio-diff[data-wrapped="true"] .studio-diff-line code {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+/* The side that does not stand is set aside: struck through and faint. */
+.studio-diff[data-kept="+"] .studio-diff-line[data-sign="-"] code,
+.studio-diff[data-kept="-"] .studio-diff-line[data-sign="+"] code {
+  text-decoration: line-through;
+  opacity: 0.55;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .studio-diff-line code {
+    transition: none;
+  }
+}
+
+/* In Save's review, a file's name stays at the top while its changes pass. */
+.save-file {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  padding-block: var(--spacing-1);
+  background: var(--color-background-surface);
+}

package/ui/theorem-mark.css

@@ -0,0 +1,84 @@
+/* Pen timing. Strokes overlap so the second crosses the first; the dot lands after both settle.
+   Dash geometry stays on the SVG attributes (pathLength units). Do not set
+   stroke-dasharray or stroke-dashoffset here: CSS lengths are pixels and the
+   round caps show up as dots. */
+.theorem-mark {
+  --mark-delay: 40ms;
+  --mark-draw: 700ms;
+  --mark-draw-late: 640ms;
+  --mark-stagger: 220ms;
+  --mark-dot-at: 820ms;
+  --mark-dot-in: 240ms;
+  display: block;
+  width: 72px;
+  height: 72px;
+}
+
+.theorem-mark-stroke {
+  animation-name: theorem-mark-draw;
+  animation-duration: var(--mark-draw);
+  animation-timing-function: cubic-bezier(0.45, 0.02, 0.15, 1);
+  animation-delay: var(--mark-delay);
+  animation-fill-mode: forwards;
+}
+
+.theorem-mark-stroke-late {
+  animation-duration: var(--mark-draw-late);
+  animation-delay: calc(var(--mark-delay) + var(--mark-stagger));
+}
+
+.theorem-mark-dot {
+  transform-box: fill-box;
+  transform-origin: center;
+  transform: scale(0);
+  animation: theorem-mark-dot-in var(--mark-dot-in) cubic-bezier(0.16, 1, 0.3, 1)
+    calc(var(--mark-delay) + var(--mark-dot-at)) forwards;
+}
+
+@keyframes theorem-mark-draw {
+  /* Stay invisible while the dash is only a round cap, then show the line. */
+  0% {
+    opacity: 0;
+    stroke-dashoffset: 1;
+  }
+
+  12% {
+    opacity: 1;
+    stroke-dashoffset: 0.82;
+  }
+
+  100% {
+    opacity: 1;
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes theorem-mark-dot-in {
+  from {
+    opacity: 0;
+    transform: scale(0);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .theorem-mark-stroke,
+  .theorem-mark-dot {
+    animation: none;
+    transition: none;
+  }
+
+  .theorem-mark-stroke {
+    stroke-dashoffset: 0;
+    opacity: 1;
+  }
+
+  .theorem-mark-dot {
+    opacity: 1;
+    transform: none;
+  }
+}

package/ui/theorem-mark.d.ts

@@ -0,0 +1,22 @@
+import type { SVGProps } from 'react';
+/**
+ * Geometry of `public/favicon.svg`: the tile's 24×24 mark, translated by the
+ * favicon's own `(4 4)` inset. The tile's black rect is the page, so it is not drawn.
+ */
+export declare const THEOREM_MARK: {
+    readonly rise: "M4.5 18.5c2 0 3-1.2 4.2-3.4l2.6-5c1-1.9 2.1-3.1 4.2-3.1";
+    readonly fall: "M5.5 8.2c1.6-.9 3.2-.4 3.8 1.6l2.3 6.6c.6 1.7 2.1 2.4 3.9 1.7";
+    readonly dot: {
+        readonly cx: 19.5;
+        readonly cy: 4.5;
+        readonly r: 1.6;
+    };
+};
+export type TheoremMarkProps = SVGProps<SVGSVGElement> & {
+    /** Stroke and dot paint. The boot and nav loaders pass white; the rail uses currentColor. */
+    ink?: string;
+};
+/** The favicon mark. Strokes draw in order, then the dot lands. */
+export declare function TheoremMark({ ink, className, ...props }: TheoremMarkProps): import("react").JSX.Element;
+/** The mark as an icon beside Tabler's glyphs: drawn whole and still, in the current colour. */
+export declare function IconTheorem(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/ui/theorem-mark.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './theorem-mark.css';
+/**
+ * Geometry of `public/favicon.svg`: the tile's 24×24 mark, translated by the
+ * favicon's own `(4 4)` inset. The tile's black rect is the page, so it is not drawn.
+ */
+export const THEOREM_MARK = {
+    rise: 'M4.5 18.5c2 0 3-1.2 4.2-3.4l2.6-5c1-1.9 2.1-3.1 4.2-3.1',
+    fall: 'M5.5 8.2c1.6-.9 3.2-.4 3.8 1.6l2.3 6.6c.6 1.7 2.1 2.4 3.9 1.7',
+    dot: { cx: 19.5, cy: 4.5, r: 1.6 },
+};
+/** The favicon mark. Strokes draw in order, then the dot lands. */
+export function TheoremMark({ ink = 'currentColor', className, ...props }) {
+    const { cx, cy, r } = THEOREM_MARK.dot;
+    return (_jsx("svg", { viewBox: "0 0 32 32", className: className ? `theorem-mark ${className}` : 'theorem-mark', "aria-hidden": true, ...props, children: _jsxs("g", { transform: "translate(4 4)", fill: "none", stroke: ink, strokeWidth: 2, strokeLinecap: "round", children: [_jsx("path", { className: "theorem-mark-stroke", pathLength: 1, strokeDasharray: 1, strokeDashoffset: 1, opacity: 0, d: THEOREM_MARK.rise }), _jsx("path", { className: "theorem-mark-stroke theorem-mark-stroke-late", pathLength: 1, strokeDasharray: 1, strokeDashoffset: 1, opacity: 0, d: THEOREM_MARK.fall }), _jsx("circle", { className: "theorem-mark-dot", cx: cx, cy: cy, r: r, fill: ink, stroke: "none", opacity: 0 })] }) }));
+}
+/** The mark as an icon beside Tabler's glyphs: drawn whole and still, in the current colour. */
+export function IconTheorem(props) {
+    const { cx, cy, r } = THEOREM_MARK.dot;
+    return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", "aria-hidden": true, ...props, children: [_jsx("path", { d: THEOREM_MARK.rise }), _jsx("path", { d: THEOREM_MARK.fall }), _jsx("circle", { cx: cx, cy: cy, r: r, fill: "currentColor", stroke: "none" })] }));
+}

package/vite.d.mts

@@ -0,0 +1,30 @@
+/**
+ * What a Vite build needs to show the studio screen (`@theoremjs/studio/ui`). `hostRoot` is the
+ * app that shows it; its install holds React and the design library.
+ *
+ * - The screen's packages resolve to the host's install where it has them, so there is one copy
+ *   of each. Monaco, fflate, and zod are the package's own dependencies: an install from the
+ *   registry puts them in the host, and a linked package keeps them beside itself.
+ * - `virtual:studio-codicons/*` is Monaco's icon sheets.
+ * - `virtual:studio-type-sources` is the declarations for the open agent's file. The Monaco
+ *   worker typechecks that one file. It does not typecheck the kernel: these are the
+ *   declarations for `@theoremjs/agents` (emitted from the repo when the package is linked from
+ *   it, or the ones the installed package ships), plus the zod declarations that entry imports. Locale files and anything the entries do not reach are
+ *   left out. The worker resolves a `.js` import in a declaration to the `.d.ts` beside it.
+ */
+export function studioVite({ hostRoot }: {
+    hostRoot: any;
+}): {
+    name: string;
+    config(): {
+        resolve: {
+            dedupe: string[];
+        };
+    };
+    resolveId(source: any): any;
+    load(source: any): string | undefined;
+};
+/** A package's folder as `root` resolves it: in its own `node_modules`, or the nearest one above. */
+export function installedFrom(root: any, name: any): any;
+/** A package's folder: the host's install when it has one, or the copy the studio package came with. */
+export function hostPackage(hostRoot: any, name: any, ownRoot?: any): any;