simple-module-pagebuilder 0.0.1__py3-none-any.whl

pagebuilder/translation/translatable-fields.ts

@@ -0,0 +1,65 @@
+import type { Field } from '@puckeditor/core';
+
+/** Puck field types whose values are free-form human copy worth translating. */
+export const TRANSLATABLE_TEXT_TYPES: ReadonlySet<string> = new Set([
+  'text',
+  'textarea',
+  'richtext',
+]);
+
+// Key-based denylist: a `text`-typed field can still hold a URL, a colour or an
+// id rather than copy (FeatureCards.items[].linkHref, Button.color). Applied on
+// top of the type check so those are never sent to a translator even though
+// Puck models them as plain text.
+const DENYLIST_PATTERNS: readonly RegExp[] = [
+  /href$/i,
+  /url$/i,
+  /src$/i,
+  /colou?r$/i,
+  /bg$/i,
+  /^id$/i,
+  // `srcset` and `sizes` are responsive-image descriptors —
+  // "/img-800.png 800w, /img-1600.png 1600w" and "(max-width: 600px) 100vw".
+  // `/src$/i` is end-anchored so it does not catch `srcset`, and nothing
+  // catches `sizes`. A translator handed either returns something reflowed,
+  // and the browser then requests a URL that doesn't exist.
+  /^srcset$/i,
+  /^sizes$/i,
+  // CSS lengths: `height` (Html, Iframe), `bodyMaxWidth` (MediaObject). Any
+  // casing, so `maxWidth` and `minHeight` are covered too.
+  /(^|[a-z])(width|height)$/i,
+  // The Html widget's field is raw markup, not prose. Sending it out for
+  // translation gets the tags rewritten along with the words.
+  /^html$/i,
+  // camelCase technical identifiers (`questId`, `clusterId`). Anchored to a
+  // capital `I` so it matches a real `…Id` suffix and never a lowercase word
+  // that happens to end in "id" (`grid`, `valid`).
+  /Id$/,
+  // Numbered image-URL fields nested in arrays (DefinitionList's
+  // items[].sections[].image1). The digit suffix means `src`/`url` above don't
+  // match. Fully anchored so it hits exactly `image1` and never its genuine
+  // alt-text sibling `image1Alt`.
+  /^image\d+$/i,
+];
+
+function isDenylistedKey(key: string): boolean {
+  return DENYLIST_PATTERNS.some((pattern) => pattern.test(key));
+}
+
+/**
+ * True when `field` (found at prop `key`) holds translatable copy.
+ *
+ * Upstream also threads a per-component set of image-field names through here,
+ * built from its `IMAGE_FIELDS` / `ARRAY_IMAGE_FIELDS` maps, because over there
+ * an image field is declared as `type: "text"` and only swapped for the picker
+ * when the config is assembled — so by name it is indistinguishable from copy.
+ *
+ * This module inlines `createImageField` at the field instead, which yields
+ * `type: "custom"`. That fails the type check on the first line, so image
+ * fields are excluded structurally and the whole map-plumbing is unnecessary
+ * here. Worth knowing if these are ever diffed against each other.
+ */
+export function isTranslatableField(key: string, field: Field | undefined): boolean {
+  if (!field || !TRANSLATABLE_TEXT_TYPES.has(field.type)) return false;
+  return !isDenylistedKey(key);
+}

pagebuilder/translation/translation.test.ts

