npm - @autono/open-pages - Versions diffs - 0.1.0 - Mend

@autono/open-pages 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (110) hide show

package/LICENSE +23 -0
package/README.md +108 -0
package/bin.js +2 -0
package/dist/build-TP72kiw7.js +35 -0
package/dist/cli/bin.d.ts +1 -0
package/dist/cli/bin.js +100 -0
package/dist/config-C9or4m4J.d.ts +23 -0
package/dist/config-L0IbktJ0.js +3135 -0
package/dist/design-C13iz9_4.js +35 -0
package/dist/dev-I2IyEh5W.js +97 -0
package/dist/export-B-kBRWB1.js +4 -0
package/dist/export-ic28osQP.js +131 -0
package/dist/index.d.ts +56 -0
package/dist/index.js +3 -0
package/dist/locale/index.d.ts +24 -0
package/dist/locale/index.js +881 -0
package/dist/open-pages-plugin-D_DN_zjh.js +632 -0
package/dist/preview-BrDuvgAN.js +21 -0
package/dist/sync-Be_hxSOF.js +139 -0
package/dist/sync-lKEXyPOh.js +3 -0
package/dist/types-C5NCdDT-.d.ts +219 -0
package/dist/update-CV62NhBT.js +37 -0
package/dist/update-package-Cxt57pz7.js +152 -0
package/dist/version-B6AiiGvT.js +26 -0
package/dist/version-CeffgdfZ.js +3 -0
package/dist/vite/index.d.ts +14 -0
package/dist/vite/index.js +7 -0
package/env.d.ts +59 -0
package/package.json +106 -0
package/skills/apply-comments/SKILL.md +86 -0
package/skills/create-page/SKILL.md +92 -0
package/skills/create-theme/SKILL.md +223 -0
package/skills/current-page/SKILL.md +106 -0
package/skills/page-authoring/SKILL.md +148 -0
package/skills/page-authoring/references/assets-and-fonts.md +85 -0
package/skills/page-authoring/references/html-pages.md +65 -0
package/skills/page-authoring/references/interactivity.md +77 -0
package/skills/page-authoring/references/layout-and-responsive.md +71 -0
package/skills/page-authoring/references/typography-and-color.md +60 -0
package/src/app/app.tsx +45 -0
package/src/app/components/asset-view.tsx +1665 -0
package/src/app/components/command/command-menu.tsx +227 -0
package/src/app/components/command/command.tsx +142 -0
package/src/app/components/command/home-command-menu.tsx +96 -0
package/src/app/components/icon-tooltip.tsx +34 -0
package/src/app/components/language-toggle.tsx +46 -0
package/src/app/components/sidebar/folder-item.tsx +269 -0
package/src/app/components/sidebar/icon-picker.tsx +61 -0
package/src/app/components/sidebar/sidebar-footer.tsx +139 -0
package/src/app/components/sidebar/sidebar.tsx +302 -0
package/src/app/components/theme-toggle.tsx +66 -0
package/src/app/components/themes/theme-detail.tsx +226 -0
package/src/app/components/themes/themes-gallery.tsx +104 -0
package/src/app/components/ui/badge.tsx +48 -0
package/src/app/components/ui/button.tsx +93 -0
package/src/app/components/ui/card.tsx +92 -0
package/src/app/components/ui/context-menu.tsx +247 -0
package/src/app/components/ui/dialog.tsx +155 -0
package/src/app/components/ui/dropdown-menu.tsx +267 -0
package/src/app/components/ui/input.tsx +25 -0
package/src/app/components/ui/label.tsx +21 -0
package/src/app/components/ui/popover.tsx +82 -0
package/src/app/components/ui/progress.tsx +33 -0
package/src/app/components/ui/scroll-area.tsx +53 -0
package/src/app/components/ui/select.tsx +195 -0
package/src/app/components/ui/separator.tsx +26 -0
package/src/app/components/ui/slider.tsx +68 -0
package/src/app/components/ui/sonner.tsx +48 -0
package/src/app/components/ui/tabs.tsx +79 -0
package/src/app/components/ui/textarea.tsx +22 -0
package/src/app/components/ui/toggle-group.tsx +84 -0
package/src/app/components/ui/toggle.tsx +45 -0
package/src/app/components/ui/tooltip.tsx +75 -0
package/src/app/favicon.ico +0 -0
package/src/app/frame/inspect.ts +140 -0
package/src/app/frame/main.tsx +91 -0
package/src/app/frame.html +12 -0
package/src/app/index.html +13 -0
package/src/app/lib/asset-filter.test.ts +176 -0
package/src/app/lib/asset-filter.ts +80 -0
package/src/app/lib/assets.ts +257 -0
package/src/app/lib/design.ts +58 -0
package/src/app/lib/folders.ts +239 -0
package/src/app/lib/frame.ts +38 -0
package/src/app/lib/locale-store.ts +67 -0
package/src/app/lib/page-thumb.tsx +46 -0
package/src/app/lib/pages.ts +28 -0
package/src/app/lib/sdk.ts +43 -0
package/src/app/lib/themes.ts +22 -0
package/src/app/lib/use-locale.ts +8 -0
package/src/app/lib/use-page-module.ts +48 -0
package/src/app/lib/use-page-titles.ts +29 -0
package/src/app/lib/use-restart-server.ts +78 -0
package/src/app/lib/utils.test.ts +25 -0
package/src/app/lib/utils.ts +6 -0
package/src/app/main.tsx +14 -0
package/src/app/routes/assets.tsx +9 -0
package/src/app/routes/home-shell.tsx +252 -0
package/src/app/routes/home.tsx +846 -0
package/src/app/routes/page.tsx +329 -0
package/src/app/routes/themes.tsx +34 -0
package/src/app/styles.css +405 -0
package/src/app/virtual.d.ts +53 -0
package/src/locale/en.ts +218 -0
package/src/locale/format.ts +12 -0
package/src/locale/index.ts +6 -0
package/src/locale/ja.ts +221 -0
package/src/locale/types.ts +215 -0
package/src/locale/zh-cn.ts +218 -0
package/src/locale/zh-tw.ts +218 -0

