@happyvertical/smrt-planner 0.0.0-stage → 0.0.2

package/dist/components/ChildRecords.svelte

@@ -0,0 +1,331 @@
+<script lang="ts">
+import { FieldLabel } from '@happyvertical/smrt-ui/forms';
+import { tick } from 'svelte';
+import { getModelByQualifiedName } from '../catalog/index.js';
+import type { CatalogField, CatalogModel } from '../catalog/types.js';
+import {
+  blankChild,
+  cellValue,
+  errorSummary,
+  listColumns,
+  missingRequired,
+  recordTitle,
+  rowsOf,
+} from '../data/columns.js';
+import { useDataSource } from '../data/context.js';
+import {
+  derivedFieldNames,
+  isLineModel,
+  isProductField,
+  lineAmounts,
+  productPrefill,
+} from '../data/derived.js';
+import type { ModelRecord } from '../data/fakes.js';
+import { formatValue } from '../data/format.js';
+import { relationLabels, shortId } from '../data/labels.js';
+import { focusFirstInvalid } from '../fields/invalid.js';
+import type { ViewField } from '../recipes/policy.js';
+import FieldInput from './FieldInput.svelte';
+
+interface ChildRecordsProps {
+  model: CatalogModel;
+  fields: ViewField[];
+  /** The child's field that holds the parent's id; preset and never shown. */
+  fk: string;
+  parentId: string;
+  title: string;
+  /** Called after a row is added, changed or removed (the parent's totals moved). */
+  onchanged?: () => void;
+}
+
+let {
+  model,
+  fields: allFields,
+  fk,
+  parentId,
+  title,
+  onchanged,
+}: ChildRecordsProps = $props();
+
+const source = useDataSource();
+// The product comes first on a line item: picking it fills in the rest.
+const fields = $derived(
+  [...allFields.filter((f) => f.name !== fk)].sort(
+    (a, b) =>
+      Number(isLine && isProductField(b)) - Number(isLine && isProductField(a)),
+  ),
+);
+const isLine = $derived(isLineModel(model));
+const columns = $derived(listColumns(fields));
+const calculated = $derived(derivedFieldNames(model, false));
+/** The line's amount as it will be saved, live as quantity and price change. */
+const derivedPreview = (name: string): unknown =>
+  name === 'amount' ? lineAmounts(draft).amount : draft[name];
+let errors = $state<Record<string, string>>({});
+const summary = $derived(errorSummary(fields, errors));
+
+let rows = $state<ModelRecord[]>([]);
+let labels = $state(new Map<string, string>());
+let loaded = $state(false);
+/** `null` closed, `'new'` adding, otherwise the id being edited. */
+let editing = $state<string | 'new' | null>(null);
+let draft = $state<Record<string, unknown>>({});
+let formKey = $state(0);
+
+async function load() {
+  const listed = rowsOf(await source.list(model), fk, parentId);
+  labels = await relationLabels(source, fields, listed);
+  rows = listed;
+  loaded = true;
+}
+
+$effect(() => {
+  // Reload when the parent record (or the child model) changes.
+  model.id;
+  parentId;
+  editing = null;
+  loaded = false;
+  void load();
+});
+
+const nameOf = (row: ModelRecord) =>
+  recordTitle(model, fields, row, labels) || shortId(row.id);
+
+function startCreate() {
+  errors = {};
+  draft = blankChild(fields, fk, parentId);
+  editing = 'new';
+  formKey++;
+}
+
+function startEdit(row: ModelRecord) {
+  errors = {};
+  draft = { ...row };
+  editing = row.id;
+  formKey++;
+}
+
+/** A field changed; picking a product on a line fills description and price. */
+async function changed(field: CatalogField, value: unknown) {
+  draft[field.name] = value;
+  delete errors[field.name];
+  if (!isLine || !isProductField(field) || typeof value !== 'string') return;
+  const target = field.related && getModelByQualifiedName(field.related)?.model;
+  const product = target ? await source.get(target, value) : undefined;
+  Object.assign(draft, productPrefill(model, product));
+}
+
+async function save(event: SubmitEvent) {
+  event.preventDefault();
+  const form = event.currentTarget;
+  errors = missingRequired(fields, draft, calculated);
+  if (Object.keys(errors).length > 0) {
+    await tick();
+    focusFirstInvalid(form);
+    return;
+  }
+  const values: Record<string, unknown> = {};
+  for (const field of fields) {
+    if (!calculated.has(field.name)) values[field.name] = draft[field.name];
+  }
+  values[fk] = parentId;
+  if (editing === 'new') await source.create(model, values);
+  else if (editing) await source.update(model, editing, values);
+  editing = null;
+  await load();
+  onchanged?.();
+}
+
+async function remove(row: ModelRecord) {
+  await source.delete(model, row.id);
+  await load();
+  onchanged?.();
+}
+</script>
+
+<section class="children" data-child-model={model.name}>
+  <header>
+    <h3>{title} <small>{rows.length}</small></h3>
+    <button type="button" class="secondary" onclick={startCreate}>
+      Add {title.toLowerCase().replace(/s$/, '')}
+    </button>
+  </header>
+
+  {#if editing}
+    {#key formKey}
+      <form onsubmit={save} novalidate>
+        {#each fields as field (field.name)}
+          {#if calculated.has(field.name)}
+            <div class="derived">
+              <FieldLabel label={field.label} />
+              <output data-derived={field.name}>
+                {formatValue(field, derivedPreview(field.name), labels)}
+              </output>
+              <small>Calculated from quantity, price, discount and tax.</small>
+            </div>
+          {:else}
+            <FieldInput
+              {field}
+            error={errors[field.name]}
+              modelId={model.id}
+              label={field.label}
+              help={field.help}
+              value={draft[field.name]}
+              onchange={(value) => changed(field, value)}
+            />
+          {/if}
+        {/each}
+        {#if summary}
+          <p class="error" role="alert" data-error-summary>{summary}</p>
+        {/if}
+        <div class="actions">
+          <button type="submit">Save</button>
+          <button type="button" class="secondary" onclick={() => (editing = null)}>
+            Cancel
+          </button>
+        </div>
+      </form>
+    {/key}
+  {/if}
+
+  {#if !loaded}
+    <p>Loading...</p>
+  {:else if rows.length === 0}
+    <p class="empty">None yet.</p>
+  {:else}
+    <div class="scroll">
+      <table>
+        <thead>
+          <tr>
+            {#each columns as column (column.name)}
+              <th>{column.label}</th>
+            {/each}
+            <th><span class="visually-hidden">Actions</span></th>
+          </tr>
+        </thead>
+        <tbody>
+          {#each rows as row (row.id)}
+            <tr>
+              {#each columns as column (column.name)}
+                <td>{formatValue(column, cellValue(column, row), labels)}</td>
+              {/each}
+              <td class="row-actions">
+                <button
+                  type="button"
+                  class="secondary"
+                  aria-label={`Edit ${nameOf(row)}`}
+                  onclick={() => startEdit(row)}
+                >
+                  Edit
+                </button>
+                <button
+                  type="button"
+                  class="secondary"
+                  aria-label={`Delete ${nameOf(row)}`}
+                  onclick={() => remove(row)}
+                >
+                  Delete
+                </button>
+              </td>
+            </tr>
+          {/each}
+        </tbody>
+      </table>
+    </div>
+  {/if}
+</section>
+
+<style>
+  .children {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+    padding: var(--smrt-spacing-3) var(--smrt-spacing-4);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-large);
+  }
+
+  header {
+    display: flex;
+    gap: var(--smrt-spacing-3);
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  h3 {
+    margin: 0;
+    font-size: 1rem;
+  }
+
+  small,
+  .empty {
+    color: var(--smrt-color-on-surface-variant);
+    font-weight: 400;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  form {
+    display: grid;
+    gap: var(--smrt-spacing-2);
+  }
+
+  .error {
+    margin: 0;
+    color: var(--smrt-color-error);
+  }
+
+  .derived {
+    display: grid;
+    gap: var(--smrt-spacing-1);
+  }
+
+  .actions,
+  .row-actions {
+    display: flex;
+    gap: var(--smrt-spacing-2);
+  }
+
+  .scroll {
+    overflow-x: auto;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.875rem;
+  }
+
+  th,
+  td {
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-2);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    text-align: left;
+    white-space: nowrap;
+  }
+
+  button {
+    padding: var(--smrt-spacing-1) var(--smrt-spacing-3);
+    border: 0;
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-primary);
+    color: var(--smrt-color-on-primary);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  button.secondary {
+    border: 1px solid var(--smrt-color-outline);
+    background: transparent;
+    color: var(--smrt-color-on-surface);
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+</style>

package/dist/components/ChildRecords.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { CatalogModel } from '../catalog/types.ts';
+import type { ViewField } from '../recipes/policy.ts';
+interface ChildRecordsProps {
+    model: CatalogModel;
+    fields: ViewField[];
+    /** The child's field that holds the parent's id; preset and never shown. */
+    fk: string;
+    parentId: string;
+    title: string;
+    /** Called after a row is added, changed or removed (the parent's totals moved). */
+    onchanged?: () => void;
+}
+declare const ChildRecords: import("svelte").Component<ChildRecordsProps, {}, "">;
+type ChildRecords = ReturnType<typeof ChildRecords>;
+export default ChildRecords;

package/dist/components/ConnectTools.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+import { Disclosure } from '@happyvertical/smrt-ui/ui';
+import type { CatalogModel } from '../catalog/types.js';
+
+interface ConnectToolsProps {
+  /** Models to describe, with the app's narrowed surfaces already applied. */
+  models: CatalogModel[];
+}
+
+let { models }: ConnectToolsProps = $props();
+
+const exposed = $derived(models.filter((m) => m.exposed));
+</script>
+
+<section class="panel" aria-label="Connect other tools">
+<Disclosure title="Connect other tools">
+  <p class="lede">
+    For connecting other software or an AI assistant to this app. All of it is
+    generated by s-m-r-t from the model; none of it was written by hand.
+  </p>
+
+  {#each exposed as model (model.id)}
+    <article>
+      <h3>{model.name}</h3>
+      <div class="grid">
+        <div>
+          <h4>REST routes <span>{model.rest.length}</span></h4>
+          <ul>
+            {#each model.rest as route (route.method + route.path)}
+              <li><code><b>{route.method}</b> /api{route.path}</code></li>
+            {:else}
+              <li class="none">None</li>
+            {/each}
+          </ul>
+        </div>
+        <div>
+          <h4>MCP tools <span>{model.mcp.length}</span></h4>
+          <ul>
+            {#each model.mcp as tool (tool.name)}
+              <li><code>{tool.name}</code></li>
+            {:else}
+              <li class="none">None</li>
+            {/each}
+          </ul>
+        </div>
+        <div>
+          <h4>CLI commands <span>{model.cli.length}</span></h4>
+          <ul>
+            {#each model.cli as command (command.name)}
+              <li><code>{command.name}</code></li>
+            {:else}
+              <li class="none">None</li>
+            {/each}
+          </ul>
+        </div>
+        <div>
+          <h4>
+            Methods <span>{model.methods.filter((m) => m.aiCallable).length}</span>
+            AI-callable
+          </h4>
+          <ul>
+            {#each model.methods as method (method.name)}
+              <li>
+                <code>{method.name}({method.parameters.join(', ')})</code>
+                {#if method.aiCallable}<mark>AI</mark>{/if}
+              </li>
+            {:else}
+              <li class="none">None</li>
+            {/each}
+          </ul>
+        </div>
+      </div>
+    </article>
+  {:else}
+    <p>This app exposes no generated REST, MCP or CLI surface.</p>
+  {/each}
+</Disclosure>
+</section>
+
+<style>
+  .panel {
+    display: grid;
+    gap: var(--smrt-spacing-4);
+  }
+
+  h3,
+  h4,
+  p {
+    margin: 0;
+  }
+
+  .lede {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  article {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+    padding: var(--smrt-spacing-4);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-large);
+  }
+
+  .grid {
+    display: grid;
+    gap: var(--smrt-spacing-4);
+    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
+  }
+
+  h4 {
+    font-size: 0.9rem;
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  h4 span {
+    padding: 0 var(--smrt-spacing-2);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-surface-variant);
+  }
+
+  ul {
+    display: grid;
+    gap: var(--smrt-spacing-1);
+    margin: var(--smrt-spacing-2) 0 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  code {
+    font-size: 0.85rem;
+    overflow-wrap: anywhere;
+  }
+
+  .none {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  mark {
+    padding: 0 var(--smrt-spacing-1);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-tertiary-container);
+    color: var(--smrt-color-on-tertiary-container);
+    font-size: 0.75rem;
+  }
+</style>

package/dist/components/ConnectTools.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { CatalogModel } from '../catalog/types.ts';
+interface ConnectToolsProps {
+    /** Models to describe, with the app's narrowed surfaces already applied. */
+    models: CatalogModel[];
+}
+declare const ConnectTools: import("svelte").Component<ConnectToolsProps, {}, "">;
+type ConnectTools = ReturnType<typeof ConnectTools>;
+export default ConnectTools;