@theoremjs/studio 0.0.0-stage → 0.3.2

package/ui/studio-host.js

@@ -0,0 +1,12 @@
+/**
+ * What the page that shows the studio gives it: the pieces that belong to the host's build rather
+ * than to the screen.
+ */
+import { createContext, useContext } from 'react';
+export const StudioHostContext = createContext(null);
+export function useStudioHost() {
+    const host = useContext(StudioHostContext);
+    if (!host)
+        throw new Error('The studio screen needs a host.');
+    return host;
+}

package/ui/studio-live.d.ts

@@ -0,0 +1,17 @@
+import { type LiveRunnerProps } from '@theoremjs/react/live';
+import { type StudioBrowserRuntime } from '../browser.ts';
+import { type StudioRunPayload } from '../mod.ts';
+/** What a live call is run with, wherever it runs. */
+export type StudioLiveProps = Pick<LiveRunnerProps, 'trace' | 'slots' | 'context'> & {
+    payload: StudioRunPayload;
+    /** Called as each call starts. */
+    note: () => void;
+};
+/** A live profile's call: in the browser's runtime when there is one, else through the studio's server. */
+export declare function StudioLive({ runtime, ...props }: StudioLiveProps & {
+    runtime: StudioBrowserRuntime | null;
+}): import("react").JSX.Element;
+/** A project's live profile: the call runs in the project, through the studio's local server. */
+export declare function ProjectLive({ endpoint, ...props }: StudioLiveProps & {
+    endpoint: string;
+}): import("react").JSX.Element;

package/ui/studio-live.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LiveRunner } from '@theoremjs/react/live';
+import { useMemo } from 'react';
+import { browserStudioLiveConnection } from "../browser.js";
+import { studioInterface, studioLiveConnection, studioPageTools, } from "../mod.js";
+import { STUDIO_LABELS } from "./lib/studio-labels.js";
+/** A live profile's call: in the browser's runtime when there is one, else through the studio's server. */
+export function StudioLive({ runtime, ...props }) {
+    const { payload } = props;
+    return (_jsx(LiveView, { ...props, connect: () => runtime ? browserStudioLiveConnection(payload, runtime) : studioLiveConnection(payload) }));
+}
+/** A project's live profile: the call runs in the project, through the studio's local server. */
+export function ProjectLive({ endpoint, ...props }) {
+    return (_jsx(LiveView, { ...props, connect: () => ({ createSocket: () => new WebSocket(endpoint.replace(/^http/, 'ws')) }) }));
+}
+function LiveView({ payload, note, connect, trace, slots, context, }) {
+    const iface = useMemo(() => studioInterface(payload), [payload]);
+    /** The studio's page answers each page tool with the tool's stub. */
+    const pageTools = useMemo(() => studioPageTools(payload), [payload]);
+    if (iface.type !== 'live')
+        return null;
+    return (_jsx(LiveRunner, { labels: STUDIO_LABELS, iface: iface, connection: () => {
+            note();
+            return connect();
+        }, trace: trace, slots: slots, context: context, pageTools: pageTools }));
+}

package/ui/studio-map.css

