@happyvertical/smrt-svelte 0.55.6 → 0.55.8

package/dist/components/screens/ListScreen.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+/**
+ * ListScreen - a searchable, sortable, paged table for any model, derived from
+ * its manifest definition and resolved field policy (#3718).
+ *
+ * Columns are the policy's basic-tier scalar fields in policy order (override
+ * with `columns`). Hidden fields, fields outside the policy, and long text /
+ * JSON / raw reference columns never appear by default. The screen is
+ * transport-neutral: the caller supplies `rows` and handles `onselect`,
+ * `oncreate` and `onretry`.
+ */
+import { DataTable, type DataTableColumn } from '@happyvertical/smrt-ui/data';
+import { Alert } from '@happyvertical/smrt-ui/feedback';
+import { SearchInput } from '@happyvertical/smrt-ui/forms';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { EmptyState, PageHeader } from '@happyvertical/smrt-ui/layout';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import { M } from '../../i18n/strings.screens.js';
+import {
+  deriveScreenFields,
+  screenSourceError,
+  screenTitles,
+} from './fields.js';
+import type {
+  ListScreenProps,
+  ScreenCollectionDefinition,
+  ScreenPolicy,
+  ScreenRecord,
+} from './types.js';
+import { compareScreenValues, formatScreenValue } from './values.js';
+
+let {
+  definition,
+  policy = null,
+  rows,
+  title,
+  description,
+  columns,
+  maxColumns,
+  pageSize = 25,
+  searchable = true,
+  loading = false,
+  error = null,
+  currency,
+  locale,
+  showHeader = true,
+  onselect,
+  oncreate,
+  onretry,
+  extraActions,
+}: ListScreenProps = $props();
+
+const { t } = useI18n();
+
+const titles = $derived(screenTitles(definition));
+const heading = $derived(title ?? titles.plural);
+const sourceError = $derived(screenSourceError(definition, policy));
+const idField = $derived(definition.idField ?? 'id');
+
+const fields = $derived(
+  sourceError
+    ? []
+    : deriveScreenFields(definition, policy, {
+        mode: 'list',
+        include: columns,
+        maxListColumns: maxColumns,
+      }),
+);
+
+type DisplayRow = Record<string, unknown> & { __raw: ScreenRecord };
+
+const formatContext = $derived({
+  currency,
+  locale,
+  yes: t(M['ui.screens.yes']),
+  no: t(M['ui.screens.no']),
+});
+
+const displayRows = $derived<DisplayRow[]>(
+  rows.map((row) => {
+    const display: DisplayRow = { __raw: row };
+    for (const field of fields) {
+      display[field.name] = formatScreenValue(
+        field,
+        row[field.name],
+        formatContext,
+      );
+    }
+    return display;
+  }),
+);
+
+const tableColumns = $derived<DataTableColumn<DisplayRow>[]>(
+  fields.map((field) => ({
+    id: field.name,
+    label: field.label,
+    accessor: field.name,
+    sortable: true,
+    align:
+      field.kind === 'integer' ||
+      field.kind === 'decimal' ||
+      field.kind === 'money'
+        ? ('right' as const)
+        : ('left' as const),
+    sortFn: (a, b, direction) =>
+      compareScreenValues(a.__raw[field.name], b.__raw[field.name], direction),
+  })),
+);
+
+let query = $state('');
+const needle = $derived(query.trim().toLowerCase());
+function matches(row: DisplayRow): boolean {
+  if (!needle) return true;
+  return fields.some((field) =>
+    String(row[field.name] ?? '')
+      .toLowerCase()
+      .includes(needle),
+  );
+}
+</script>
+
+{#if showHeader}
+  <PageHeader title={heading} subtitle={description}>
+    {#snippet actions()}
+      {#if extraActions}{@render extraActions()}{/if}
+      {#if oncreate}
+        <Button variant="primary" onclick={oncreate}>
+          {t(M['ui.screens.create_action'], { name: titles.singular.toLowerCase() })}
+        </Button>
+      {/if}
+    {/snippet}
+  </PageHeader>
+{/if}
+
+<section class="smrt-list-screen" aria-label={heading}>
+  {#if sourceError}
+    <Alert variant="error">{sourceError}</Alert>
+  {:else}
+    {#if searchable}
+      <div class="smrt-list-screen__search">
+        <SearchInput
+          value={query}
+          onsearch={(next) => {
+            query = next;
+          }}
+          label={t(M['ui.screens.search'], { name: heading.toLowerCase() })}
+          placeholder={t(M['ui.screens.search'], { name: heading.toLowerCase() })}
+        />
+      </div>
+    {/if}
+
+    <DataTable
+      data={displayRows}
+      columns={tableColumns}
+      rowKey={(row: DisplayRow) => String(row.__raw[idField])}
+      sortable
+      {pageSize}
+      {loading}
+      error={error ?? undefined}
+      onRetry={onretry}
+      filterFn={matches}
+      caption={heading}
+      phoneLayout="cards"
+      hoverable
+      onRowClick={onselect ? (row: DisplayRow) => onselect(row.__raw) : undefined}
+    >
+      {#snippet empty()}
+        <EmptyState
+          title={needle
+            ? t(M['ui.screens.empty_search'])
+            : t(M['ui.screens.empty_title'], { name: heading.toLowerCase() })}
+          actionLabel={!needle && oncreate
+            ? t(M['ui.screens.create_action'], { name: titles.singular.toLowerCase() })
+            : undefined}
+          onaction={!needle ? oncreate : undefined}
+        />
+      {/snippet}
+    </DataTable>
+  {/if}
+</section>
+
+<style>
+  .smrt-list-screen {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-md, 1rem);
+  }
+  .smrt-list-screen__search {
+    max-width: 24rem;
+  }
+</style>

package/dist/components/screens/ListScreen.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ListScreenProps } from './types.js';
+declare const ListScreen: import("svelte").Component<ListScreenProps, {}, "">;
+type ListScreen = ReturnType<typeof ListScreen>;
+export default ListScreen;
+//# sourceMappingURL=ListScreen.svelte.d.ts.map

package/dist/components/screens/ListScreen.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListScreen.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/screens/ListScreen.svelte.ts"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EACV,eAAe,EAIhB,MAAM,YAAY,CAAC;AAmJpB,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/screens/RecipeScreens.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">
+/**
+ * RecipeScreens - list, view, create and edit for any model, derived from its
+ * manifest definition and resolved field policy (#3718). It is the default
+ * screen set for a package that ships models but no consumer UI: tags, facts,
+ * secrets, profiles, reports, prompts and the like.
+ *
+ * It composes `ListScreen`, `DetailScreen` and `EditForm` over a
+ * transport-neutral `source` (list / get / create / update / delete). The
+ * `view` and `recordId` props are bindable so an app can mirror them into its
+ * router (`onnavigate` fires on every user navigation); left unbound, the
+ * component keeps its own state. An operation is offered only when the source
+ * implements it and `can` has not turned it off, so a read-only source yields
+ * a read-only screen set.
+ */
+import { Alert } from '@happyvertical/smrt-ui/feedback';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { Button } from '@happyvertical/smrt-ui/ui';
+import { untrack } from 'svelte';
+import { M } from '../../i18n/strings.screens.js';
+import DetailScreen from './DetailScreen.svelte';
+import EditForm from './EditForm.svelte';
+import { screenTitles } from './fields.js';
+import ListScreen from './ListScreen.svelte';
+import type {
+  RecipeScreensProps,
+  RecipeScreensSource,
+  RecipeScreenView,
+  ScreenCollectionDefinition,
+  ScreenPolicy,
+  ScreenRecord,
+} from './types.js';
+
+let {
+  definition,
+  policy = null,
+  source,
+  view = $bindable<RecipeScreenView>('list'),
+  recordId = $bindable<string | null>(null),
+  title,
+  columns,
+  fields,
+  currency,
+  locale,
+  can = {},
+  onnavigate,
+}: RecipeScreensProps = $props();
+
+const { t } = useI18n();
+
+const titles = $derived(screenTitles(definition));
+const idField = $derived(definition.idField ?? 'id');
+const allowCreate = $derived(can.create !== false && !!source.create);
+const allowUpdate = $derived(can.update !== false && !!source.update);
+const allowDelete = $derived(can.delete !== false && !!source.delete);
+
+let rows = $state<readonly ScreenRecord[]>([]);
+let loading = $state(true);
+let loadFailed = $state(false);
+let saving = $state(false);
+let deleting = $state(false);
+let fetched = $state<ScreenRecord | undefined>(undefined);
+let fetchSettled = $state(false);
+
+async function refresh(): Promise<void> {
+  loading = true;
+  loadFailed = false;
+  try {
+    rows = await source.list();
+  } catch {
+    loadFailed = true;
+  } finally {
+    loading = false;
+  }
+}
+
+$effect(() => {
+  // Reload whenever the source (or object) changes; mutations call refresh().
+  void source;
+  void definition.objectRef;
+  untrack(() => void refresh());
+});
+
+// Resolve the record for view / edit: `source.get` when provided, else the
+// loaded list. A token drops answers for a record the user already left.
+let fetchToken = 0;
+$effect(() => {
+  const id = recordId;
+  const wanted = view === 'view' || view === 'edit';
+  const get = source.get;
+  const token = ++fetchToken;
+  fetched = undefined;
+  fetchSettled = false;
+  if (!wanted || id === null || !get) return;
+  void get
+    .call(source, id)
+    .then((found) => {
+      if (token === fetchToken) fetched = found;
+    })
+    .catch(() => {
+      if (token === fetchToken) fetched = undefined;
+    })
+    .finally(() => {
+      if (token === fetchToken) fetchSettled = true;
+    });
+});
+
+const current = $derived<ScreenRecord | undefined>(
+  recordId === null
+    ? undefined
+    : (fetched ??
+        (source.get && !fetchSettled
+          ? undefined
+          : rows.find((row) => String(row[idField]) === recordId))),
+);
+const resolving = $derived(
+  (view === 'view' || view === 'edit') &&
+    recordId !== null &&
+    !current &&
+    (loading || (!!source.get && !fetchSettled)),
+);
+
+function navigate(next: RecipeScreenView, id: string | null = null): void {
+  view = next;
+  recordId = id;
+  onnavigate?.(next, id);
+}
+
+function idOf(record: ScreenRecord | undefined): string | null {
+  const value = record?.[idField];
+  return value === undefined || value === null ? null : String(value);
+}
+
+async function create(values: Record<string, unknown>): Promise<void> {
+  saving = true;
+  try {
+    const created = await source.create?.(values);
+    await refresh();
+    const id = idOf(created);
+    if (id) navigate('view', id);
+    else navigate('list');
+  } finally {
+    saving = false;
+  }
+}
+
+async function update(values: Record<string, unknown>): Promise<void> {
+  if (recordId === null) return;
+  saving = true;
+  try {
+    await source.update?.(recordId, values);
+    await refresh();
+    navigate('view', recordId);
+  } finally {
+    saving = false;
+  }
+}
+
+async function remove(): Promise<void> {
+  if (recordId === null) return;
+  deleting = true;
+  try {
+    await source.delete?.(recordId);
+    await refresh();
+    navigate('list');
+  } finally {
+    deleting = false;
+  }
+}
+</script>
+
+<div class="smrt-recipe-screens">
+  {#if view === 'create' && allowCreate}
+          <EditForm
+        {definition}
+        {policy}
+        {currency}
+        {fields}
+        submitting={saving}
+        onsubmit={create}
+        oncancel={() => navigate('list')}
+      />
+  {:else if (view === 'view' || view === 'edit') && recordId !== null}
+    {#if current}
+      {#if view === 'edit' && allowUpdate}
+        {#key recordId}
+          <EditForm
+            {definition}
+            {policy}
+            {currency}
+            {fields}
+            record={current}
+            submitting={saving}
+            onsubmit={update}
+            oncancel={() => navigate('view', recordId)}
+          />
+        {/key}
+      {:else}
+        <DetailScreen
+          {definition}
+          {policy}
+          {currency}
+          {locale}
+          {fields}
+          record={current}
+          {deleting}
+          onback={() => navigate('list')}
+          onedit={allowUpdate ? () => navigate('edit', recordId) : undefined}
+          ondelete={allowDelete ? remove : undefined}
+        />
+      {/if}
+    {:else if !resolving}
+      <Alert variant="warning">{t(M['ui.screens.not_found'])}</Alert>
+      <Button variant="ghost" onclick={() => navigate('list')}>
+        {t(M['ui.screens.back'], { name: titles.plural.toLowerCase() })}
+      </Button>
+    {/if}
+  {:else}
+    <ListScreen
+      {definition}
+      {policy}
+      {rows}
+      {title}
+      {columns}
+      {currency}
+      {locale}
+      {loading}
+      error={loadFailed ? t(M['ui.screens.load_failed']) : null}
+      onretry={() => void refresh()}
+      onselect={(row) => {
+        const id = idOf(row);
+        if (id) navigate('view', id);
+      }}
+      oncreate={allowCreate ? () => navigate('create') : undefined}
+    />
+  {/if}
+</div>

package/dist/components/screens/RecipeScreens.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { RecipeScreensProps } from './types.js';
+declare const RecipeScreens: import("svelte").Component<RecipeScreensProps, {}, "view" | "recordId">;
+type RecipeScreens = ReturnType<typeof RecipeScreens>;
+export default RecipeScreens;
+//# sourceMappingURL=RecipeScreens.svelte.d.ts.map

package/dist/components/screens/RecipeScreens.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RecipeScreens.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/screens/RecipeScreens.svelte.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EACV,kBAAkB,EAMnB,MAAM,YAAY,CAAC;AAqLpB,QAAA,MAAM,aAAa,yEAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/screens/fields.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Pure derivation of list / view / edit fields from a manifest-derived
+ * collection definition and its resolved field policy (#3718).
+ *
+ * Mirrors smrt-fields' `ObjectForm` selection rule: a field renders only when
+ * it is in BOTH the generated web definition and the resolved policy, so
+ * sensitive, transient and read-permission-gated fields (which the policy
+ * resolver omits) can never appear on a generated screen. Without a policy the
+ * code seed applies: the manifest `ui` hints and the cold-start rule (no
+ * `basic` markers anywhere => everything basic; any marker => unmarked fields
+ * advanced).
+ */
+import type { ScreenCollectionDefinition, ScreenField, ScreenFieldDefinition, ScreenInputKind, ScreenMode, ScreenPolicy } from './types.js';
+/** Columns shown by default on a list when the policy marks many basic. */
+export declare const DEFAULT_MAX_LIST_COLUMNS = 6;
+export interface DeriveScreenFieldsOptions {
+    mode: ScreenMode;
+    /**
+     * Explicit field names, in the order given. Hidden fields, fields outside
+     * the policy, and non-editable system fields are still dropped.
+     */
+    include?: readonly string[];
+    /** Field names to drop. */
+    exclude?: readonly string[];
+    /** List mode only: cap on default columns (`include` is never capped). */
+    maxListColumns?: number;
+}
+/** `dueDate` -> `Due date`; reference fields drop a trailing `Id`. */
+export declare function humanizeFieldName(name: string): string;
+/** Singular and plural display names derived from the class name. */
+export declare function screenTitles(definition: ScreenCollectionDefinition): {
+    singular: string;
+    plural: string;
+};
+/** Which control renders a field, from its widget hint and wire type. */
+export declare function inputKindFor(definition: ScreenFieldDefinition): ScreenInputKind;
+/**
+ * Mismatch between a definition and a policy, or `null` when they belong
+ * together. Components surface this instead of rendering the wrong object.
+ */
+export declare function screenSourceError(definition: ScreenCollectionDefinition, policy: ScreenPolicy | undefined | null): string | null;
+/**
+ * Select and decorate the fields one screen shows.
+ *
+ * - `edit`: basic and advanced tiers, system fields never.
+ * - `view`: basic and advanced tiers, then `createdAt`/`updatedAt` as
+ *   read-only advanced meta when the definition has them.
+ * - `list`: basic tier only, without long text, JSON or raw reference columns,
+ *   capped at {@link DEFAULT_MAX_LIST_COLUMNS}; `include` overrides all of it.
+ */
+export declare function deriveScreenFields(definition: ScreenCollectionDefinition, policy: ScreenPolicy | undefined | null, options: DeriveScreenFieldsOptions): ScreenField[];
+/** Group fields preserving first-seen group order; ungrouped is `null`. */
+export declare function groupScreenFields(fields: readonly ScreenField[]): Array<[string | null, ScreenField[]]>;
+//# sourceMappingURL=fields.d.ts.map

package/dist/components/screens/fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fields.d.ts","sourceRoot":"","sources":["../../../src/components/screens/fields.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,EACV,0BAA0B,EAC1B,WAAW,EACX,qBAAqB,EACrB,eAAe,EACf,UAAU,EACV,YAAY,EACb,MAAM,YAAY,CAAC;AAepB,2EAA2E;AAC3E,eAAO,MAAM,wBAAwB,IAAI,CAAC;AAE1C,MAAM,WAAW,yBAAyB;IACxC,IAAI,EAAE,UAAU,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,2BAA2B;IAC3B,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,0EAA0E;IAC1E,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,sEAAsE;AACtE,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAStD;AAaD,qEAAqE;AACrE,wBAAgB,YAAY,CAAC,UAAU,EAAE,0BAA0B,GAAG;IACpE,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB,CAWA;AAED,yEAAyE;AACzE,wBAAgB,YAAY,CAC1B,UAAU,EAAE,qBAAqB,GAChC,eAAe,CA0BjB;AAUD;;;GAGG;AACH,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,0BAA0B,EACtC,MAAM,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI,GACtC,MAAM,GAAG,IAAI,CAKf;AAiCD;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,UAAU,EAAE,0BAA0B,EACtC,MAAM,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI,EACvC,OAAO,EAAE,yBAAyB,GACjC,WAAW,EAAE,CA6Gf;AAED,2EAA2E;AAC3E,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE,SAAS,WAAW,EAAE,GAC7B,KAAK,CAAC,CAAC,MAAM,GAAG,IAAI,EAAE,WAAW,EAAE,CAAC,CAAC,CAQvC"}