package/src/app/frame.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>open-pages</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./frame/main.tsx"></script>
+  </body>
+</html>

package/src/app/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="./favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>open-pages</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>

package/src/app/lib/asset-filter.test.ts ADDED Viewed

@@ -0,0 +1,176 @@
+import { describe, expect, it } from 'vitest';
+import { filterAssets, sortAssets } from './asset-filter.ts';
+import type { AssetEntry } from './assets.ts';
+const assets: AssetEntry[] = [
+  {
+    name: 'Brand Hero.PNG',
+    size: 100,
+    createdAt: 1,
+    mtime: 1,
+    mime: 'image/png',
+    url: '/brand-hero.png',
+    unused: false,
+  },
+  {
+    name: 'draft-hero.svg',
+    size: 200,
+    createdAt: 2,
+    mtime: 2,
+    mime: 'IMAGE/SVG+XML',
+    url: '/draft-hero.svg',
+    unused: true,
+  },
+  {
+    name: 'display.woff2',
+    size: 300,
+    createdAt: 3,
+    mtime: 3,
+    mime: 'font/woff2',
+    url: '/display.woff2',
+    unused: true,
+  },
+  {
+    name: 'intro.webm',
+    size: 400,
+    createdAt: 4,
+    mtime: 4,
+    mime: 'video/webm',
+    url: '/intro.webm',
+    unused: false,
+  },
+  {
+    name: 'metadata.json',
+    size: 500,
+    createdAt: 5,
+    mtime: 5,
+    mime: 'application/json',
+    url: '/metadata.json',
+    unused: false,
+  },
+];
+const names = (entries: AssetEntry[]) => entries.map((asset) => asset.name);
+describe('filterAssets', () => {
+  it('filters assets by usage', () => {
+    expect(names(filterAssets(assets, { usage: 'used', type: 'all', search: '' }))).toEqual([
+      'Brand Hero.PNG',
+      'intro.webm',
+      'metadata.json',
+    ]);
+    expect(names(filterAssets(assets, { usage: 'unused', type: 'all', search: '' }))).toEqual([
+      'draft-hero.svg',
+      'display.woff2',
+    ]);
+  });
+  it.each([
+    ['image', ['Brand Hero.PNG', 'draft-hero.svg']],
+    ['font', ['display.woff2']],
+    ['video', ['intro.webm']],
+    ['other', ['metadata.json']],
+  ] as const)('filters %s MIME types', (type, expected) => {
+    expect(names(filterAssets(assets, { usage: 'all', type, search: '' }))).toEqual(expected);
+  });
+  it('matches trimmed filename searches case-insensitively', () => {
+    expect(names(filterAssets(assets, { usage: 'all', type: 'all', search: '  HERO  ' }))).toEqual([
+      'Brand Hero.PNG',
+      'draft-hero.svg',
+    ]);
+  });
+  it('applies usage, type, and search filters together', () => {
+    expect(
+      names(filterAssets(assets, { usage: 'unused', type: 'image', search: 'DRAFT' })),
+    ).toEqual(['draft-hero.svg']);
+  });
+  it('returns all assets when every filter is inactive', () => {
+    expect(filterAssets(assets, { usage: 'all', type: 'all', search: '   ' })).toEqual(assets);
+  });
+});
+describe('sortAssets', () => {
+  const sortableAssets: AssetEntry[] = [
+    {
+      name: 'image-10.png',
+      size: 300,
+      createdAt: 1,
+      mtime: 200,
+      mime: 'image/png',
+      url: '/image-10.png',
+      unused: false,
+    },
+    {
+      name: 'Image-2.svg',
+      size: 100,
+      createdAt: 2,
+      mtime: 300,
+      mime: 'IMAGE/SVG+XML',
+      url: '/image-2.svg',
+      unused: false,
+    },
+    {
+      name: 'clip.webm',
+      size: 200,
+      createdAt: 3,
+      mtime: 100,
+      mime: 'video/webm',
+      url: '/clip.webm',
+      unused: false,
+    },
+  ];
+  it.each([
+    ['name', 'asc', ['clip.webm', 'Image-2.svg', 'image-10.png']],
+    ['name', 'desc', ['image-10.png', 'Image-2.svg', 'clip.webm']],
+    ['modified', 'asc', ['clip.webm', 'image-10.png', 'Image-2.svg']],
+    ['modified', 'desc', ['Image-2.svg', 'image-10.png', 'clip.webm']],
+    ['size', 'asc', ['Image-2.svg', 'clip.webm', 'image-10.png']],
+    ['size', 'desc', ['image-10.png', 'clip.webm', 'Image-2.svg']],
+    ['type', 'asc', ['image-10.png', 'Image-2.svg', 'clip.webm']],
+    ['type', 'desc', ['clip.webm', 'Image-2.svg', 'image-10.png']],
+  ] as const)('sorts by %s %s', (key, direction, expected) => {
+    expect(names(sortAssets(sortableAssets, { key, direction }))).toEqual(expected);
+  });
+  it('sorts names naturally and case-insensitively', () => {
+    const naturalNames = [
+      { ...sortableAssets[0], name: 'Page 11.png' },
+      { ...sortableAssets[0], name: 'page 2.png' },
+      { ...sortableAssets[0], name: 'PAGE 1.png' },
+    ];
+    expect(names(sortAssets(naturalNames, { key: 'name', direction: 'asc' }))).toEqual([
+      'PAGE 1.png',
+      'page 2.png',
+      'Page 11.png',
+    ]);
+  });
+  it('breaks primary-value ties by name ascending for both directions', () => {
+    const tiedAssets = [
+      { ...sortableAssets[0], name: 'zebra.png', size: 100 },
+      { ...sortableAssets[1], name: 'alpha.svg', size: 100 },
+    ];
+    expect(names(sortAssets(tiedAssets, { key: 'size', direction: 'asc' }))).toEqual([
+      'alpha.svg',
+      'zebra.png',
+    ]);
+    expect(names(sortAssets(tiedAssets, { key: 'size', direction: 'desc' }))).toEqual([
+      'alpha.svg',
+      'zebra.png',
+    ]);
+  });
+  it('does not mutate the input', () => {
+    const originalOrder = [...sortableAssets];
+    const sorted = sortAssets(sortableAssets, { key: 'name', direction: 'asc' });
+    expect(sortableAssets).toEqual(originalOrder);
+    expect(sorted).not.toBe(sortableAssets);
+  });
+});

