@flowdular/sdk 0.1.0 → 0.2.0

package/packages/sandbox/src/client/SpecReviewCard.tsrx

@@ -1,321 +0,0 @@
-import { useState } from 'octane';
-import { Button, Icon, Tag } from '@flowdular/sdk/ui';
-import type {
-	ModuleSpecReview,
-	SpecChangeKind,
-	SpecFieldChange,
-} from '../server/spec.ts';
-import { useTranslation } from './i18n.ts';
-
-export interface SpecReviewCardProps {
-	readonly review: ModuleSpecReview;
-	readonly busy: boolean;
-	readonly onApprove: () => void;
-	readonly onRequestChanges: (comment: string) => void;
-	readonly onEdit: () => void;
-}
-
-const FIELD_LABELS: Readonly<Record<string, string>> = {
-	id: 'id',
-	specVersion: 'version',
-	status: 'status',
-	name: 'name',
-	description: 'description',
-	profile: 'profile',
-	tenancy: 'tenancy',
-	capabilities: 'capability',
-	locales: 'locale',
-	dependencies: 'dependency',
-	invariants: 'invariant',
-	dataOwnership: 'dataOwnership',
-	permissions: 'permission',
-	acceptanceScenarios: 'scenario',
-};
-
-const IDENTIFIER_FIELDS = new Set([
-	'id',
-	'specVersion',
-	'status',
-	'profile',
-	'tenancy',
-	'capabilities',
-	'locales',
-	'dependencies',
-	'permissions',
-	'acceptanceScenarios',
-]);
-
-function changeSign(kind: SpecChangeKind): string {
-	if (kind === 'added') return '+';
-	if (kind === 'removed') return '-';
-	return '~';
-}
-
-function changeKey(change: SpecFieldChange): string {
-	return `${change.field}:${change.kind}:${change.key ?? ''}`;
-}
-
-/* What the entry became, without repeating the identifier that names it. */
-function changeValue(change: SpecFieldChange): string {
-	if (change.kind === 'changed') {
-		return `${change.before ?? ''} → ${change.after ?? ''}`;
-	}
-	const value = change.after ?? change.before ?? '';
-	return value === change.key ? '' : value;
-}
-
-/* What the operator approves: the specification as it stands, and for a change
-   the difference from the copy the session started with. */
-export function SpecReviewCard(props: SpecReviewCardProps) @{
-	const { t } = useTranslation();
-	const review = props.review;
-	const draft = review.draft;
-	const changes = review.changes;
-	const isEdit = review.kind === 'edit';
-	const marks = new Map<string, SpecChangeKind>();
-	for (const change of changes) {
-		if (change.key) marks.set(change.field + ':' + change.key, change.kind);
-	}
-	const markOf = (field: string, key: string) => isEdit
-		? marks.get(field + ':' + key) ?? null
-		: null;
-	const [asking, setAsking] = useState(false);
-	const [comment, setComment] = useState('');
-
-	<section class="spec-review">
-		<header class="spec-review__head">
-			<span class="ui-mono">{review.moduleId}</span>
-			<Tag mono tone={review.approved ? 'success' : 'warning'}>
-				{review.status === 'draft' || review.status === 'approved' ||
-				review.status === 'rejected'
-					? t('sandbox.spec.status.' + review.status)
-					: review.status ?? t('sandbox.spec.status.none')}
-			</Tag>
-			@if (draft && draft.specVersion) {
-				<Tag mono>{'v' + draft.specVersion}</Tag>
-			}
-			<span class="sandbox__spacer"></span>
-			<span class="spec-review__path ui-mono">{review.path}</span>
-		</header>
-
-		@if (!draft) {
-			<p class="spec-review__empty">
-				{review.present
-					? t('sandbox.spec.unreadable')
-					: t('sandbox.spec.missing')}
-			</p>
-		} @else {
-			<>
-				@if (isEdit) {
-					<div class="spec-review__block">
-						<h4 class="spec-review__title">
-							{changes.length === 0
-								? t('sandbox.spec.changes.empty')
-								: t('sandbox.spec.changes.title')}
-						</h4>
-						@if (changes.length > 0) {
-							<ul class="spec-review__changes">
-								@for (const change of changes; key changeKey(change)) {
-									<li
-										class={'spec-review__change spec-review__change--' +
-											change.kind}
-									>
-										<span class="spec-review__sign">{changeSign(
-											change.kind,
-										)}</span>
-										<span class="spec-review__field">
-											{FIELD_LABELS[change.field]
-												? t('sandbox.spec.field.' + FIELD_LABELS[change.field])
-												: change.field}
-										</span>
-										@if (change.key) {
-											<span
-												class={IDENTIFIER_FIELDS.has(change.field)
-													? 'ui-mono'
-													: ''}
-											>{change.key}</span>
-										}
-										@if (changeValue(change)) {
-											<span class="spec-review__value">{changeValue(
-												change,
-											)}</span>
-										}
-									</li>
-								}
-							</ul>
-						}
-					</div>
-				}
-
-				<div class="spec-review__block">
-					<h4 class="spec-review__title">{draft.name || review.moduleId}</h4>
-					<p class="spec-review__text">{draft.description}</p>
-					<dl class="spec-review__facts">
-						<dt>{t('sandbox.spec.facts.capabilities')}</dt>
-						<dd class="ui-mono">
-							{draft.capabilities.join(', ') || t('sandbox.common.none')}
-						</dd>
-						<dt>{t('sandbox.spec.facts.tenancy')}</dt>
-						<dd class="ui-mono">
-							{draft.tenancy || t('sandbox.common.unset')}
-						</dd>
-						<dt>{t('sandbox.spec.facts.profile')}</dt>
-						<dd class="ui-mono">
-							{draft.profile || t('sandbox.common.unset')}
-						</dd>
-					</dl>
-				</div>
-
-				@if (draft.permissions.length > 0) {
-					<div class="spec-review__block">
-						<h4 class="spec-review__title">{t('sandbox.spec.permissions')}</h4>
-						<ul class="spec-review__list">
-							@for (const permission of draft.permissions; key permission.id) {
-								<li
-									class={[
-										'spec-review__item',
-										markOf('permissions', permission.id) &&
-											'spec-review__item--' +
-												markOf('permissions', permission.id),
-									]}
-								>
-									<span class="ui-mono">{permission.id}</span>
-									<span>{permission.description}</span>
-								</li>
-							}
-						</ul>
-					</div>
-				}
-
-				@if (draft.invariants.length > 0) {
-					<div class="spec-review__block">
-						<h4 class="spec-review__title">{t('sandbox.spec.invariants')}</h4>
-						<ul class="spec-review__list">
-							@for (const invariant of draft.invariants; key invariant) {
-								<li
-									class={[
-										'spec-review__item',
-										markOf('invariants', invariant) &&
-											'spec-review__item--' + markOf('invariants', invariant),
-									]}
-								>
-									<span>{invariant}</span>
-								</li>
-							}
-						</ul>
-					</div>
-				}
-
-				@if (draft.dataOwnership.length > 0) {
-					<div class="spec-review__block">
-						<h4 class="spec-review__title">{t(
-							'sandbox.spec.dataOwnership',
-						)}</h4>
-						<ul class="spec-review__list">
-							@for (const sentence of draft.dataOwnership; key sentence) {
-								<li
-									class={[
-										'spec-review__item',
-										markOf('dataOwnership', sentence) &&
-											'spec-review__item--' + markOf('dataOwnership', sentence),
-									]}
-								>
-									<span>{sentence}</span>
-								</li>
-							}
-						</ul>
-					</div>
-				}
-
-				@if (draft.acceptanceScenarios.length > 0) {
-					<div class="spec-review__block">
-						<h4 class="spec-review__title">{t(
-							'sandbox.spec.acceptanceScenarios',
-						)}</h4>
-						<ul class="spec-review__list">
-							@for (const scenario of draft.acceptanceScenarios; key scenario.id) {
-								<li
-									class={[
-										'spec-review__scenario',
-										markOf('acceptanceScenarios', scenario.id) &&
-											'spec-review__item--' +
-												markOf('acceptanceScenarios', scenario.id),
-									]}
-								>
-									<span class="ui-mono">{scenario.id}</span>
-									<span>
-										<b>{t('sandbox.spec.given')}</b>
-										{' ' + scenario.given}
-									</span>
-									<span>
-										<b>{t('sandbox.spec.when')}</b>
-										{' ' + scenario.when}
-									</span>
-									<span>
-										<b>{t('sandbox.spec.then')}</b>
-										{' ' + scenario.then}
-									</span>
-								</li>
-							}
-						</ul>
-					</div>
-				}
-			</>
-		}
-
-		@if (asking) {
-			<div class="spec-review__ask">
-				<textarea
-					class="ui-textarea"
-					rows={3}
-					placeholder={t('sandbox.spec.request.placeholder')}
-					value={comment}
-					onInput={(event) => setComment(event.currentTarget.value)}
-				></textarea>
-				<div class="ui-form__actions">
-					<Button
-						size="sm"
-						variant="primary"
-						disabled={props.busy || comment.trim().length === 0}
-						onClick={() => {
-							props.onRequestChanges(comment.trim());
-							setComment('');
-							setAsking(false);
-						}}
-					>
-						<Icon name="play" size={14} />
-						{t('sandbox.spec.request.send')}
-					</Button>
-					<Button size="sm" variant="ghost" onClick={() => setAsking(false)}>{t(
-						'sandbox.common.cancel',
-					)}</Button>
-				</div>
-			</div>
-		} @else {
-			<div class="ui-form__actions">
-				<Button
-					size="sm"
-					variant="primary"
-					disabled={props.busy || !draft}
-					onClick={props.onApprove}
-				>
-					<Icon name="check" size={14} />
-					{t('sandbox.spec.approve')}
-				</Button>
-				<Button
-					size="sm"
-					variant="secondary"
-					disabled={props.busy}
-					onClick={() => setAsking(true)}
-				>
-					<Icon name="help" size={14} />
-					{t('sandbox.spec.request.action')}
-				</Button>
-				<Button size="sm" variant="ghost" onClick={props.onEdit}>
-					<Icon name="code" size={14} />
-					{t('sandbox.spec.edit')}
-				</Button>
-			</div>
-		}
-	</section>
-}