@@ -0,0 +1,167 @@
+import { describe, expect, it } from 'vitest';
+
+import { basePageConfig } from '../components/puckConfig';
+import { applyTranslatedStrings, extractTranslatableStrings } from './index';
+
+const config = basePageConfig as never;
+
+const fixture = JSON.stringify({
+  content: [
+    { type: 'Heading', props: { id: 'h1', text: 'About us', level: 'h1', align: 'left' } },
+    { type: 'Text', props: { id: 't1', text: 'Welcome to **us**', size: 'base', align: 'left' } },
+    {
+      type: 'FeatureCards',
+      props: {
+        id: 'f1',
+        title: 'Features',
+        items: [{ title: 'Fast', description: 'Very fast', href: '/a', iconUrl: '/i.png' }],
+      },
+    },
+    { type: 'Image', props: { id: 'i1', src: '/pic.png', alt: 'A picture' } },
+  ],
+  root: { props: { title: 'The page', width: 'contained' } },
+});
+
+describe('extract / apply round trip', () => {
+  it('takes the copy and leaves urls, ids and images alone', () => {
+    const { strings } = extractTranslatableStrings(fixture, config);
+    expect(strings).toContain('About us');
+    expect(strings).toContain('Welcome to **us**');
+    expect(strings).toContain('Features');
+    expect(strings).toContain('Fast');
+    expect(strings).toContain('Very fast');
+    expect(strings).toContain('A picture');
+    // `href` is denylisted by key; `src` and `iconUrl` are picker fields, so
+    // they are `type: "custom"` and never text-typed to begin with.
+    expect(strings).not.toContain('/a');
+    expect(strings).not.toContain('/i.png');
+    expect(strings).not.toContain('/pic.png');
+  });
+
+  it('reproduces the document when the strings are fed straight back', () => {
+    const { strings, paths } = extractTranslatableStrings(fixture, config);
+    expect(JSON.parse(applyTranslatedStrings(fixture, paths, strings))).toEqual(
+      JSON.parse(fixture),
+    );
+  });
+
+  it('writes each translation to the place it came from', () => {
+    const { strings, paths } = extractTranslatableStrings(fixture, config);
+    const out = JSON.parse(
+      applyTranslatedStrings(
+        fixture,
+        paths,
+        strings.map((s) => `[de]${s}`),
+      ),
+    );
+    expect(out.content[0].props.text).toBe('[de]About us');
+    expect(out.content[2].props.items[0].description).toBe('[de]Very fast');
+    expect(out.content[2].props.items[0].href).toBe('/a');
+    expect(out.content[3].props.src).toBe('/pic.png');
+  });
+
+  it('leaves the original in place for a null or missing translation', () => {
+    // A backend deserializing into a nullable list can hand back a literal
+    // `null` element, and a short array yields `undefined`. Neither may
+    // overwrite real copy.
+    const { paths } = extractTranslatableStrings(fixture, config);
+    const original = JSON.parse(fixture);
+    const out = JSON.parse(
+      applyTranslatedStrings(fixture, paths, [null as unknown as string]),
+    );
+    expect(out.content[0].props.text).toBe(original.content[0].props.text);
+  });
+
+  it('survives content that is not valid JSON, on both halves', () => {
+    // The two are documented as exact inverses, so `apply` must not crash on
+    // input that `extract` handled by returning nothing.
+    expect(extractTranslatableStrings('not json', config).strings).toEqual([]);
+    expect(applyTranslatedStrings('not json', [], [])).toBe('not json');
+  });
+
+  it('leaves machine-readable text fields out of the translation set', () => {
+    // These are all `text`/`textarea` — indistinguishable from copy by field
+    // type. A translator handed a srcset returns something reflowed, and the
+    // browser then requests a URL that does not exist.
+    const technical = JSON.stringify({
+      content: [
+        {
+          type: 'Image',
+          props: {
+            id: 'i1',
+            src: '/a.png',
+            alt: 'Real copy',
+            srcset: '/a-800.png 800w, /a-1600.png 1600w',
+            sizes: '(max-width: 600px) 100vw, 50vw',
+          },
+        },
+        { type: 'Html', props: { id: 'x1', html: '<b>markup</b>', height: '400px' } },
+      ],
+      root: { props: { title: 'P', width: 'contained' } },
+    });
+
+    const { strings } = extractTranslatableStrings(technical, config);
+    expect(strings).toContain('Real copy');
+    expect(strings).not.toContain('/a-800.png 800w, /a-1600.png 1600w');
+    expect(strings).not.toContain('(max-width: 600px) 100vw, 50vw');
+    expect(strings).not.toContain('<b>markup</b>');
+    expect(strings).not.toContain('400px');
+  });
+});
+
+describe('blocks nested in a slot', () => {
+  // The case upstream has no equivalent for: it kept nested blocks in `zones`,
+  // whereas Columns now holds them in a slot inside an array item. A walker
+  // that only understands `array` fields would find the Columns block, see a
+  // slot it has no rule for, and silently skip everything an author put in it.
+  const nested = JSON.stringify({
+    content: [
+      {
+        type: 'Columns',
+        props: {
+          id: 'c1',
+          gap: 'md',
+          columns: [
+            {
+              width: 1,
+              content: [
+                { type: 'Heading', props: { id: 'nh', text: 'Nested title', level: 'h2' } },
+              ],
+            },
+            { width: 1, content: [] },
+          ],
+        },
+      },
+    ],
+    root: { props: { title: 'P', width: 'contained' } },
+  });
+
+  it('reaches copy inside a column', () => {
+    expect(extractTranslatableStrings(nested, config).strings).toContain('Nested title');
+  });
+
+  it('writes a translation back into the column it came from', () => {
+    const { strings, paths } = extractTranslatableStrings(nested, config);
+    const out = JSON.parse(
+      applyTranslatedStrings(
+        nested,
+        paths,
+        strings.map((s) => `[de]${s}`),
+      ),
+    );
+    expect(out.content[0].props.columns[0].content[0].props.text).toBe('[de]Nested title');
+  });
+});
+
+describe('pre-slots documents', () => {
+  it('still reaches blocks parked in a zones map', () => {
+    const zoned = JSON.stringify({
+      content: [{ type: 'Columns', props: { id: 'c1', gap: 'md', columns: [] } }],
+      zones: {
+        'c1:col-0': [{ type: 'Heading', props: { id: 'zh', text: 'Zoned', level: 'h2' } }],
+      },
+      root: { props: { title: 'P', width: 'contained' } },
+    });
+    expect(extractTranslatableStrings(zoned, config).strings).toContain('Zoned');
+  });
+});

