@happyvertical/smrt-planner 0.0.0-stage → 0.0.2

package/dist/components/FeatureCard.svelte

@@ -0,0 +1,197 @@
+<script lang="ts">
+import { Badge, Disclosure } from '@happyvertical/smrt-ui';
+import { Switch } from '@happyvertical/smrt-ui/forms';
+import { type FeatureCard, optionList } from '../features/catalogue.js';
+
+interface Props {
+  card: FeatureCard;
+  on: boolean;
+  /** Names of the recipes that keep this one on; non-empty locks the switch. */
+  lockedBy: string[];
+  /** Names of the recipes switching it on would also add. */
+  alsoAdds: string[];
+  onchange: (on: boolean) => void;
+}
+
+const { card, on, lockedBy, alsoAdds, onchange }: Props = $props();
+
+const demo = $derived(card.demo);
+const why = $derived(
+  (demo?.reasons.length ?? 0) > 0 ||
+    card.ownMode !== undefined ||
+    card.packageNote !== undefined,
+);
+const secrets = $derived([
+  ...new Set(card.providers.flatMap((p) => p.secrets)),
+]);
+const id = $derived(`feature-${card.id}`);
+</script>
+
+<li class="card" class:selected={on}>
+  <div class="head">
+    <h3>{card.label}</h3>
+    {#if demo}
+      <Badge variant={demo.variant} size="sm" title={demo.meaning}>{demo.label}</Badge>
+    {/if}
+  </div>
+  <p class="summary" id={`${id}-summary`}>{card.summary}</p>
+  <p class="meta">
+    {#if demo}
+      {demo.meaning}
+    {:else}
+      Demo status not reported for this feature.
+    {/if}
+  </p>
+
+  <h4>You get</h4>
+  <ul class="plain" aria-label={`${card.label}: what you get`}>
+    {#each card.gets as item (`${item.kind}:${item.label}`)}
+      <li>
+        <span class="kind">{item.kindLabel}</span>
+        {item.label}{#if item.where}<span class="meta where">({item.where})</span>{/if}
+      </li>
+    {/each}
+  </ul>
+
+  {#if card.providers.length}
+    <h4>Needs</h4>
+    <ul class="plain" aria-label={`${card.label}: providers`}>
+      {#each card.providers as provider (provider.id)}
+        <li>
+          <span class="kind">{provider.kindLabel}</span>
+          {provider.required ? 'Required' : 'Optional'}: {optionList(provider.options)}.
+          {#if provider.browserOptions.length}
+            <span class="meta">
+              {optionList(provider.browserOptions, 'and')}
+              {provider.browserOptions.length === 1 ? 'runs' : 'run'} in the
+              browser with no key.
+            </span>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+    {#if secrets.length}
+      <p class="meta">
+        Secrets (names only):
+        {#each secrets as name, index (name)}<code>{name}</code>{index < secrets.length - 1 ? ', ' : ''}{/each}
+      </p>
+    {/if}
+  {/if}
+
+  {#if !on && alsoAdds.length}
+    <p class="meta">Also adds {alsoAdds.join(', ')}.</p>
+  {/if}
+
+  {#if why}
+    <Disclosure title={demo ? `Why ${demo.label}?` : 'Details'}>
+      {#if demo?.reasons.length}
+        <ul class="plain reasons" aria-label={`${card.label}: reasons`}>
+          {#each demo.reasons as reason (reason)}<li>{reason}</li>{/each}
+        </ul>
+      {/if}
+      {#if card.ownMode && demo}
+        <p class="meta">On its own it would be {card.ownMode}; what it needs sets {demo.label}.</p>
+      {/if}
+      {#if card.packageNote}<p class="meta">{card.packageNote}</p>{/if}
+    </Disclosure>
+  {/if}
+
+  <div class="foot">
+    <Switch
+      label={card.label}
+      checked={on}
+      disabled={lockedBy.length > 0}
+      aria-describedby={`${id}-summary${lockedBy.length ? ` ${id}-locked` : ''}`}
+      onchange={(event) => onchange(event.currentTarget.checked)}
+    />
+    {#if lockedBy.length}
+      <p class="meta" id={`${id}-locked`}>Stays on while {lockedBy.join(', ')} needs it.</p>
+    {/if}
+  </div>
+</li>
+
+<style>
+  h3,
+  h4,
+  p {
+    margin: 0;
+  }
+
+  .card {
+    display: grid;
+    align-content: start;
+    gap: var(--smrt-spacing-2);
+    padding: var(--smrt-spacing-4);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-large);
+  }
+
+  .card.selected {
+    border-color: var(--smrt-color-primary);
+  }
+
+  .head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-2);
+  }
+
+  h3 {
+    font-size: var(--smrt-font-size-title-medium, 1rem);
+  }
+
+  h4 {
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-font-size-label-medium, 0.75rem);
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+  }
+
+  .meta {
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-font-size-body-small, 0.8125rem);
+  }
+
+  .plain {
+    display: grid;
+    gap: var(--smrt-spacing-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    font-size: var(--smrt-font-size-body-medium, 0.875rem);
+  }
+
+  .kind {
+    margin-inline-end: var(--smrt-spacing-1);
+    padding: 0 var(--smrt-spacing-2);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-large);
+    color: var(--smrt-color-on-surface-variant);
+    font-size: var(--smrt-font-size-label-small, 0.6875rem);
+  }
+
+  .reasons {
+    margin-block-end: var(--smrt-spacing-2);
+  }
+
+  .foot {
+    display: grid;
+    gap: var(--smrt-spacing-1);
+    margin-top: var(--smrt-spacing-2);
+  }
+
+  code {
+    font-family: var(--smrt-font-family-mono, ui-monospace, monospace);
+    font-size: 0.85em;
+  }
+
+  .where {
+    margin-inline-start: 0.35em;
+  }
+
+  .summary {
+    font-size: var(--smrt-font-size-body-medium, 0.875rem);
+  }
+</style>

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

@@ -0,0 +1,13 @@
+import { type FeatureCard } from '../features/catalogue.ts';
+interface Props {
+    card: FeatureCard;
+    on: boolean;
+    /** Names of the recipes that keep this one on; non-empty locks the switch. */
+    lockedBy: string[];
+    /** Names of the recipes switching it on would also add. */
+    alsoAdds: string[];
+    onchange: (on: boolean) => void;
+}
+declare const FeatureCard: import("svelte").Component<Props, {}, "">;
+type FeatureCard = ReturnType<typeof FeatureCard>;
+export default FeatureCard;

package/dist/components/FeaturesPanel.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+import { Disclosure } from '@happyvertical/smrt-ui';
+import { SearchInput, ToggleButton } from '@happyvertical/smrt-ui/forms';
+import { catalog } from '../catalog/index.js';
+import {
+  alsoAdds,
+  buildFeatureCards,
+  cardsByGroup,
+  featureGroups,
+  filterFeatureCards,
+} from '../features/catalogue.js';
+import { recipes, recipesById } from '../recipes/index.js';
+import { removalBlockers } from '../recipes/resolve.js';
+import { recipeState } from '../recipes/state.svelte.js';
+import FeatureCard from './FeatureCard.svelte';
+import RecordFeatures from './RecordFeatures.svelte';
+
+const all = buildFeatureCards(recipes, catalog.packages);
+const groups = featureGroups(all);
+
+let query = $state('');
+let groupId = $state<string | null>(null);
+let notice = $state('');
+
+const results = $derived(filterFeatureCards(all, query, groupId));
+const sections = $derived(cardsByGroup(results));
+
+const label = (id: string) => recipesById.get(id)?.label ?? id;
+
+// Switching never navigates: the feature joins the cookbook whenever the
+// visitor likes, with what it requires, and the status line says what changed.
+function toggle(id: string, on: boolean) {
+  const before = new Set(recipeState.ids);
+  if (on) recipeState.add(id);
+  else recipeState.remove(id);
+  const after = new Set(recipeState.ids);
+  const added = recipeState.ids.filter((other) => !before.has(other));
+  const removed = [...before].filter((other) => !after.has(other));
+  const parts: string[] = [];
+  if (added.length) parts.push(`Added ${added.map(label).join(', ')}.`);
+  if (removed.length) parts.push(`Removed ${removed.map(label).join(', ')}.`);
+  notice = parts.join(' ');
+}
+</script>
+
+<div class="features">
+  <p class="meta">
+    Everything s-m-r-t can add to your app. Switch a feature on to add it, with
+    what it needs, to your cookbook. Each label says how far it runs in this
+    browser-only demo; menu entries appear in the sidebar, while widgets, pages
+    and panels are listed for the real app and are not mounted here.
+  </p>
+
+  <SearchInput
+    value={query}
+    onsearch={(next) => {
+      query = next;
+    }}
+    label="Search features"
+    placeholder="Search features"
+    debounceMs={0}
+  />
+
+  {#if groups.length > 1}
+    <div class="chips" role="group" aria-label="Browse by group">
+      <ToggleButton pressed={groupId === null} onclick={() => (groupId = null)}>
+        All
+      </ToggleButton>
+      {#each groups as group (group.id)}
+        <ToggleButton
+          pressed={groupId === group.id}
+          onclick={() => (groupId = groupId === group.id ? null : group.id)}
+        >
+          {group.label}
+        </ToggleButton>
+      {/each}
+    </div>
+  {/if}
+
+  <p class="count" aria-live="polite">
+    {results.length} {results.length === 1 ? 'feature' : 'features'}
+  </p>
+
+  {#each sections as section (section.group.id)}
+    <section aria-labelledby={`group-${section.group.id}`}>
+      <h2 id={`group-${section.group.id}`}>{section.group.label}</h2>
+      {#if section.group.summary}
+        <p class="meta">{section.group.summary}</p>
+      {/if}
+      <ul class="cards" aria-label={`${section.group.label} features`}>
+        {#each section.cards as card (card.id)}
+          <FeatureCard
+            {card}
+            on={recipeState.has(card.id)}
+            lockedBy={removalBlockers([card.id], recipeState.ids, recipesById).map(label)}
+            alsoAdds={alsoAdds(card.id, recipeState.ids, recipesById).map(label)}
+            onchange={(on) => toggle(card.id, on)}
+          />
+        {/each}
+      </ul>
+    </section>
+  {:else}
+    <p class="meta">No features match "{query}".</p>
+  {/each}
+  <p class="notice meta" role="status" aria-live="polite">{notice}</p>
+
+  <Disclosure title="Single records">
+    <RecordFeatures />
+  </Disclosure>
+</div>
+
+<style>
+  .features {
+    display: grid;
+    gap: var(--smrt-spacing-3);
+  }
+
+  h2,
+  p {
+    margin: 0;
+  }
+
+  section {
+    display: grid;
+    gap: var(--smrt-spacing-2);
+  }
+
+  .meta,
+  .count {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .count {
+    font-size: var(--smrt-font-size-body-medium, 0.875rem);
+  }
+
+  .notice:empty {
+    display: none;
+  }
+
+  .chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--smrt-spacing-2);
+  }
+
+  .cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
+    gap: var(--smrt-spacing-3);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+</style>

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

@@ -0,0 +1,3 @@
+declare const FeaturesPanel: import("svelte").Component<Record<string, never>, {}, "">;
+type FeaturesPanel = ReturnType<typeof FeaturesPanel>;
+export default FeaturesPanel;

package/dist/components/FieldInput.svelte

@@ -0,0 +1,307 @@
+<script lang="ts">
+import {
+  AddressInput,
+  DateTimeInput,
+  MoneyInput,
+  NumberInput,
+  PhoneInput,
+  SelectInput,
+  TextareaInput,
+  TextInput,
+} from '@happyvertical/smrt-svelte/forms';
+import {
+  CurrencySelect,
+  FieldLabel,
+  Switch,
+} from '@happyvertical/smrt-ui/forms';
+import type { CatalogField } from '../catalog/types.js';
+import { enumLabel, humanize } from '../data/format.js';
+import { fromAddressInput, toAddressInput } from '../fields/address.js';
+import { fractionToPercent, percentToFraction } from '../fields/percent.js';
+import { chooseRenderer } from '../fields/renderer.js';
+import RelationField from './RelationField.svelte';
+
+interface FieldInputProps {
+  field: CatalogField;
+  /** The stored value (money is integer minor units). */
+  value: unknown;
+  onchange: (value: unknown) => void;
+  /** Qualified name of the model that owns the field (for per-model hints). */
+  modelId?: string;
+  /** Policy label; defaults to the humanized field name. */
+  label?: string;
+  /** Policy help text, shown under the control. */
+  help?: string;
+  /** Keeps element ids unique when several inputs for one field share a page. */
+  idPrefix?: string;
+  /** Drop the required marker, e.g. for a field's default value control. */
+  hideRequired?: boolean;
+  /** Let a relation selector offer "New ..." (off for a default-value control). */
+  creatable?: boolean;
+  /** Why the value is not acceptable; shown beside the field until it changes. */
+  error?: string;
+}
+
+let {
+  field,
+  value,
+  onchange,
+  modelId,
+  label: labelOverride,
+  help,
+  idPrefix = 'field',
+  hideRequired = false,
+  creatable = true,
+  error,
+}: FieldInputProps = $props();
+
+const renderer = $derived(chooseRenderer(field, modelId));
+const label = $derived(labelOverride ?? humanize(field.name));
+const id = $derived(`${idPrefix}-${field.name}`);
+const required = $derived(field.required && !hideRequired);
+const text = $derived(
+  value === null || value === undefined
+    ? ''
+    : typeof value === 'object'
+      ? JSON.stringify(value)
+      : String(value),
+);
+// An optional enum can be cleared again, as the native select it replaces could.
+// An enum that already lists '' (Invoice.collectionMethod) supplies that choice.
+const enumOptions = $derived([
+  ...(required || (field.enum ?? []).includes('')
+    ? []
+    : [{ value: '', label: '(none)' }]),
+  ...(field.enum ?? []).map((option) => ({
+    value: option,
+    label: option === '' ? '(none)' : enumLabel(option),
+  })),
+]);
+
+function numberFrom(raw: string): number | null {
+  if (raw.trim() === '') return null;
+  const parsed = Number(raw);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+function jsonFrom(raw: string): unknown {
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return raw;
+  }
+}
+
+/** A stored ISO timestamp as the date the picker shows. */
+const dateOf = (stored: string): string => stored.slice(0, 10);
+</script>
+
+<div class="field" data-invalid={error ? '' : undefined}>
+  {#if renderer === 'boolean'}
+    <Switch
+      checked={value === true}
+      onchange={(event) => onchange(event.currentTarget.checked)}
+      {label}
+    />
+  {:else if renderer === 'relation'}
+    <RelationField
+      {field}
+      {value}
+      {onchange}
+      {label}
+      name={id}
+      {required}
+      {creatable}
+    />
+  {:else if renderer === 'enum'}
+    <SelectInput
+      name={id}
+      {label}
+      {required}
+      options={enumOptions}
+      value={text}
+      onchange={(next) => onchange(next)}
+    />
+  {:else if renderer === 'textarea'}
+    <TextareaInput
+      name={id}
+      {label}
+      {required}
+      rows={4}
+      value={text}
+      onchange={(next) => onchange(next)}
+    />
+  {:else if renderer === 'email'}
+    <TextInput
+      name={id}
+      {label}
+      {required}
+      type="email"
+      value={text}
+      onchange={(next) => onchange(next)}
+    />
+  {:else if renderer === 'phone'}
+    <PhoneInput
+      name={id}
+      {label}
+      {required}
+      value={text}
+      onchange={(next) => onchange(next)}
+    />
+  {:else if renderer === 'money'}
+    <MoneyInput
+      name={id}
+      {label}
+      {required}
+      currency="USD"
+      min={0}
+      value={typeof value === 'number' ? value : null}
+      onchange={(cents) => onchange(cents)}
+    />
+  {:else if renderer === 'percent'}
+    <!-- Typed as a percentage (5), stored as the fraction the model expects (0.05). -->
+    <div class="percent">
+      <NumberInput
+        name={id}
+        {label}
+        {required}
+        min={0}
+        step={0.01}
+        value={fractionToPercent(value)}
+        onchange={(percent) => onchange(percentToFraction(percent))}
+      />
+      <span class="percent-sign" aria-hidden="true">%</span>
+    </div>
+  {:else if renderer === 'datetime'}
+    <DateTimeInput
+      name={id}
+      {label}
+      {required}
+      includeTime={false}
+      value={dateOf(text)}
+      onchange={(date) =>
+        onchange(date ? new Date(`${date}T00:00:00Z`).toISOString() : '')}
+    />
+  {:else if renderer === 'address'}
+    <AddressInput
+      name={id}
+      {label}
+      {required}
+      value={toAddressInput(value)}
+      onchange={(edited) => onchange(fromAddressInput(edited, value))}
+    />
+  {:else}
+    <FieldLabel for={id} {label} {required} />
+    {#if renderer === 'currency'}
+      <!-- ISO 4217 codes; the stored value is the code itself. -->
+      <CurrencySelect
+        {id}
+        {required}
+        value={text}
+        onchange={(event) => onchange(event.currentTarget.value)}
+      />
+    {:else if renderer === 'url'}
+      <input
+        {id}
+        type="url"
+        {required}
+        value={text}
+        oninput={(event) => onchange(event.currentTarget.value)}
+      />
+    {:else if renderer === 'integer'}
+      <input
+        {id}
+        type="number"
+        onfocus={(event) => event.currentTarget.select()}
+        step="1"
+        {required}
+        value={text}
+        oninput={(event) => {
+          const parsed = numberFrom(event.currentTarget.value);
+          onchange(parsed === null ? null : Math.trunc(parsed));
+        }}
+      />
+    {:else if renderer === 'decimal'}
+      <input
+        {id}
+        type="number"
+        onfocus={(event) => event.currentTarget.select()}
+        step="any"
+        {required}
+        value={text}
+        oninput={(event) => onchange(numberFrom(event.currentTarget.value))}
+      />
+    {:else if renderer === 'json'}
+      <textarea
+        {id}
+        rows="3"
+        value={text}
+        oninput={(event) => onchange(jsonFrom(event.currentTarget.value))}
+      ></textarea>
+    {:else}
+      <input
+        {id}
+        type="text"
+        {required}
+        value={text}
+        oninput={(event) => onchange(event.currentTarget.value)}
+      />
+    {/if}
+  {/if}
+  {#if error}
+    <p class="field-error" id={`${id}-error`} role="alert">{error}</p>
+  {/if}
+  {#if help}
+    <small>{help}</small>
+  {/if}
+</div>
+
+<style>
+  .field {
+    display: grid;
+    gap: var(--smrt-spacing-1);
+  }
+
+  .percent {
+    display: flex;
+    align-items: flex-end;
+    gap: var(--smrt-spacing-2);
+  }
+
+  .percent :global(.smrt-number) {
+    flex: 1;
+  }
+
+  .percent-sign {
+    padding-bottom: var(--smrt-spacing-2);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .field-error {
+    margin: 0;
+    color: var(--smrt-color-error);
+  }
+
+  .field[data-invalid] :global(input),
+  .field[data-invalid] :global(select),
+  .field[data-invalid] :global(textarea) {
+    border-color: var(--smrt-color-error);
+  }
+
+  small {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+
+  input[type='text'],
+  input[type='number'],
+  input[type='url'],
+  textarea {
+    padding: var(--smrt-spacing-2) var(--smrt-spacing-3);
+    border: 1px solid var(--smrt-color-outline);
+    border-radius: var(--smrt-radius-medium);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
+    font: inherit;
+  }
+</style>

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

@@ -0,0 +1,24 @@
+import type { CatalogField } from '../catalog/types.ts';
+interface FieldInputProps {
+    field: CatalogField;
+    /** The stored value (money is integer minor units). */
+    value: unknown;
+    onchange: (value: unknown) => void;
+    /** Qualified name of the model that owns the field (for per-model hints). */
+    modelId?: string;
+    /** Policy label; defaults to the humanized field name. */
+    label?: string;
+    /** Policy help text, shown under the control. */
+    help?: string;
+    /** Keeps element ids unique when several inputs for one field share a page. */
+    idPrefix?: string;
+    /** Drop the required marker, e.g. for a field's default value control. */
+    hideRequired?: boolean;
+    /** Let a relation selector offer "New ..." (off for a default-value control). */
+    creatable?: boolean;
+    /** Why the value is not acceptable; shown beside the field until it changes. */
+    error?: string;
+}
+declare const FieldInput: import("svelte").Component<FieldInputProps, {}, "">;
+type FieldInput = ReturnType<typeof FieldInput>;
+export default FieldInput;