package/packages/sandbox/src/client/WorkCard.tsrx

@@ -1,128 +0,0 @@
-import { useEffect } from 'octane';
-import { Button, Icon, Tag } from '@flowdular/sdk/ui';
-import type { SandboxSession } from '../server/sessions.ts';
-import { DiffPane, type ModuleDiff } from './DiffPane.tsrx';
-import { useTranslation } from './i18n.ts';
-
-export type WorkCardMode = 'preview' | 'code';
-
-export interface WorkCardProps {
-	readonly session: SandboxSession;
-	readonly diffs: readonly ModuleDiff[];
-	readonly mode: WorkCardMode;
-	readonly nonce: number;
-	/* The module the card shows; empty means every module of the session. */
-	readonly activeModule: string;
-	readonly previewData: 'fixtures' | 'bridge';
-	readonly onMode: (mode: WorkCardMode) => void;
-	readonly onOpen: () => void;
-	readonly onReload: () => void;
-	readonly onAskAbout: (path: string) => void;
-}
-
-/* The card floats beside the conversation and carries both surfaces the work
-   produces: the running module and its diff. It is a viewport, so a click
-   opens the same content full screen where it becomes interactive. */
-/* The preview renders at a real workspace width and is scaled to the card, so
-   the card shows the desktop layout rather than a narrow rendering. The factor
-   depends on the card width, which only the browser knows. */
-const PREVIEW_WIDTH = 1440;
-
-function fitPreview(): void {
-	const viewport = document.querySelector<HTMLElement>('.work-card__viewport');
-	const frame = viewport?.querySelector<HTMLElement>('.preview-frame');
-	if (!viewport || !frame) return;
-	const scale = viewport.clientWidth / PREVIEW_WIDTH;
-	if (scale <= 0) return;
-	frame.style.width = `${PREVIEW_WIDTH}px`;
-	frame.style.height = `${Math.round(viewport.clientHeight / scale)}px`;
-	frame.style.transform = `scale(${scale})`;
-}
-
-export function WorkCard(props: WorkCardProps) @{
-	const { t } = useTranslation();
-	const source =
-		'/preview/' + props.session.id + '?n=' + props.nonce +
-		(props.activeModule ? '&module=' + props.activeModule : '');
-	const shown =
-		props.activeModule
-			? props.diffs.filter((diff) => diff.module === props.activeModule)
-			: props.diffs;
-
-	useEffect(() => {
-		fitPreview();
-		const observer = new ResizeObserver(() => fitPreview());
-		const viewport = document.querySelector('.work-card__viewport');
-		if (viewport) observer.observe(viewport);
-		return () => observer.disconnect();
-	}, [props.mode, props.nonce]);
-
-	<article class="work-card">
-		<header class="work-card__head">
-			<Button
-				size="sm"
-				variant={props.mode === 'preview' ? 'primary' : 'ghost'}
-				onClick={() => props.onMode('preview')}
-			>{t('sandbox.work.preview')}</Button>
-			<Button
-				size="sm"
-				variant={props.mode === 'code' ? 'primary' : 'ghost'}
-				onClick={() => props.onMode('code')}
-			>{t('sandbox.work.code', { count: shown.length })}</Button>
-			<span class="ui-mono">
-				{props.activeModule
-					? 'modules/' + props.activeModule
-					: props.session.modules.length === 1
-						? props.session.moduleId
-						: t('sandbox.session.modules', {
-								count: props.session.modules.length,
-							})}
-			</span>
-			<span class="sandbox__spacer"></span>
-			@if (props.mode === 'preview') {
-				<Tag tone={props.previewData === 'bridge' ? 'info' : 'neutral'}>
-					{props.previewData === 'bridge'
-						? t('sandbox.work.liveData')
-						: t('sandbox.work.fixtures')}
-				</Tag>
-			}
-			<Button size="sm" variant="ghost" onClick={props.onReload}>
-				<Icon name="refresh" size={14} />
-			</Button>
-			<Button size="sm" variant="ghost" onClick={props.onOpen}>
-				<Icon name="external" size={14} />
-			</Button>
-		</header>
-
-		@if (props.mode === 'preview') {
-			<div class="work-card__stage">
-				<div class="work-card__viewport">
-					<iframe
-						class="preview-frame"
-						src={source}
-						title={t('sandbox.work.previewTitle')}
-					></iframe>
-				</div>
-				<button
-					class="work-card__open"
-					type="button"
-					onClick={props.onOpen}
-					aria-label={t('sandbox.work.openFull')}
-				>
-					<span class="work-card__hint">
-						<Icon name="external" size={14} />
-						{t('sandbox.work.open')}
-					</span>
-				</button>
-			</div>
-		} @else {
-			<div class="work-card__stage work-card__stage--code">
-				<DiffPane
-					diffs={props.diffs}
-					activeModule={props.activeModule}
-					onAsk={props.onAskAbout}
-				/>
-			</div>
-		}
-	</article>
-}