@@ -0,0 +1,273 @@
+/*
+ * The map, panned both ways. The scrollport is the query box, so the field is at least the panel
+ * and only larger when the columns need the room. The lines are one drawing under the nodes. The
+ * nodes are the loader's tokens (map-token.css); with detail they are buttons, and a profile is a
+ * card of them: its head, then a row for each section. Every colour, radius and timing is an Astryx
+ * theme token. The panel's own motion brings the map in.
+ */
+.studio-map-frame {
+  position: relative;
+  height: 100%;
+  min-height: 0;
+}
+
+.studio-map-scroll {
+  container-type: size;
+}
+
+/* Over the field's corner: what the right click offers, and Close. */
+.studio-map-tools {
+  position: absolute;
+  inset-block-start: var(--spacing-3);
+  inset-inline-end: var(--spacing-3);
+  display: flex;
+  gap: var(--spacing-2);
+}
+
+/* A search that finds nothing says so over the bare field. */
+.studio-map-nothing {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.studio-map {
+  position: relative;
+  width: var(--map-width);
+  height: var(--map-height);
+  background-color: var(--color-background-surface);
+  cursor: grab;
+  user-select: none;
+}
+
+.studio-map[data-panning] {
+  cursor: grabbing;
+}
+
+@supports (width: 1cqw) {
+  .studio-map {
+    width: max(100cqw, var(--map-width));
+    height: max(100cqh, var(--map-height));
+  }
+}
+
+/* The right click's own box holds the field, however far it runs, with a screen of room past it
+   on every side: the map pans as far as the pointer goes. */
+[data-map-field] {
+  width: max-content;
+  min-width: 100%;
+  padding: 100vh 100vw;
+  background-color: var(--color-background-surface);
+}
+
+.studio-map-lines {
+  position: absolute;
+  inset: 0 auto auto 0;
+  pointer-events: none;
+}
+
+.studio-map-lines .map-line {
+  stroke: color-mix(in srgb, var(--color-border-emphasized) 60%, var(--color-background-surface));
+  transition: stroke var(--duration-fast) var(--ease-standard);
+}
+
+/* A tool asking a profile and a profile summarised by another run against the columns: dashed. */
+.studio-map-lines .map-line:is([data-kind="asks"], [data-kind="summarised"]) {
+  stroke-dasharray: 4 4;
+}
+
+.studio-map-heading {
+  position: absolute;
+  pointer-events: none;
+}
+
+/* What a node holds fades, and takes its colour, over a moment. */
+.studio-map-node > *,
+.studio-map-card > * {
+  transition:
+    opacity var(--duration-fast) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard);
+}
+
+.studio-map .map-token > * {
+  transition:
+    opacity var(--duration-fast) var(--ease-standard),
+    background-image var(--duration-fast) var(--ease-standard);
+}
+
+.studio-map .map-token {
+  display: flex;
+  max-width: var(--map-slot);
+  overflow: hidden;
+  border-radius: var(--radius-inner);
+  background: var(--color-background-surface);
+}
+
+/* With detail a node is its token grown: the token's fill, corners, type and padding, as wide
+   as what it holds up to the slot. Each line of it is as tall as a token. */
+.studio-map-node,
+.studio-map-card {
+  position: absolute;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  max-width: var(--map-slot);
+  overflow: hidden;
+  padding: 0;
+  border: 0;
+  border-radius: var(--radius-inner);
+  background: linear-gradient(var(--map-fill), var(--map-fill)), var(--color-background-surface);
+  color: var(--color-text-primary);
+  font-family: inherit;
+  --map-fill: var(--color-neutral);
+  text-align: start;
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    opacity var(--duration-fast) var(--ease-standard);
+}
+
+.studio-map-node,
+.studio-map-head,
+.studio-map-row {
+  cursor: pointer;
+}
+
+.studio-map-head,
+.studio-map-row {
+  box-sizing: border-box;
+  flex: none;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: start;
+}
+
+.studio-map-head {
+  display: flex;
+  flex-direction: column;
+}
+
+.studio-map-name,
+.studio-map-row {
+  display: flex;
+  gap: var(--spacing-1);
+  align-items: center;
+  height: var(--map-line);
+  padding-inline: var(--spacing-3);
+}
+
+.studio-map-name > span,
+.studio-map-row > span {
+  min-width: 0;
+}
+
+/* Under the name, from where the name starts: past the icon and its gap. */
+.studio-map-note {
+  padding-inline: calc(var(--spacing-3) + 16px + var(--spacing-1)) var(--spacing-3);
+}
+
+.studio-map-row {
+  transition:
+    opacity var(--duration-fast) var(--ease-standard),
+    background-color var(--duration-fast) var(--ease-standard);
+}
+
+.studio-map-row > .studio-map-row-note {
+  flex: 1;
+  padding-inline-start: var(--spacing-3);
+}
+
+:is(.studio-map-node, .studio-map-head):has(> .studio-map-note) {
+  padding-block-end: var(--spacing-2);
+}
+
+/* The section under the pointer, and each one a lit line ends on. */
+.studio-map-row:is(:hover, :focus-visible, [data-on]),
+.studio-map-head:is(:hover, :focus-visible) {
+  background: var(--color-background-card);
+}
+
+/* A provider, and a shared setting nothing here uses, open nothing. */
+.studio-map-node:disabled {
+  cursor: default;
+}
+
+.studio-map-node:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+}
+
+.studio-map-card :is(.studio-map-head, .studio-map-row):focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: -2px;
+}
+
+/* The profile or tool open in the editor, and the section of it that is open. */
+.studio-map-node[aria-current],
+.studio-map-card[data-open] {
+  --map-fill: var(--color-background-blue);
+  color: var(--color-text-blue);
+}
+
+.studio-map-row[aria-current] {
+  background: var(--color-background-card);
+}
+
+/* What a search found, among the family it brought along. */
+.studio-map :is(.map-token, .studio-map-node, .studio-map-card)[data-found] {
+  outline: 1.5px solid var(--color-accent);
+}
+
+/* The node being dragged rides over the rest, under the pointer and without easing. */
+:is(.studio-map-node, .studio-map-card)[data-dragging] {
+  z-index: 1;
+  transition: none;
+}
+
+.studio-map .map-token[data-dragging] {
+  z-index: 1;
+  transition: none;
+}
+
+:is(.studio-map-node, .studio-map-card)[data-dragging],
+.studio-map .map-token[data-dragging] *,
+.studio-map-card[data-dragging] :is(.studio-map-head, .studio-map-row) {
+  cursor: grabbing;
+}
+
+/* While one node is lit, it and what it is joined to stay; the rest step back. What a node holds
+   fades, not the node, so no line shows through it. */
+.studio-map[data-lit] :is(.studio-map-node, .studio-map-card):not([data-on]) > * {
+  opacity: 0.45;
+}
+
+.studio-map[data-lit] .map-token:not([data-on]) > * {
+  opacity: 0.45;
+}
+
+.studio-map[data-lit] .map-line:not([data-on]) {
+  stroke: color-mix(in srgb, var(--color-border-emphasized) 30%, var(--color-background-surface));
+}
+
+.studio-map .map-line[data-open] {
+  stroke: var(--color-text-secondary);
+}
+
+.studio-map .map-line[data-on] {
+  stroke: var(--color-accent);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .studio-map-node,
+  .studio-map-card,
+  .studio-map-node > *,
+  .studio-map-card > *,
+  .studio-map-row,
+  .studio-map .map-token > *,
+  .studio-map .map-line {
+    transition: none;
+  }
+}

package/ui/studio-map.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The map: the providers, models, shared settings, profiles, and tools as tokens in columns, with a
+ * line from each to what it feeds. It changes nothing; a node opens what it stands for. `Expand`
+ * shows each profile as a card of its sections and each tool with its description. A node can be
+ * dragged to where it reads best, and the field dragged to pan it; `Tidy` puts every node back. A
+ * right click on a node shows its family alone: what feeds it and what it feeds. A search shows the
+ * family of every node it finds.
+ */
+import { type SharedEntry, type StudioWorkspace } from '../mod.ts';
+export declare function StudioMap({ workspace, shared, selected, onOpen, onClose, }: {
+    workspace: StudioWorkspace;
+    shared: readonly SharedEntry[];
+    /** The open node's id; its agent or tool is marked on the map. */
+    selected: string;
+    onOpen: (node: string) => void;
+    onClose: () => void;
+}): import("react").JSX.Element;