@ankhorage/zora 25.8.16 → 25.8.18

package/src/features/uploader/application/use-cases/validateUploadAsset.test.ts

@@ -35,8 +35,8 @@ describe('validateUploadAsset', () => {
   });
 
   test('rejects assets above the configured size', () => {
-    expect(validateUploadAsset({ asset: IMAGE_ASSET, maxSizeBytes: 1_000 })).toContain(
-      'File is too large',
+    expect(validateUploadAsset({ asset: IMAGE_ASSET, maxSizeBytes: 1_000 })).toBe(
+      'File is too large (2 KB). Max 1000 B.',
     );
   });
 

package/src/features/uploader/application/use-cases/validateUploadAsset.ts

@@ -1,3 +1,5 @@
+import { formatBytes } from '@ankhorage/utility/number';
+
 import type { ValidateUploadAssetInput } from '../../../../types/upload';
 
 /*** Validates a picked upload asset against MIME, extension, size, and caller rules. */
@@ -89,23 +91,3 @@ function parseAccept(accept: string | undefined): readonly string[] {
     .map((token) => token.trim())
     .filter((token) => token.length > 0);
 }
-
-/*** Formats a byte count for concise upload validation feedback. */
-function formatBytes(value: number): string {
-  if (!Number.isFinite(value) || value <= 0) {
-    return '0 B';
-  }
-
-  const units = ['B', 'KB', 'MB', 'GB'] as const;
-  let size = value;
-  let unitIndex = 0;
-
-  while (size >= 1024 && unitIndex < units.length - 1) {
-    size /= 1024;
-    unitIndex += 1;
-  }
-
-  const unit = units.at(unitIndex) ?? 'B';
-  const rounded = unitIndex === 0 ? Math.round(size) : Math.round(size * 10) / 10;
-  return `${rounded} ${unit}`;
-}

package/src/features/web-component-artifact/composition/createWebDesiredStateWithNodeAsync.ts

@@ -1,9 +1,9 @@
 import { randomUUID } from 'node:crypto';
 import { readFile, rename, rm, writeFile } from 'node:fs/promises';
 import { dirname, join, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
 
 import { readWebDesiredStateWithNodeAsync } from '../adapters/outbound/node/readWebDesiredStateWithNodeAsync';
+import { readWebComponentPackageMetadataAsync } from './readWebComponentPackageMetadataAsync';
 import { synchronizeWebComponentArtifactsWithNodeAsync } from './synchronizeWebComponentArtifactsWithNodeAsync';
 
 /*** Add one requested web component and regenerate the complete declared set. */
@@ -13,10 +13,7 @@ export async function createWebDesiredStateWithNodeAsync(input: {
 }) {
   const desired = await readWebDesiredStateWithNodeAsync(input.projectRoot, true);
   const components = [...new Set([...desired.components, input.component])].sort();
-  const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../../..');
-  const packageJson = JSON.parse(await readFile(resolve(packageRoot, 'package.json'), 'utf8')) as {
-    readonly version: string;
-  };
+  const { packageRoot, packageVersion } = await readWebComponentPackageMetadataAsync();
   const desiredPath = resolve(input.projectRoot, 'zora.web.json');
   const previous = await readFile(desiredPath, 'utf8').catch((error: unknown) => {
     if (isMissingFile(error)) return undefined;
@@ -29,7 +26,7 @@ export async function createWebDesiredStateWithNodeAsync(input: {
       components,
       outputDirectory: resolve(input.projectRoot, '.ankh', 'zora', 'web'),
       packageRoot,
-      packageVersion: packageJson.version,
+      packageVersion,
     });
   } catch (error) {
     if (next !== previous) {

package/src/features/web-component-artifact/composition/readWebComponentPackageMetadataAsync.ts

@@ -0,0 +1,18 @@
+import { readFile } from 'node:fs/promises';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+/*** Reads the active ZORA package location and version for generated web artifacts. */
+export async function readWebComponentPackageMetadataAsync(): Promise<WebComponentPackageMetadata> {
+  const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../../..');
+  const packageJson = JSON.parse(await readFile(resolve(packageRoot, 'package.json'), 'utf8')) as {
+    readonly version: string;
+  };
+
+  return { packageRoot, packageVersion: packageJson.version };
+}
+
+interface WebComponentPackageMetadata {
+  readonly packageRoot: string;
+  readonly packageVersion: string;
+}

package/src/features/web-component-artifact/composition/synchronizeDeclaredWebComponentsWithNodeAsync.ts

@@ -1,21 +1,17 @@
-import { readFile } from 'node:fs/promises';
-import { dirname, resolve } from 'node:path';
-import { fileURLToPath } from 'node:url';
+import { resolve } from 'node:path';
 
 import { readWebDesiredStateWithNodeAsync } from '../adapters/outbound/node/readWebDesiredStateWithNodeAsync';
+import { readWebComponentPackageMetadataAsync } from './readWebComponentPackageMetadataAsync';
 import { synchronizeWebComponentArtifactsWithNodeAsync } from './synchronizeWebComponentArtifactsWithNodeAsync';
 
 /*** Load project desired state and sync it from the active ZORA package release. */
 export async function synchronizeDeclaredWebComponentsWithNodeAsync(projectRoot: string) {
   const desired = await readWebDesiredStateWithNodeAsync(projectRoot, false);
-  const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '../../../..');
-  const packageJson = JSON.parse(await readFile(resolve(packageRoot, 'package.json'), 'utf8')) as {
-    readonly version: string;
-  };
+  const { packageRoot, packageVersion } = await readWebComponentPackageMetadataAsync();
   return await synchronizeWebComponentArtifactsWithNodeAsync({
     components: desired.components,
     outputDirectory: resolve(projectRoot, '.ankh', 'zora', 'web'),
     packageRoot,
-    packageVersion: packageJson.version,
+    packageVersion,
   });
 }

package/src/webPackageExports.test.ts

@@ -0,0 +1,101 @@
+import { mkdtemp, rm, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+
+import { expect, test } from 'bun:test';
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+const forbiddenWebDependencies = [
+  'expo-document-picker',
+  'expo-image-picker',
+  '@gorhom/bottom-sheet',
+  'react-native-gesture-handler',
+] as const;
+
+/** Verifies that stable package web subpaths resolve only their requested UI graph. */
+test('publishes SSR-safe ordinary UI through canonical web subpaths', async () => {
+  const packageJson = (await Bun.file('package.json').json()) as {
+    readonly exports: Record<string, unknown>;
+  };
+  expect(packageJson.exports['./web/runtime']).toEqual({
+    types: './web-dist/runtime/ZoraProvider.d.ts',
+    import: './web-dist/runtime/ZoraProvider.js',
+    default: './web-dist/runtime/ZoraProvider.js',
+  });
+  expect(packageJson.exports['./web/*']).toEqual({
+    types: './web-dist/components/*/index.d.ts',
+    import: './web-dist/components/*/index.js',
+    default: './web-dist/components/*/index.js',
+  });
+
+  const temporaryDirectory = await mkdtemp(join(process.cwd(), '.cache-zora-web-entrypoints-'));
+  try {
+    const entrypoint = join(temporaryDirectory, 'dashboard.tsx');
+    await writeFile(
+      entrypoint,
+      [
+        "export { ZoraProvider } from '@ankhorage/zora/web/runtime';",
+        "export { AppBar } from '@ankhorage/zora/web/app-bar';",
+        "export { AppShell } from '@ankhorage/zora/web/app-shell';",
+        "export { Badge } from '@ankhorage/zora/web/badge';",
+        "export { Button } from '@ankhorage/zora/web/button';",
+        "export { Card } from '@ankhorage/zora/web/card';",
+        "export { DataTable } from '@ankhorage/zora/web/data-table';",
+        "export { Dialog } from '@ankhorage/zora/web/dialog';",
+        "export { MetricCard } from '@ankhorage/zora/web/metric-card';",
+        "export { PopoverMenu } from '@ankhorage/zora/web/popover-menu';",
+        "export { Select } from '@ankhorage/zora/web/select';",
+        "export { TextInput } from '@ankhorage/zora/web/text-input';",
+        "export { Text } from '@ankhorage/zora/web/text';",
+        "export { Heading } from '@ankhorage/zora/web/heading';",
+        "export { View } from '@ankhorage/zora/web/view';",
+        '',
+      ].join('\n'),
+      'utf8',
+    );
+
+    const build = await Bun.build({
+      entrypoints: [entrypoint],
+      target: 'browser',
+      format: 'esm',
+      external: ['react', 'react/*', 'react-dom', 'react-dom/*'],
+    });
+    expect(build.success).toBe(true);
+    const graph = (await Promise.all(build.outputs.map((output) => output.text()))).join('\n');
+    for (const dependency of forbiddenWebDependencies) {
+      expect(graph).not.toContain(dependency);
+    }
+  } finally {
+    await rm(temporaryDirectory, { force: true, recursive: true });
+  }
+});
+
+/** Renders the generated public web entrypoints without a native runtime host. */
+test('SSR-renders ordinary UI from its public web subpaths', async () => {
+  const [{ ZoraProvider }, { AppShell }, { Button }, { Screen }, { Text }] = await Promise.all([
+    import('@ankhorage/zora/web/runtime'),
+    import('@ankhorage/zora/web/app-shell'),
+    import('@ankhorage/zora/web/button'),
+    import('@ankhorage/zora/web/screen'),
+    import('@ankhorage/zora/web/text'),
+  ]);
+  const markup = renderToStaticMarkup(
+    React.createElement(
+      ZoraProvider,
+      { mode: 'light' },
+      React.createElement(
+        AppShell,
+        undefined,
+        React.createElement(
+          Screen,
+          undefined,
+          React.createElement(Text, undefined, 'Web entrypoint'),
+          React.createElement(Button, undefined, 'Continue'),
+        ),
+      ),
+    ),
+  );
+
+  expect(markup).toContain('Web entrypoint');
+  expect(markup).toContain('Continue');
+});

package/web-dist/chunks/{Accordion-rqr10gn4.js → Accordion-1495be5z.js}

@@ -18,7 +18,7 @@ import {
 import {
   Heading2,
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   resolveBadgeRecipe,
   Badge2
@@ -28,7 +28,7 @@ import {
 } from "./Accordion-1fsrnq73.js";
 import {
   Avatar2
-} from "./Accordion-tyh8jj9d.js";
+} from "./Accordion-cbbafww1.js";
 import {
   Button2
 } from "./Accordion-czcaf5x2.js";

package/web-dist/chunks/{Accordion-m2hcc8g4.js → Accordion-3qphhsb4.js}

@@ -13,7 +13,7 @@ import {
 } from "./Accordion-799z2zf6.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   applySelectionIntent
 } from "./Accordion-n4et7etk.js";

package/web-dist/chunks/{Accordion-gn8ptzwb.js → Accordion-4x8gdqqs.js}

@@ -10,7 +10,7 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 
 // src/features/form/field/adapters/inbound/Field.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/web-dist/chunks/{Accordion-9aczb0k2.js → Accordion-58bpmzdj.js}

@@ -10,10 +10,10 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   Avatar2
-} from "./Accordion-tyh8jj9d.js";
+} from "./Accordion-cbbafww1.js";
 import {
   Badge2
 } from "./Accordion-xgxxg1hz.js";

package/web-dist/chunks/{Accordion-2jy53kzk.js → Accordion-69c4pfz2.js}

@@ -7,7 +7,7 @@ import {
 } from "./Accordion-vj1m2wck.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   View3
 } from "./Accordion-z5a0tx18.js";
@@ -23,7 +23,7 @@ import {
 } from "./Accordion-wyxmd0n0.js";
 import {
   SectionHeader2
-} from "./Accordion-g08740h4.js";
+} from "./Accordion-c912kzs0.js";
 import {
   useZoraTheme2
 } from "./Accordion-srjya6dz.js";

package/web-dist/chunks/{Accordion-rqhh2m5b.js → Accordion-7n93d7fa.js}

@@ -21,7 +21,7 @@ import {
 import {
   Heading2,
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   useZoraTheme2
 } from "./Accordion-srjya6dz.js";

package/web-dist/chunks/{Accordion-m6mp8aea.js → Accordion-a42brn0p.js}

@@ -10,7 +10,7 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Card2
-} from "./Accordion-rqr10gn4.js";
+} from "./Accordion-1495be5z.js";
 
 // src/features/empty-state/adapters/inbound/EmptyState.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/web-dist/chunks/{Accordion-g08740h4.js → Accordion-c912kzs0.js}

@@ -8,7 +8,7 @@ import {
 import {
   Heading2,
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 
 // src/features/section/adapters/inbound/SectionHeader.tsx
 import { jsx, jsxs } from "react/jsx-runtime";

package/web-dist/chunks/{Accordion-tyh8jj9d.js → Accordion-cbbafww1.js}

@@ -10,7 +10,7 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   useZoraTheme2
 } from "./Accordion-srjya6dz.js";

package/web-dist/chunks/{Accordion-11ej93t5.js → Accordion-cjjg81ry.js}

@@ -10,10 +10,10 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Card2
-} from "./Accordion-rqr10gn4.js";
+} from "./Accordion-1495be5z.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   Badge2
 } from "./Accordion-xgxxg1hz.js";