pagebuilder/utils/api.ts

@@ -0,0 +1,12 @@
+/**
+ * Public entry point for the pagebuilder admin API client.
+ *
+ * The implementation is split across `types`, `request`, `pagesApi`, and
+ * `mediaApi`; this barrel keeps `import { savePage } from '../utils/api'`
+ * working for every consumer.
+ */
+
+export * from './mediaApi';
+export * from './pagesApi';
+export { BASE, CSRF_COOKIE, readCookie, request } from './request';
+export * from './types';

pagebuilder/utils/datetime.ts

@@ -0,0 +1,25 @@
+/** Conversions between ISO strings and `<input type="datetime-local">` values. */
+
+/**
+ * Format an ISO string (with offset, from the server) into the local
+ * ``YYYY-MM-DDTHH:mm`` shape an ``<input type="datetime-local">``
+ * expects. Returns ``""`` for null so the input renders empty.
+ */
+export function toLocalInput(iso: string | null): string {
+  if (!iso) return '';
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return '';
+  const pad = (n: number) => String(n).padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+}
+
+/**
+ * Inverse of toLocalInput: take whatever a ``datetime-local`` produced
+ * (a naive local-time string) and emit an ISO string with offset that
+ * round-trips through the server's UTC normalisation.
+ */
+export function fromLocalInput(value: string | null): string | null {
+  if (!value) return null;
+  const d = new Date(value);
+  return Number.isNaN(d.getTime()) ? null : d.toISOString();
+}

pagebuilder/utils/decorative-image.ts

@@ -0,0 +1,15 @@
+/**
+ * Returns the ARIA props that mark an image as decorative when alt is empty,
+ * or the empty object when alt is descriptive. Callers must still write
+ * `alt={imageAlt}` explicitly — biome's `useAltText` lint rule can't see
+ * spread attributes, and keeping `alt` at the call-site makes the intent
+ * visible to readers too.
+ */
+export function decorativeAriaProps(
+  alt: string | undefined,
+): { 'aria-hidden': 'true'; role: 'presentation' } | Record<string, never> {
+  if (!alt || alt.trim() === '') {
+    return { 'aria-hidden': 'true', role: 'presentation' };
+  }
+  return {};
+}

pagebuilder/utils/editorSnapshot.ts