package/src/app/lib/asset-filter.ts ADDED Viewed

@@ -0,0 +1,80 @@
+import type { AssetEntry } from './assets';
+export type AssetUsageFilter = 'all' | 'used' | 'unused';
+export type AssetTypeFilter = 'all' | 'image' | 'font' | 'video' | 'other';
+export type AssetSortKey = 'name' | 'modified' | 'size' | 'type';
+export type AssetSortDirection = 'asc' | 'desc';
+export type AssetFilterOptions = {
+  usage: AssetUsageFilter;
+  type: AssetTypeFilter;
+  search: string;
+};
+export type AssetSortOptions = {
+  key: AssetSortKey;
+  direction: AssetSortDirection;
+};
+type SpecificAssetType = Exclude<AssetTypeFilter, 'all'>;
+function assetType(mime: string): SpecificAssetType {
+  const normalizedMime = mime.toLowerCase();
+  if (normalizedMime.startsWith('image/')) return 'image';
+  if (normalizedMime.startsWith('font/')) return 'font';
+  if (normalizedMime.startsWith('video/')) return 'video';
+  return 'other';
+}
+export function filterAssets(
+  assets: readonly AssetEntry[],
+  { usage, type, search }: AssetFilterOptions,
+): AssetEntry[] {
+  const query = search.trim().toLowerCase();
+  const filtered: AssetEntry[] = [];
+  for (const asset of assets) {
+    if (usage === 'used' && asset.unused) continue;
+    if (usage === 'unused' && !asset.unused) continue;
+    if (type !== 'all' && assetType(asset.mime) !== type) continue;
+    if (query && !asset.name.toLowerCase().includes(query)) continue;
+    filtered.push(asset);
+  }
+  return filtered;
+}
+const nameCollator = new Intl.Collator(undefined, {
+  numeric: true,
+  sensitivity: 'base',
+});
+function compareNames(left: AssetEntry, right: AssetEntry): number {
+  return nameCollator.compare(left.name, right.name);
+}
+function comparePrimary(left: AssetEntry, right: AssetEntry, key: AssetSortKey): number {
+  switch (key) {
+    case 'name':
+      return compareNames(left, right);
+    case 'modified':
+      return left.mtime - right.mtime;
+    case 'size':
+      return left.size - right.size;
+    case 'type':
+      return left.mime.toLowerCase().localeCompare(right.mime.toLowerCase());
+  }
+}
+export function sortAssets(
+  assets: readonly AssetEntry[],
+  { key, direction }: AssetSortOptions,
+): AssetEntry[] {
+  return [...assets].sort((left, right) => {
+    const primaryComparison = comparePrimary(left, right, key);
+    if (primaryComparison !== 0) {
+      return direction === 'asc' ? primaryComparison : -primaryComparison;
+    }
+    return compareNames(left, right);
+  });
+}