package/web-dist/chunks/{Accordion-vkd002gw.js → Accordion-d0bebw9j.js}

@@ -15,13 +15,13 @@ import {
   FormError2,
   hasRequiredRule,
   useFormController
-} from "./Accordion-wqyrrptg.js";
+} from "./Accordion-jyemxzat.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   Field2
-} from "./Accordion-gn8ptzwb.js";
+} from "./Accordion-4x8gdqqs.js";
 import {
   TextInput2
 } from "./Accordion-y2pss5p0.js";

package/web-dist/chunks/{Accordion-vjcd5kxc.js → Accordion-gntmfcmz.js}

@@ -24,7 +24,7 @@ import {
 import {
   Heading2,
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   resolveOverlayAnimation
 } from "./Accordion-n7y08rz5.js";

package/web-dist/chunks/{Accordion-wqyrrptg.js → Accordion-jyemxzat.js}

@@ -10,7 +10,7 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   useZoraTheme2
 } from "./Accordion-srjya6dz.js";

package/web-dist/chunks/{Accordion-p7d5svfq.js → Accordion-kmwhjw1k.js}

@@ -22,7 +22,7 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   Icon2
 } from "./Accordion-1fsrnq73.js";

package/web-dist/chunks/{Accordion-26prtnm7.js → Accordion-ptxa6trg.js}