@@ -0,0 +1,39 @@
+/** Dirty-tracking primitives for the page editor's autosave. */
+
+import type { Data } from '@puckeditor/core';
+
+export const AUTOSAVE_DEBOUNCE_MS = 2000;
+
+export type SaveState = 'idle' | 'saving' | 'error';
+
+export interface EditorSnapshot {
+  title: string;
+  slug: string;
+  metaDescription: string;
+  ogImage: string;
+  canonicalUrl: string;
+  indexInSearch: boolean;
+  jsonLdText: string;
+  data: Data;
+}
+
+export function snapshotKey(payload: EditorSnapshot): string {
+  return JSON.stringify(payload);
+}
+
+export function formatSaveLabel(
+  state: SaveState,
+  isDirty: boolean,
+  lastSavedAt: Date | null,
+  errorMessage: string | null,
+): string {
+  if (state === 'saving') return 'Saving…';
+  if (state === 'error') return errorMessage ? `Save failed: ${errorMessage}` : 'Save failed';
+  if (isDirty) return 'Unsaved changes';
+  if (lastSavedAt) {
+    const hh = String(lastSavedAt.getHours()).padStart(2, '0');
+    const mm = String(lastSavedAt.getMinutes()).padStart(2, '0');
+    return `Saved at ${hh}:${mm}`;
+  }
+  return 'Saved';
+}

pagebuilder/utils/markdown.ts

@@ -0,0 +1,160 @@
+export type MarkdownBlock =
+  | { type: 'h1' | 'h2' | 'h3' | 'p'; text: string }
+  | { type: 'ul'; items: string[] };
+
+export type ParseMarkdownBlocksOptions = {
+  /**
+   * Keep single newlines inside a paragraph (joined with "\n" instead of a
+   * space) so renderers can emit soft line breaks. Widget textareas want
+   * this — several rendered with `whitespace-pre-line` before markdown
+   * support, so a bare newline has always been a visible break there. The
+   * default (space-join) is standard markdown and what the HTML converter
+   * and the Markdown widget keep using.
+   */
+  softBreaks?: boolean;
+};
+
+export function parseMarkdownBlocks(
+  content: string,
+  opts?: ParseMarkdownBlocksOptions,
+): MarkdownBlock[] {
+  const joiner = opts?.softBreaks ? '\n' : ' ';
+  const lines = content.split(/\r?\n/);
+  const blocks: MarkdownBlock[] = [];
+  let paragraph: string[] = [];
+  let listItems: string[] = [];
+
+  const flushParagraph = () => {
+    if (paragraph.length > 0) {
+      blocks.push({ type: 'p', text: paragraph.join(joiner) });
+      paragraph = [];
+    }
+  };
+  const flushList = () => {
+    if (listItems.length > 0) {
+      blocks.push({ type: 'ul', items: listItems });
+      listItems = [];
+    }
+  };
+
+  for (const line of lines) {
+    if (!line.trim()) {
+      flushParagraph();
+      flushList();
+      continue;
+    }
+    if (line.startsWith('### ')) {
+      flushParagraph();
+      flushList();
+      blocks.push({ type: 'h3', text: line.slice(4) });
+    } else if (line.startsWith('## ')) {
+      flushParagraph();
+      flushList();
+      blocks.push({ type: 'h2', text: line.slice(3) });
+    } else if (line.startsWith('# ')) {
+      flushParagraph();
+      flushList();
+      blocks.push({ type: 'h1', text: line.slice(2) });
+    } else if (line.startsWith('- ')) {
+      flushParagraph();
+      listItems.push(line.slice(2));
+    } else {
+      flushList();
+      paragraph.push(line.trim());
+    }
+  }
+  flushParagraph();
+  flushList();
+  return blocks;
+}
+
+// Alternatives are ordered longest-marker-first so "***x***" is captured
+// whole as bold italic. The single-asterisk closer carries a (?!\*) guard so
+// a lone `*` never pairs with the first asterisk of a following `**` (e.g.
+// "* and **" stays literal instead of becoming a spurious <em>).
+const INLINE_PATTERN = /(\*\*\*[^*\n]+\*\*\*|\*\*[^*\n]+\*\*|\*[^*\n]+\*(?!\*)|`[^`\n]+`)/g;
+
+export function escapeHtml(text: string): string {
+  return text
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;');
+}
+
+export type InlineToken = {
+  type: 'text' | 'strong' | 'em' | 'strongem' | 'code';
+  content: string;
+};
+
+/**
+ * Tokenize inline markdown (`***bold italic***`, `**strong**`, `*em*`,
+ * `` `code` ``) into a flat token list. Single source of truth for the
+ * converter's HTML output and the Markdown widget's React output — keep both
+ * on this function.
+ *
+ * Capture parity: with `String.split(capturingRegex)`, only ODD-indexed parts
+ * are captured separators. Even-indexed parts are literal text and are never
+ * treated as markup, even when they look like markers — never an empty
+ * <em>/<strong>/<code>. The triple-asterisk alternative must come first so
+ * "***bold***" captures whole as a strongem span instead of leaving leftover
+ * `*` markers that could mispair with later lone asterisks. Note the pattern
+ * genuinely captures single-asterisk spans containing spaces
+ * ("* 3 and 4 *" → em), which is intentional for this lightweight tokenizer.
+ */
+export function parseInlineTokens(text: string): InlineToken[] {
+  const parts = text.split(INLINE_PATTERN);
+  const tokens: InlineToken[] = [];
+  for (let i = 0; i < parts.length; i++) {
+    const part = parts[i];
+    if (!part) continue;
+    if (i % 2 === 0) {
+      tokens.push({ type: 'text', content: part });
+      continue;
+    }
+    let type: InlineToken['type'];
+    let content: string;
+    if (part.startsWith('***')) {
+      type = 'strongem';
+      content = part.slice(3, -3);
+    } else if (part.startsWith('**')) {
+      type = 'strong';
+      content = part.slice(2, -2);
+    } else if (part.startsWith('`')) {
+      type = 'code';
+      content = part.slice(1, -1);
+    } else {
+      type = 'em';
+      content = part.slice(1, -1);
+    }
+    // Defensive: the pattern requires non-empty content between markers,
+    // but never emit an empty token — fall back to the literal text.
+    tokens.push(content ? { type, content } : { type: 'text', content: part });
+  }
+  return tokens;
+}
+
+function inlineMarkdownToHtml(text: string): string {
+  return parseInlineTokens(text)
+    .map((token) => {
+      const escaped = escapeHtml(token.content);
+      if (token.type === 'text') return escaped;
+      if (token.type === 'strongem') {
+        return `<strong><em>${escaped}</em></strong>`;
+      }
+      return `<${token.type}>${escaped}</${token.type}>`;
+    })
+    .join('');
+}
+
+export function markdownToHtml(content: string): string {
+  return parseMarkdownBlocks(content)
+    .map((block) => {
+      if (block.type === 'ul') {
+        const items = block.items.map((item) => `<li>${inlineMarkdownToHtml(item)}</li>`).join('');
+        return `<ul>${items}</ul>`;
+      }
+      return `<${block.type}>${inlineMarkdownToHtml(block.text)}</${block.type}>`;
+    })
+    .join('\n');
+}