package/packages/sandbox/src/client/WorkbenchModal.tsrx

@@ -1,161 +0,0 @@
-import { useEffect } from 'octane';
-import { Button, Icon } from '@flowdular/sdk/ui';
-import type { SandboxSession } from '../server/sessions.ts';
-import { SpecEditor } from './SpecEditor.tsrx';
-import { DiffPane, type ModuleDiff } from './DiffPane.tsrx';
-import { useTranslation } from './i18n.ts';
-
-export type WorkbenchMode = 'preview' | 'diff' | 'spec';
-
-export interface WorkbenchModalProps {
-	readonly mode: WorkbenchMode;
-	readonly session: SandboxSession;
-	readonly diffs: readonly ModuleDiff[];
-	readonly nonce: number;
-	readonly selecting: boolean;
-	/* The module the preview opens on and the diff is filtered to; empty means
-   every module of the session. */
-	readonly activeModule: string;
-	readonly previewData: 'fixtures' | 'bridge';
-	readonly onModule: (directory: string) => void;
-	readonly onMode: (mode: WorkbenchMode) => void;
-	readonly onToggleSelect: () => void;
-	readonly onReload: () => void;
-	readonly onPreviewData: (mode: 'fixtures' | 'bridge') => void;
-	readonly onAskAbout: (path: string) => void;
-	/* The specification on disk changed, so the session view is stale. */
-	readonly onSpecSaved: () => void;
-	readonly onClose: () => void;
-}
-
-/* Full screen is where the module is actually worked on: the preview is
-   interactive here, and the diff finally has the width it needs. */
-export function WorkbenchModal(props: WorkbenchModalProps) @{
-	const { t } = useTranslation();
-	const source =
-		'/preview/' + props.session.id + '?n=' + props.nonce +
-			(props.selecting ? '&select=1' : '') +
-		(props.activeModule ? '&module=' + props.activeModule : '');
-	const shown =
-		props.activeModule
-			? props.diffs.filter((diff) => diff.module === props.activeModule)
-			: props.diffs;
-	const specModule = props.activeModule || props.session.modules[0]!.directory;
-	const sessionId = props.session.id;
-
-	useEffect(() => {
-		const onKey = (event: KeyboardEvent) => {
-			if (event.key === 'Escape') props.onClose();
-		};
-		window.addEventListener('keydown', onKey);
-		return () => window.removeEventListener('keydown', onKey);
-	}, []);
-
-	<div class="workbench" role="dialog" aria-modal="true">
-		<div class="workbench__panel">
-			<header class="workbench__head">
-				<Button
-					size="sm"
-					variant={props.mode === 'preview' ? 'primary' : 'secondary'}
-					onClick={() => props.onMode('preview')}
-				>{t('sandbox.work.preview')}</Button>
-				<Button
-					size="sm"
-					variant={props.mode === 'diff' ? 'primary' : 'secondary'}
-					onClick={() => props.onMode('diff')}
-				>{t('sandbox.session.changes', { count: shown.length })}</Button>
-				<Button
-					size="sm"
-					variant={props.mode === 'spec' ? 'primary' : 'secondary'}
-					onClick={() => props.onMode('spec')}
-				>{t('sandbox.workbench.specification')}</Button>
-				<span class="ui-mono">
-					{props.session.modules.length === 1
-						? props.session.moduleId
-						: t('sandbox.session.modules', {
-								count: props.session.modules.length,
-							})}
-				</span>
-				@if (props.session.modules.length > 1) {
-					<select
-						class="chat__picker"
-						aria-label={t('sandbox.workbench.module')}
-						value={props.mode === 'spec' ? specModule : props.activeModule}
-						onChange={(event) => props.onModule(event.currentTarget.value)}
-					>
-						@if (props.mode !== 'spec') {
-							<option value="">{t('sandbox.session.module.all')}</option>
-						}
-						@for (const module of props.session.modules; key module.id) {
-							<option value={module.directory}>{module.id}</option>
-						}
-					</select>
-				}
-				<span class="sandbox__spacer"></span>
-				@if (props.mode === 'preview') {
-					<>
-						<select
-							class="ui-select"
-							value={props.previewData}
-							onChange={(event) => props.onPreviewData(
-								event.currentTarget.value === 'bridge' ? 'bridge' : 'fixtures',
-							)}
-						>
-							<option value="fixtures">{t('sandbox.work.fixtures')}</option>
-							<option value="bridge">{t('sandbox.workbench.liveData')}</option>
-						</select>
-						<Button
-							size="sm"
-							variant={props.selecting ? 'primary' : 'secondary'}
-							onClick={props.onToggleSelect}
-						>
-							<Icon name="filter" size={14} />
-							{props.selecting
-								? t('sandbox.workbench.selecting')
-								: t('sandbox.workbench.selectElement')}
-						</Button>
-						<Button size="sm" onClick={props.onReload}>
-							<Icon name="refresh" size={14} />
-							{t('sandbox.workbench.reload')}
-						</Button>
-					</>
-				}
-				<Button size="sm" variant="ghost" onClick={props.onClose}>
-					<Icon name="x" size={14} />
-					{t('sandbox.common.close')}
-				</Button>
-			</header>
-			@if (props.mode === 'preview') {
-				<div
-					class={[
-						'workbench__body',
-						props.selecting && 'preview-frame__wrap--selecting',
-					]}
-				>
-					<iframe
-						class="preview-frame"
-						src={source}
-						title={t('sandbox.work.previewTitle')}
-					></iframe>
-				</div>
-			} @else if (props.mode === 'spec') {
-				<div class="workbench__body workbench__body--scroll">
-					<SpecEditor
-						key={sessionId + '/' + specModule}
-						sessionId={sessionId}
-						module={specModule}
-						onSaved={props.onSpecSaved}
-					/>
-				</div>
-			} @else {
-				<div class="workbench__body workbench__body--scroll">
-					<DiffPane
-						diffs={props.diffs}
-						activeModule={props.activeModule}
-						onAsk={props.onAskAbout}
-					/>
-				</div>
-			}
-		</div>
-	</div>
-}