@@ -22,7 +22,7 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   resolveFieldState,
   resolveIndicatorSize,

package/web-dist/chunks/{Accordion-4yq92mxp.js → Accordion-ve81xazy.js}

@@ -13,7 +13,7 @@ import {
 } from "./Accordion-ep35792s.js";
 import {
   Text3
-} from "./Accordion-9rnsg9pk.js";
+} from "./Accordion-vqx3exsq.js";
 import {
   resolveIconSize
 } from "./Accordion-961ncx4e.js";

package/web-dist/chunks/Accordion-vnb3vntm.js

@@ -0,0 +1,79 @@
+'use client';
+import {
+  View2
+} from "./Accordion-ep35792s.js";
+import {
+  Text3
+} from "./Accordion-vqx3exsq.js";
+import {
+  Field3
+} from "./Accordion-45nc4bte.js";
+
+// src/features/picker/composition/PickerHeader.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function PickerHeader({ description, title }) {
+  return /* @__PURE__ */ jsxs(View2, {
+    gap: "xxs",
+    children: [
+      /* @__PURE__ */ jsx(Text3, {
+        align: "center",
+        variant: "label",
+        weight: "semiBold",
+        children: title
+      }),
+      description ? /* @__PURE__ */ jsx(Text3, {
+        align: "center",
+        emphasis: "muted",
+        variant: "bodySmall",
+        children: description
+      }) : null
+    ]
+  });
+}
+
+// src/features/picker/composition/PickerField.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function PickerField({
+  children,
+  description,
+  disabled,
+  error,
+  label,
+  required,
+  testID
+}) {
+  return /* @__PURE__ */ jsx2(Field3, {
+    disabled,
+    errorText: error,
+    invalid: Boolean(error),
+    label: label ? /* @__PURE__ */ jsx2(PickerFieldLabel, {
+      description,
+      label
+    }) : undefined,
+    required,
+    testID,
+    children
+  });
+}
+function PickerFieldLabel({
+  description,
+  label
+}) {
+  return /* @__PURE__ */ jsxs2(View2, {
+    gap: "xs",
+    children: [
+      /* @__PURE__ */ jsx2(Text3, {
+        variant: "label",
+        weight: "semiBold",
+        children: label
+      }),
+      description ? /* @__PURE__ */ jsx2(Text3, {
+        emphasis: "muted",
+        variant: "bodySmall",
+        children: description
+      }) : null
+    ]
+  });
+}
+
+export { PickerHeader, PickerField };