package/src/app/lib/assets.ts ADDED Viewed

@@ -0,0 +1,257 @@
+import { useCallback, useEffect, useState } from 'react';
+export type AssetEntry = {
+  name: string;
+  size: number;
+  createdAt: number;
+  mtime: number;
+  mime: string;
+  url: string;
+  unused: boolean;
+};
+export type UploadOptions = { overwrite?: boolean };
+export async function listAssets(pageId: string): Promise<AssetEntry[]> {
+  const res = await fetch(`/__assets/${pageId}`);
+  if (!res.ok) throw new Error(`GET /__assets/${pageId} ${res.status}`);
+  const data = (await res.json()) as { assets?: AssetEntry[] };
+  return data.assets ?? [];
+}
+export async function uploadAsset(
+  pageId: string,
+  file: File,
+  opts: UploadOptions = {},
+): Promise<Response> {
+  const qs = opts.overwrite ? '?overwrite=1' : '';
+  return fetch(`/__assets/${pageId}/${encodeURIComponent(file.name)}${qs}`, {
+    method: 'POST',
+    headers: {
+      'content-type': file.type || 'application/octet-stream',
+      'content-length': String(file.size),
+    },
+    body: file,
+  });
+}
+async function renameAsset(pageId: string, from: string, to: string): Promise<Response> {
+  return fetch(`/__assets/${pageId}/${encodeURIComponent(from)}`, {
+    method: 'PATCH',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ name: to }),
+  });
+}
+async function deleteAsset(pageId: string, name: string): Promise<Response> {
+  return fetch(`/__assets/${pageId}/${encodeURIComponent(name)}`, { method: 'DELETE' });
+}
+export type AssetUsage = { pageId: string; count: number };
+export async function listAssetUsages(pageId: string, name: string): Promise<AssetUsage[]> {
+  const res = await fetch(`/__assets/${pageId}/${encodeURIComponent(name)}/usages`);
+  if (!res.ok) return [];
+  const data = (await res.json().catch(() => null)) as { usages?: AssetUsage[] } | null;
+  return data?.usages ?? [];
+}
+export async function revertAssetUsage(
+  pageId: string,
+  assetPath: string,
+): Promise<{ ok: boolean; status: number }> {
+  const res = await fetch('/__edit/revert-asset', {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify({ pageId, assetPath }),
+  });
+  return { ok: res.ok, status: res.status };
+}
+export async function uploadWithAutoRename(
+  pageId: string,
+  file: File,
+): Promise<{ ok: boolean; status: number; entry: AssetEntry | null }> {
+  // Vite's default `assetsInclude` matches asset extensions case-sensitively,
+  // so `<img src="./assets/foo.JPG" />` (which the placeholder edit rewrites
+  // into a real `import`) fails to parse. Lowercase the extension so the
+  // import path is always one Vite recognizes.
+  let uploaded = lowercaseExtension(file);
+  let res = await uploadAsset(pageId, uploaded);
+  if (res.status === 409) {
+    const list = await listAssets(pageId);
+    const taken = new Set(list.map((a) => a.name));
+    uploaded = renamedCopy(uploaded, taken);
+    res = await uploadAsset(pageId, uploaded);
+  }
+  if (!res.ok) return { ok: false, status: res.status, entry: null };
+  const body = (await res.json().catch(() => null)) as Partial<AssetEntry> | null;
+  const now = Date.now();
+  const entry: AssetEntry = {
+    name: body?.name ?? uploaded.name,
+    size: body?.size ?? uploaded.size,
+    createdAt: body?.createdAt ?? now,
+    mtime: body?.mtime ?? now,
+    mime: body?.mime ?? uploaded.type ?? 'application/octet-stream',
+    url: body?.url ?? `/__assets/${pageId}/${encodeURIComponent(uploaded.name)}`,
+    unused: body?.unused ?? false,
+  };
+  return { ok: true, status: res.status, entry };
+}
+function lowercaseExtension(file: File): File {
+  const dot = file.name.lastIndexOf('.');
+  if (dot <= 0) return file;
+  const ext = file.name.slice(dot);
+  const lower = ext.toLowerCase();
+  if (ext === lower) return file;
+  return new File([file], file.name.slice(0, dot) + lower, {
+    type: file.type,
+    lastModified: file.lastModified,
+  });
+}
+export function renamedCopy(file: File, taken: Set<string>): File {
+  const dot = file.name.lastIndexOf('.');
+  const stem = dot > 0 ? file.name.slice(0, dot) : file.name;
+  const ext = dot > 0 ? file.name.slice(dot) : '';
+  let i = 1;
+  let next = `${stem}-${i}${ext}`;
+  while (taken.has(next)) {
+    i += 1;
+    next = `${stem}-${i}${ext}`;
+  }
+  return new File([file], next, { type: file.type, lastModified: file.lastModified });
+}
+export type SvglItem = {
+  id: number;
+  title: string;
+  category: string | string[];
+  route: string | { light: string; dark: string };
+  url: string;
+};
+export async function searchSvgl(query: string, signal?: AbortSignal): Promise<SvglItem[]> {
+  const q = query.trim();
+  const params = new URLSearchParams();
+  if (q) params.set('q', q);
+  else params.set('limit', '24');
+  const res = await fetch(`/__svgl/search?${params.toString()}`, { signal });
+  // svgl returns 404 when a search has no matches — treat it as an empty list,
+  // not an error.
+  if (res.status === 404) return [];
+  if (!res.ok) throw new Error(`svgl ${res.status}`);
+  return (await res.json()) as SvglItem[];
+}
+export function svgProxyUrl(routeUrl: string): string {
+  return `/__svgl/svg?u=${encodeURIComponent(routeUrl)}`;
+}
+export async function fetchSvgAsFile(routeUrl: string, filename: string): Promise<File> {
+  const res = await fetch(svgProxyUrl(routeUrl));
+  if (!res.ok) throw new Error(`svgl route ${res.status}`);
+  const blob = await res.blob();
+  return new File([blob], filename, { type: 'image/svg+xml' });
+}
+export type UseAssetsResult = {
+  assets: AssetEntry[];
+  loading: boolean;
+  available: boolean;
+  upload: (file: File, opts?: UploadOptions) => Promise<{ ok: boolean; status: number }>;
+  rename: (from: string, to: string) => Promise<{ ok: boolean; status: number }>;
+  remove: (name: string) => Promise<{ ok: boolean; status: number }>;
+  refresh: () => Promise<void>;
+};
+const NOOP_RESULT = { ok: false, status: 0 } as const;
+export function useAssets(pageId: string): UseAssetsResult {
+  const available = import.meta.env.DEV;
+  const [assets, setAssets] = useState<AssetEntry[]>([]);
+  const [loading, setLoading] = useState(available);
+  const refresh = useCallback(async () => {
+    if (!available) return;
+    const next = await listAssets(pageId);
+    setAssets(next);
+  }, [pageId]);
+  useEffect(() => {
+    if (!available) return;
+    let cancelled = false;
+    setLoading(true);
+    listAssets(pageId)
+      .then((next) => {
+        if (!cancelled) {
+          setAssets(next);
+          setLoading(false);
+        }
+      })
+      .catch(() => {
+        if (!cancelled) setLoading(false);
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [pageId]);
+  useEffect(() => {
+    if (!available || !import.meta.hot) return;
+    const assetHandler = (data: { pageId?: string } | undefined) => {
+      if (!data || data.pageId === pageId) {
+        refresh().catch(() => {});
+      }
+    };
+    const docHandler = (data: { pageId?: unknown; pageIds?: unknown } | undefined) => {
+      const changedIds = Array.isArray(data?.pageIds)
+        ? data.pageIds
+        : typeof data?.pageId === 'string'
+          ? [data.pageId]
+          : [];
+      if (pageId === '@global' ? changedIds.length > 0 : changedIds.includes(pageId)) {
+        refresh().catch(() => {});
+      }
+    };
+    import.meta.hot.on('open-pages:assets-changed', assetHandler);
+    import.meta.hot.on('open-pages:page-changed', docHandler);
+    return () => {
+      import.meta.hot?.off('open-pages:assets-changed', assetHandler);
+      import.meta.hot?.off('open-pages:page-changed', docHandler);
+    };
+  }, [pageId, refresh]);
+  const upload = useCallback(
+    async (file: File, opts?: UploadOptions) => {
+      if (!available) return NOOP_RESULT;
+      const res = await uploadAsset(pageId, file, opts);
+      if (res.ok) await refresh();
+      return { ok: res.ok, status: res.status };
+    },
+    [pageId, refresh],
+  );
+  const rename = useCallback(
+    async (from: string, to: string) => {
+      if (!available) return NOOP_RESULT;
+      const res = await renameAsset(pageId, from, to);
+      if (res.ok) await refresh();
+      return { ok: res.ok, status: res.status };
+    },
+    [pageId, refresh],
+  );
+  const remove = useCallback(
+    async (name: string) => {
+      if (!available) return NOOP_RESULT;
+      const res = await deleteAsset(pageId, name);
+      if (res.ok) await refresh();
+      return { ok: res.ok, status: res.status };
+    },
+    [pageId, refresh],
+  );
+  return { assets, loading, available, upload, rename, remove, refresh };
+}

package/src/app/lib/design.ts ADDED Viewed

@@ -0,0 +1,58 @@
+export type DesignPalette = {
+  bg: string;
+  text: string;
+  accent: string;
+};
+export type DesignFonts = {
+  display: string;
+  body: string;
+};
+export type DesignTypeScale = {
+  hero: number;
+  body: number;
+};
+export type DesignSystem = {
+  palette: DesignPalette;
+  fonts: DesignFonts;
+  typeScale: DesignTypeScale;
+  radius: number;
+};
+export function designToCssVars(d: DesignSystem): Record<string, string> {
+  return {
+    '--osd-bg': d.palette.bg,
+    '--osd-text': d.palette.text,
+    '--osd-accent': d.palette.accent,
+    '--osd-font-display': d.fonts.display,
+    '--osd-font-body': d.fonts.body,
+    '--osd-size-hero': `${d.typeScale.hero}px`,
+    '--osd-size-body': `${d.typeScale.body}px`,
+    '--osd-radius': `${d.radius}px`,
+  };
+}
+export function cssVarsToString(vars: Record<string, string>): string {
+  return Object.entries(vars)
+    .map(([k, v]) => `  ${k}: ${v};`)
+    .join('\n');
+}
+export const defaultDesign: DesignSystem = {
+  palette: {
+    bg: '#f7f5f0',
+    text: '#1a1814',
+    accent: '#6d4cff',
+  },
+  fonts: {
+    display: 'Georgia, "Times New Roman", serif',
+    body: '-apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif',
+  },
+  typeScale: {
+    hero: 168,
+    body: 36,
+  },
+  radius: 12,
+};