pagebuilder/utils/mediaApi.ts

@@ -0,0 +1,112 @@
+/** Media library calls, upload progress, and srcset helpers. */
+
+import { BASE, CSRF_COOKIE, readCookie, request } from './request';
+import type {
+  MediaAssetRead,
+  MediaListQuery,
+  MediaListResponse,
+  UploadMediaOptions,
+} from './types';
+
+function buildMediaQuery(params: MediaListQuery | undefined): string {
+  if (!params) return '';
+  const qs = new URLSearchParams();
+  if (params.search !== undefined && params.search !== '') qs.set('search', params.search);
+  if (params.content_type) qs.set('content_type', params.content_type);
+  // Explicitly preserve `folder=""` — that's how the API expresses the
+  // "Unfiled" bucket. URLSearchParams keeps empty values as `key=`.
+  if (params.folder !== undefined) qs.set('folder', params.folder);
+  if (params.min_size_bytes !== undefined) qs.set('min_size_bytes', String(params.min_size_bytes));
+  if (params.max_size_bytes !== undefined) qs.set('max_size_bytes', String(params.max_size_bytes));
+  if (params.cursor !== undefined) qs.set('cursor', String(params.cursor));
+  if (params.offset !== undefined) qs.set('offset', String(params.offset));
+  if (params.limit !== undefined) qs.set('limit', String(params.limit));
+  const q = qs.toString();
+  return q ? `?${q}` : '';
+}
+
+export const listMedia = (params?: MediaListQuery) =>
+  request<MediaListResponse>(`/uploads${buildMediaQuery(params)}`);
+
+export const uploadMedia = (
+  file: File,
+  options: UploadMediaOptions = {},
+): Promise<MediaAssetRead> => {
+  const { folder, onProgress, signal } = options;
+  const body = new FormData();
+  body.append('file', file);
+  if (folder !== undefined && folder !== null && folder !== '') {
+    body.append('folder', folder);
+  }
+  // XHR (not fetch) is used here purely for the upload-progress event;
+  // fetch streams uploads in some browsers but exposes no progress
+  // callback. Everything else (CSRF header, cookies, error shape)
+  // mirrors the shared `request` helper.
+  if (!onProgress) {
+    return request<MediaAssetRead>('/uploads', { method: 'POST', body, signal });
+  }
+  return new Promise<MediaAssetRead>((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', `${BASE}/uploads`);
+    xhr.withCredentials = true;
+    xhr.responseType = 'text';
+    const token = readCookie(CSRF_COOKIE);
+    if (token) xhr.setRequestHeader('X-CSRF-Token', token);
+    xhr.setRequestHeader('Accept', 'application/json');
+    xhr.upload.onprogress = (e) => {
+      if (e.lengthComputable) onProgress(e.loaded, e.total);
+    };
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        try {
+          resolve(JSON.parse(xhr.responseText) as MediaAssetRead);
+        } catch (err) {
+          reject(err);
+        }
+      } else {
+        reject(new Error(`Request failed (${xhr.status}): ${xhr.responseText}`));
+      }
+    };
+    xhr.onerror = () => reject(new Error('Network error during upload'));
+    xhr.onabort = () => reject(new DOMException('Aborted', 'AbortError'));
+    if (signal) {
+      if (signal.aborted) {
+        xhr.abort();
+      } else {
+        signal.addEventListener('abort', () => xhr.abort(), { once: true });
+      }
+    }
+    xhr.send(body);
+  });
+};
+
+export const deleteMedia = (id: number) => request<void>(`/uploads/${id}`, { method: 'DELETE' });
+
+export const DEFAULT_IMAGE_SIZES = '(max-width: 768px) 100vw, 768px';
+
+export function buildSrcset(asset: MediaAssetRead): string {
+  return Object.values(asset.variants)
+    .slice()
+    .sort((a, b) => a.width - b.width)
+    .map((v) => `${v.url} ${v.width}w`)
+    .join(', ');
+}
+
+// Cache of MediaAssetRead objects emitted by the MediaPicker, keyed by
+// asset URL. The Image block's `resolveData` reads from this so the
+// auto-fill round-trip doesn't have to refetch the full list that the
+// picker just loaded. Falls back to a fresh `listMedia()` for URLs not
+// in the cache (manual entry, page reload, etc.).
+const pickedAssetCache = new Map<string, MediaAssetRead>();
+
+export function rememberPickedAsset(asset: MediaAssetRead): void {
+  pickedAssetCache.set(asset.url, asset);
+}
+
+export async function lookupAsset(url: string): Promise<MediaAssetRead | undefined> {
+  const cached = pickedAssetCache.get(url);
+  if (cached) return cached;
+  const { items } = await listMedia();
+  for (const item of items) pickedAssetCache.set(item.url, item);
+  return pickedAssetCache.get(url);
+}

pagebuilder/utils/mediaFormat.ts

@@ -0,0 +1,19 @@
+/** Formatting and parsing helpers for the media library UI. */
+
+export function formatBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / 1024 / 1024).toFixed(2)} MB`;
+}
+
+export function parseKB(raw: string): number | undefined {
+  const trimmed = raw.trim();
+  if (!trimmed) return undefined;
+  const n = Number(trimmed);
+  if (!Number.isFinite(n) || n < 0) return undefined;
+  return Math.round(n * 1024);
+}
+
+export function uploadKey(file: File): string {
+  return `${file.name}:${file.size}:${file.lastModified}:${Math.random().toString(36).slice(2, 8)}`;
+}