@realiizlabs/admin 0.8.2 → 0.9.1

package/dist/media/index.cjs

@@ -0,0 +1,95 @@
+"use client";
+'use strict';
+
+// src/media/errors.ts
+var MediaError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "MediaError";
+  }
+};
+var MESSAGES = {
+  type: "That file type isn\u2019t supported \u2014 use a JPG, PNG or WebP.",
+  size: "That picture is too big to send \u2014 pick one under 10MB.",
+  encode: "This browser can\u2019t prepare pictures \u2014 try Chrome, Edge or Safari 16+."
+};
+
+// src/media/resize.ts
+var ACCEPTED_TYPES = ["image/jpeg", "image/png", "image/webp", "image/gif"];
+var MAX_INPUT_BYTES = 10 * 1024 * 1024;
+function fitWithin(width, height, maxWidth) {
+  if (width <= maxWidth) return { width, height };
+  const ratio = maxWidth / width;
+  return { width: Math.round(width * ratio), height: Math.max(1, Math.round(height * ratio)) };
+}
+function checkInput(file) {
+  if (!ACCEPTED_TYPES.includes(file.type)) throw new MediaError(MESSAGES.type);
+  if (file.size > MAX_INPUT_BYTES) throw new MediaError(MESSAGES.size);
+}
+async function resizeImage(file, opts = {}) {
+  checkInput(file);
+  const { maxWidth = 1600, quality = 0.82, maxBytes = 600 * 1024 } = opts;
+  const bitmap = await decode(file);
+  const { width, height } = fitWithin(bitmap.width, bitmap.height, maxWidth);
+  const canvas = makeCanvas(width, height);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new MediaError(MESSAGES.encode);
+  ctx.drawImage(bitmap, 0, 0, width, height);
+  bitmap.close?.();
+  let q = quality;
+  let blob = await encode(canvas, q);
+  while (blob.size > maxBytes && q - 0.08 >= 0.5) {
+    q -= 0.08;
+    blob = await encode(canvas, q);
+  }
+  return { blob, width, height };
+}
+async function decode(file) {
+  try {
+    return await createImageBitmap(file);
+  } catch {
+    throw new MediaError(MESSAGES.encode);
+  }
+}
+function makeCanvas(width, height) {
+  if (typeof OffscreenCanvas !== "undefined") return new OffscreenCanvas(width, height);
+  const c = document.createElement("canvas");
+  c.width = width;
+  c.height = height;
+  return c;
+}
+async function encode(canvas, quality) {
+  const blob = "convertToBlob" in canvas ? await canvas.convertToBlob({ type: "image/webp", quality }).catch(() => null) : await new Promise((resolve) => canvas.toBlob(resolve, "image/webp", quality));
+  if (!blob || blob.type !== "image/webp") throw new MediaError(MESSAGES.encode);
+  return blob;
+}
+
+// src/media/paths.ts
+function slugifyName(name) {
+  const base = name.replace(/\.[a-z0-9]+$/i, "");
+  const s = base.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return s || "image";
+}
+function imagePathFor(kind, slug, originalName = "", opts = {}) {
+  const dir = (opts.publicDir ?? "/blog").replace(/\/$/, "");
+  switch (kind) {
+    case "hero":
+      return `${dir}/${slug}.webp`;
+    case "social":
+      return `${dir}/${slug}-social.webp`;
+    case "body":
+      return `${dir}/${slug}/${slugifyName(originalName)}.webp`;
+  }
+}
+
+exports.ACCEPTED_TYPES = ACCEPTED_TYPES;
+exports.MAX_INPUT_BYTES = MAX_INPUT_BYTES;
+exports.MEDIA_MESSAGES = MESSAGES;
+exports.MediaError = MediaError;
+exports.checkInput = checkInput;
+exports.fitWithin = fitWithin;
+exports.imagePathFor = imagePathFor;
+exports.resizeImage = resizeImage;
+exports.slugifyName = slugifyName;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/media/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/media/errors.ts","../../src/media/resize.ts","../../src/media/paths.ts"],"names":[],"mappings":";;;AACO,IAAM,UAAA,GAAN,cAAyB,KAAA,CAAM;AAAA,EACpC,YAAY,OAAA,EAAiB;AAC3B,IAAA,KAAA,CAAM,OAAO,CAAA;AACb,IAAA,IAAA,CAAK,IAAA,GAAO,YAAA;AAAA,EACd;AACF;AAEO,IAAM,QAAA,GAAW;AAAA,EACtB,IAAA,EAAM,oEAAA;AAAA,EACN,IAAA,EAAM,6DAAA;AAAA,EACN,MAAA,EAAQ;AACV;;;ACIO,IAAM,cAAA,GAAiB,CAAC,YAAA,EAAc,WAAA,EAAa,cAAc,WAAW;AAC5E,IAAM,eAAA,GAAkB,KAAK,IAAA,GAAO;AAkBpC,SAAS,SAAA,CAAU,KAAA,EAAe,MAAA,EAAgB,QAAA,EAAqD;AAC5G,EAAA,IAAI,KAAA,IAAS,QAAA,EAAU,OAAO,EAAE,OAAO,MAAA,EAAO;AAC9C,EAAA,MAAM,QAAQ,QAAA,GAAW,KAAA;AACzB,EAAA,OAAO,EAAE,KAAA,EAAO,IAAA,CAAK,KAAA,CAAM,KAAA,GAAQ,KAAK,CAAA,EAAG,MAAA,EAAQ,IAAA,CAAK,GAAA,CAAI,GAAG,IAAA,CAAK,KAAA,CAAM,MAAA,GAAS,KAAK,CAAC,CAAA,EAAE;AAC7F;AAGO,SAAS,WAAW,IAAA,EAA4C;AACrE,EAAA,IAAI,CAAE,cAAA,CAAqC,QAAA,CAAS,IAAA,CAAK,IAAI,GAAG,MAAM,IAAI,UAAA,CAAW,QAAA,CAAS,IAAI,CAAA;AAClG,EAAA,IAAI,KAAK,IAAA,GAAO,eAAA,QAAuB,IAAI,UAAA,CAAW,SAAS,IAAI,CAAA;AACrE;AAEA,eAAsB,WAAA,CAAY,IAAA,EAAY,IAAA,GAAsB,EAAC,EAA0B;AAC7F,EAAA,UAAA,CAAW,IAAI,CAAA;AACf,EAAA,MAAM,EAAE,WAAW,IAAA,EAAM,OAAA,GAAU,MAAM,QAAA,GAAW,GAAA,GAAM,MAAK,GAAI,IAAA;AAEnE,EAAA,MAAM,MAAA,GAAS,MAAM,MAAA,CAAO,IAAI,CAAA;AAChC,EAAA,MAAM,EAAE,OAAO,MAAA,EAAO,GAAI,UAAU,MAAA,CAAO,KAAA,EAAO,MAAA,CAAO,MAAA,EAAQ,QAAQ,CAAA;AACzE,EAAA,MAAM,MAAA,GAAS,UAAA,CAAW,KAAA,EAAO,MAAM,CAAA;AACvC,EAAA,MAAM,GAAA,GAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAA;AAClC,EAAA,IAAI,CAAC,GAAA,EAAK,MAAM,IAAI,UAAA,CAAW,SAAS,MAAM,CAAA;AAC9C,EAAA,GAAA,CAAI,SAAA,CAAU,MAAA,EAAQ,CAAA,EAAG,CAAA,EAAG,OAAO,MAAM,CAAA;AACzC,EAAA,MAAA,CAAO,KAAA,IAAQ;AAEf,EAAA,IAAI,CAAA,GAAI,OAAA;AACR,EAAA,IAAI,IAAA,GAAO,MAAM,MAAA,CAAO,MAAA,EAAQ,CAAC,CAAA;AACjC,EAAA,OAAO,IAAA,CAAK,IAAA,GAAO,QAAA,IAAY,CAAA,GAAI,QAAQ,GAAA,EAAK;AAC9C,IAAA,CAAA,IAAK,IAAA;AACL,IAAA,IAAA,GAAO,MAAM,MAAA,CAAO,MAAA,EAAQ,CAAC,CAAA;AAAA,EAC/B;AACA,EAAA,OAAO,EAAE,IAAA,EAAM,KAAA,EAAO,MAAA,EAAO;AAC/B;AAEA,eAAe,OAAO,IAAA,EAAkC;AACtD,EAAA,IAAI;AACF,IAAA,OAAO,MAAM,kBAAkB,IAAI,CAAA;AAAA,EACrC,CAAA,CAAA,MAAQ;AACN,IAAA,MAAM,IAAI,UAAA,CAAW,QAAA,CAAS,MAAM,CAAA;AAAA,EACtC;AACF;AAIA,SAAS,UAAA,CAAW,OAAe,MAAA,EAA2B;AAC5D,EAAA,IAAI,OAAO,eAAA,KAAoB,WAAA,SAAoB,IAAI,eAAA,CAAgB,OAAO,MAAM,CAAA;AACpF,EAAA,MAAM,CAAA,GAAI,QAAA,CAAS,aAAA,CAAc,QAAQ,CAAA;AACzC,EAAA,CAAA,CAAE,KAAA,GAAQ,KAAA;AACV,EAAA,CAAA,CAAE,MAAA,GAAS,MAAA;AACX,EAAA,OAAO,CAAA;AACT;AAEA,eAAe,MAAA,CAAO,QAAmB,OAAA,EAAgC;AACvE,EAAA,MAAM,IAAA,GACJ,eAAA,IAAmB,MAAA,GACf,MAAM,MAAA,CAAO,aAAA,CAAc,EAAE,IAAA,EAAM,YAAA,EAAc,OAAA,EAAS,CAAA,CAAE,KAAA,CAAM,MAAM,IAAI,CAAA,GAC5E,MAAM,IAAI,OAAA,CAAqB,CAAC,OAAA,KAAY,MAAA,CAAO,MAAA,CAAO,OAAA,EAAS,YAAA,EAAc,OAAO,CAAC,CAAA;AAC/F,EAAA,IAAI,CAAC,QAAQ,IAAA,CAAK,IAAA,KAAS,cAAc,MAAM,IAAI,UAAA,CAAW,QAAA,CAAS,MAAM,CAAA;AAC7E,EAAA,OAAO,IAAA;AACT;;;AC/EO,SAAS,YAAY,IAAA,EAAsB;AAChD,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,OAAA,CAAQ,eAAA,EAAiB,EAAE,CAAA;AAC7C,EAAA,MAAM,IAAI,IAAA,CACP,SAAA,CAAU,MAAM,CAAA,CAChB,QAAQ,QAAA,EAAU,EAAE,CAAA,CACpB,WAAA,GACA,OAAA,CAAQ,aAAA,EAAe,GAAG,CAAA,CAC1B,OAAA,CAAQ,YAAY,EAAE,CAAA;AACzB,EAAA,OAAO,CAAA,IAAK,OAAA;AACd;AAEO,SAAS,aAAa,IAAA,EAAiB,IAAA,EAAc,eAAe,EAAA,EAAI,IAAA,GAAoB,EAAC,EAAW;AAC7G,EAAA,MAAM,OAAO,IAAA,CAAK,SAAA,IAAa,OAAA,EAAS,OAAA,CAAQ,OAAO,EAAE,CAAA;AACzD,EAAA,QAAQ,IAAA;AAAM,IACZ,KAAK,MAAA;AACH,MAAA,OAAO,CAAA,EAAG,GAAG,CAAA,CAAA,EAAI,IAAI,CAAA,KAAA,CAAA;AAAA,IACvB,KAAK,QAAA;AACH,MAAA,OAAO,CAAA,EAAG,GAAG,CAAA,CAAA,EAAI,IAAI,CAAA,YAAA,CAAA;AAAA,IACvB,KAAK,MAAA;AACH,MAAA,OAAO,GAAG,GAAG,CAAA,CAAA,EAAI,IAAI,CAAA,CAAA,EAAI,WAAA,CAAY,YAAY,CAAC,CAAA,KAAA,CAAA;AAAA;AAExD","file":"index.cjs","sourcesContent":["/** A picture problem the person can act on. The message is the sentence shown under the control. */\nexport class MediaError extends Error {\n  constructor(message: string) {\n    super(message);\n    this.name = \"MediaError\";\n  }\n}\n\nexport const MESSAGES = {\n  type: \"That file type isn’t supported — use a JPG, PNG or WebP.\",\n  size: \"That picture is too big to send — pick one under 10MB.\",\n  encode: \"This browser can’t prepare pictures — try Chrome, Edge or Safari 16+.\",\n} as const;\n","/**\n * resizeImage — shrink a picture in the browser to web size, as WebP.\n *\n * Phone photos are 3–8MB; a Vercel server action body is capped at 4.5MB and the\n * GitHub API wants base64. So the shrink happens here, before anything leaves the\n * browser: decode → fit inside maxWidth → draw to a canvas → encode WebP, lowering\n * quality in steps until the result is under maxBytes. GIFs lose their animation\n * (a still frame is encoded) — acceptable for a blog.\n *\n * No network, no dependencies. Throws MediaError with a plain sentence for the\n * three things that can go wrong: wrong type, too big to even try, or a browser\n * that cannot encode WebP (toBlob returns null or a non-WebP type).\n */\n\nimport { MediaError, MESSAGES } from \"./errors\";\n\nexport const ACCEPTED_TYPES = [\"image/jpeg\", \"image/png\", \"image/webp\", \"image/gif\"] as const;\nexport const MAX_INPUT_BYTES = 10 * 1024 * 1024;\n\nexport interface ResizeOptions {\n  /** Longest allowed width in pixels. Default 1600. */\n  maxWidth?: number;\n  /** Starting WebP quality 0–1. Default 0.82. */\n  quality?: number;\n  /** Target ceiling for the encoded size. Default 600KB. */\n  maxBytes?: number;\n}\n\nexport interface ResizedImage {\n  blob: Blob;\n  width: number;\n  height: number;\n}\n\n/** Pure: fit (width × height) inside maxWidth, never scaling up, whole pixels. */\nexport function fitWithin(width: number, height: number, maxWidth: number): { width: number; height: number } {\n  if (width <= maxWidth) return { width, height };\n  const ratio = maxWidth / width;\n  return { width: Math.round(width * ratio), height: Math.max(1, Math.round(height * ratio)) };\n}\n\n/** The type/size guards, separated so they can run (and be tested) without a canvas. */\nexport function checkInput(file: { type: string; size: number }): void {\n  if (!(ACCEPTED_TYPES as readonly string[]).includes(file.type)) throw new MediaError(MESSAGES.type);\n  if (file.size > MAX_INPUT_BYTES) throw new MediaError(MESSAGES.size);\n}\n\nexport async function resizeImage(file: File, opts: ResizeOptions = {}): Promise<ResizedImage> {\n  checkInput(file);\n  const { maxWidth = 1600, quality = 0.82, maxBytes = 600 * 1024 } = opts;\n\n  const bitmap = await decode(file);\n  const { width, height } = fitWithin(bitmap.width, bitmap.height, maxWidth);\n  const canvas = makeCanvas(width, height);\n  const ctx = canvas.getContext(\"2d\");\n  if (!ctx) throw new MediaError(MESSAGES.encode);\n  ctx.drawImage(bitmap, 0, 0, width, height);\n  bitmap.close?.();\n\n  let q = quality;\n  let blob = await encode(canvas, q);\n  while (blob.size > maxBytes && q - 0.08 >= 0.5) {\n    q -= 0.08;\n    blob = await encode(canvas, q);\n  }\n  return { blob, width, height };\n}\n\nasync function decode(file: File): Promise<ImageBitmap> {\n  try {\n    return await createImageBitmap(file);\n  } catch {\n    throw new MediaError(MESSAGES.encode);\n  }\n}\n\ntype AnyCanvas = HTMLCanvasElement | OffscreenCanvas;\n\nfunction makeCanvas(width: number, height: number): AnyCanvas {\n  if (typeof OffscreenCanvas !== \"undefined\") return new OffscreenCanvas(width, height);\n  const c = document.createElement(\"canvas\");\n  c.width = width;\n  c.height = height;\n  return c;\n}\n\nasync function encode(canvas: AnyCanvas, quality: number): Promise<Blob> {\n  const blob =\n    \"convertToBlob\" in canvas\n      ? await canvas.convertToBlob({ type: \"image/webp\", quality }).catch(() => null)\n      : await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, \"image/webp\", quality));\n  if (!blob || blob.type !== \"image/webp\") throw new MediaError(MESSAGES.encode);\n  return blob;\n}\n","/**\n * Where a picture lives, decided from the post's slug so the path is known before\n * anything is committed: hero → /blog/{slug}.webp, social → /blog/{slug}-social.webp,\n * body → /blog/{slug}/{name}.webp. The host commits the file under public/ + path.\n */\n\nexport type ImageKind = \"hero\" | \"social\" | \"body\";\n\nexport interface PathOptions {\n  /** URL prefix the pictures are served from. Default \"/blog\". */\n  publicDir?: string;\n}\n\n/** Lower-case letters, digits and single hyphens; empty in → \"image\". */\nexport function slugifyName(name: string): string {\n  const base = name.replace(/\\.[a-z0-9]+$/i, \"\");\n  const s = base\n    .normalize(\"NFKD\")\n    .replace(/[̀-ͯ]/g, \"\")\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-+|-+$/g, \"\");\n  return s || \"image\";\n}\n\nexport function imagePathFor(kind: ImageKind, slug: string, originalName = \"\", opts: PathOptions = {}): string {\n  const dir = (opts.publicDir ?? \"/blog\").replace(/\\/$/, \"\");\n  switch (kind) {\n    case \"hero\":\n      return `${dir}/${slug}.webp`;\n    case \"social\":\n      return `${dir}/${slug}-social.webp`;\n    case \"body\":\n      return `${dir}/${slug}/${slugifyName(originalName)}.webp`;\n  }\n}\n"]}

package/dist/media/index.d.cts

@@ -0,0 +1,65 @@
+/**
+ * resizeImage — shrink a picture in the browser to web size, as WebP.
+ *
+ * Phone photos are 3–8MB; a Vercel server action body is capped at 4.5MB and the
+ * GitHub API wants base64. So the shrink happens here, before anything leaves the
+ * browser: decode → fit inside maxWidth → draw to a canvas → encode WebP, lowering
+ * quality in steps until the result is under maxBytes. GIFs lose their animation
+ * (a still frame is encoded) — acceptable for a blog.
+ *
+ * No network, no dependencies. Throws MediaError with a plain sentence for the
+ * three things that can go wrong: wrong type, too big to even try, or a browser
+ * that cannot encode WebP (toBlob returns null or a non-WebP type).
+ */
+declare const ACCEPTED_TYPES: readonly ["image/jpeg", "image/png", "image/webp", "image/gif"];
+declare const MAX_INPUT_BYTES: number;
+interface ResizeOptions {
+    /** Longest allowed width in pixels. Default 1600. */
+    maxWidth?: number;
+    /** Starting WebP quality 0–1. Default 0.82. */
+    quality?: number;
+    /** Target ceiling for the encoded size. Default 600KB. */
+    maxBytes?: number;
+}
+interface ResizedImage {
+    blob: Blob;
+    width: number;
+    height: number;
+}
+/** Pure: fit (width × height) inside maxWidth, never scaling up, whole pixels. */
+declare function fitWithin(width: number, height: number, maxWidth: number): {
+    width: number;
+    height: number;
+};
+/** The type/size guards, separated so they can run (and be tested) without a canvas. */
+declare function checkInput(file: {
+    type: string;
+    size: number;
+}): void;
+declare function resizeImage(file: File, opts?: ResizeOptions): Promise<ResizedImage>;
+
+/**
+ * Where a picture lives, decided from the post's slug so the path is known before
+ * anything is committed: hero → /blog/{slug}.webp, social → /blog/{slug}-social.webp,
+ * body → /blog/{slug}/{name}.webp. The host commits the file under public/ + path.
+ */
+type ImageKind = "hero" | "social" | "body";
+interface PathOptions {
+    /** URL prefix the pictures are served from. Default "/blog". */
+    publicDir?: string;
+}
+/** Lower-case letters, digits and single hyphens; empty in → "image". */
+declare function slugifyName(name: string): string;
+declare function imagePathFor(kind: ImageKind, slug: string, originalName?: string, opts?: PathOptions): string;
+
+/** A picture problem the person can act on. The message is the sentence shown under the control. */
+declare class MediaError extends Error {
+    constructor(message: string);
+}
+declare const MESSAGES: {
+    readonly type: "That file type isn’t supported — use a JPG, PNG or WebP.";
+    readonly size: "That picture is too big to send — pick one under 10MB.";
+    readonly encode: "This browser can’t prepare pictures — try Chrome, Edge or Safari 16+.";
+};
+
+export { ACCEPTED_TYPES, type ImageKind, MAX_INPUT_BYTES, MESSAGES as MEDIA_MESSAGES, MediaError, type PathOptions, type ResizeOptions, type ResizedImage, checkInput, fitWithin, imagePathFor, resizeImage, slugifyName };

package/dist/media/index.d.ts

@@ -0,0 +1,65 @@
+/**
+ * resizeImage — shrink a picture in the browser to web size, as WebP.
+ *
+ * Phone photos are 3–8MB; a Vercel server action body is capped at 4.5MB and the
+ * GitHub API wants base64. So the shrink happens here, before anything leaves the
+ * browser: decode → fit inside maxWidth → draw to a canvas → encode WebP, lowering
+ * quality in steps until the result is under maxBytes. GIFs lose their animation
+ * (a still frame is encoded) — acceptable for a blog.
+ *
+ * No network, no dependencies. Throws MediaError with a plain sentence for the
+ * three things that can go wrong: wrong type, too big to even try, or a browser
+ * that cannot encode WebP (toBlob returns null or a non-WebP type).
+ */
+declare const ACCEPTED_TYPES: readonly ["image/jpeg", "image/png", "image/webp", "image/gif"];
+declare const MAX_INPUT_BYTES: number;
+interface ResizeOptions {
+    /** Longest allowed width in pixels. Default 1600. */
+    maxWidth?: number;
+    /** Starting WebP quality 0–1. Default 0.82. */
+    quality?: number;
+    /** Target ceiling for the encoded size. Default 600KB. */
+    maxBytes?: number;
+}
+interface ResizedImage {
+    blob: Blob;
+    width: number;
+    height: number;
+}
+/** Pure: fit (width × height) inside maxWidth, never scaling up, whole pixels. */
+declare function fitWithin(width: number, height: number, maxWidth: number): {
+    width: number;
+    height: number;
+};
+/** The type/size guards, separated so they can run (and be tested) without a canvas. */
+declare function checkInput(file: {
+    type: string;
+    size: number;
+}): void;
+declare function resizeImage(file: File, opts?: ResizeOptions): Promise<ResizedImage>;
+
+/**
+ * Where a picture lives, decided from the post's slug so the path is known before
+ * anything is committed: hero → /blog/{slug}.webp, social → /blog/{slug}-social.webp,
+ * body → /blog/{slug}/{name}.webp. The host commits the file under public/ + path.
+ */
+type ImageKind = "hero" | "social" | "body";
+interface PathOptions {
+    /** URL prefix the pictures are served from. Default "/blog". */
+    publicDir?: string;
+}
+/** Lower-case letters, digits and single hyphens; empty in → "image". */
+declare function slugifyName(name: string): string;
+declare function imagePathFor(kind: ImageKind, slug: string, originalName?: string, opts?: PathOptions): string;
+
+/** A picture problem the person can act on. The message is the sentence shown under the control. */
+declare class MediaError extends Error {
+    constructor(message: string);
+}
+declare const MESSAGES: {
+    readonly type: "That file type isn’t supported — use a JPG, PNG or WebP.";
+    readonly size: "That picture is too big to send — pick one under 10MB.";
+    readonly encode: "This browser can’t prepare pictures — try Chrome, Edge or Safari 16+.";
+};
+
+export { ACCEPTED_TYPES, type ImageKind, MAX_INPUT_BYTES, MESSAGES as MEDIA_MESSAGES, MediaError, type PathOptions, type ResizeOptions, type ResizedImage, checkInput, fitWithin, imagePathFor, resizeImage, slugifyName };

package/dist/media/index.js

@@ -0,0 +1,85 @@
+"use client";
+// src/media/errors.ts
+var MediaError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "MediaError";
+  }
+};
+var MESSAGES = {
+  type: "That file type isn\u2019t supported \u2014 use a JPG, PNG or WebP.",
+  size: "That picture is too big to send \u2014 pick one under 10MB.",
+  encode: "This browser can\u2019t prepare pictures \u2014 try Chrome, Edge or Safari 16+."
+};
+
+// src/media/resize.ts
+var ACCEPTED_TYPES = ["image/jpeg", "image/png", "image/webp", "image/gif"];
+var MAX_INPUT_BYTES = 10 * 1024 * 1024;
+function fitWithin(width, height, maxWidth) {
+  if (width <= maxWidth) return { width, height };
+  const ratio = maxWidth / width;
+  return { width: Math.round(width * ratio), height: Math.max(1, Math.round(height * ratio)) };
+}
+function checkInput(file) {
+  if (!ACCEPTED_TYPES.includes(file.type)) throw new MediaError(MESSAGES.type);
+  if (file.size > MAX_INPUT_BYTES) throw new MediaError(MESSAGES.size);
+}
+async function resizeImage(file, opts = {}) {
+  checkInput(file);
+  const { maxWidth = 1600, quality = 0.82, maxBytes = 600 * 1024 } = opts;
+  const bitmap = await decode(file);
+  const { width, height } = fitWithin(bitmap.width, bitmap.height, maxWidth);
+  const canvas = makeCanvas(width, height);
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new MediaError(MESSAGES.encode);
+  ctx.drawImage(bitmap, 0, 0, width, height);
+  bitmap.close?.();
+  let q = quality;
+  let blob = await encode(canvas, q);
+  while (blob.size > maxBytes && q - 0.08 >= 0.5) {
+    q -= 0.08;
+    blob = await encode(canvas, q);
+  }
+  return { blob, width, height };
+}
+async function decode(file) {
+  try {
+    return await createImageBitmap(file);
+  } catch {
+    throw new MediaError(MESSAGES.encode);
+  }
+}
+function makeCanvas(width, height) {
+  if (typeof OffscreenCanvas !== "undefined") return new OffscreenCanvas(width, height);
+  const c = document.createElement("canvas");
+  c.width = width;
+  c.height = height;
+  return c;
+}
+async function encode(canvas, quality) {
+  const blob = "convertToBlob" in canvas ? await canvas.convertToBlob({ type: "image/webp", quality }).catch(() => null) : await new Promise((resolve) => canvas.toBlob(resolve, "image/webp", quality));
+  if (!blob || blob.type !== "image/webp") throw new MediaError(MESSAGES.encode);
+  return blob;
+}
+
+// src/media/paths.ts
+function slugifyName(name) {
+  const base = name.replace(/\.[a-z0-9]+$/i, "");
+  const s = base.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+  return s || "image";
+}
+function imagePathFor(kind, slug, originalName = "", opts = {}) {
+  const dir = (opts.publicDir ?? "/blog").replace(/\/$/, "");
+  switch (kind) {
+    case "hero":
+      return `${dir}/${slug}.webp`;
+    case "social":
+      return `${dir}/${slug}-social.webp`;
+    case "body":
+      return `${dir}/${slug}/${slugifyName(originalName)}.webp`;
+  }
+}
+
+export { ACCEPTED_TYPES, MAX_INPUT_BYTES, MESSAGES as MEDIA_MESSAGES, MediaError, checkInput, fitWithin, imagePathFor, resizeImage, slugifyName };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/media/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/media/errors.ts","../../src/media/resize.ts","../../src/media/paths.ts"],"names":[],"mappings":"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","file":"index.js","sourcesContent":["/** A picture problem the person can act on. The message is the sentence shown under the control. */\nexport class MediaError extends Error {\n  constructor(message: string) {\n    super(message);\n    this.name = \"MediaError\";\n  }\n}\n\nexport const MESSAGES = {\n  type: \"That file type isn’t supported — use a JPG, PNG or WebP.\",\n  size: \"That picture is too big to send — pick one under 10MB.\",\n  encode: \"This browser can’t prepare pictures — try Chrome, Edge or Safari 16+.\",\n} as const;\n","/**\n * resizeImage — shrink a picture in the browser to web size, as WebP.\n *\n * Phone photos are 3–8MB; a Vercel server action body is capped at 4.5MB and the\n * GitHub API wants base64. So the shrink happens here, before anything leaves the\n * browser: decode → fit inside maxWidth → draw to a canvas → encode WebP, lowering\n * quality in steps until the result is under maxBytes. GIFs lose their animation\n * (a still frame is encoded) — acceptable for a blog.\n *\n * No network, no dependencies. Throws MediaError with a plain sentence for the\n * three things that can go wrong: wrong type, too big to even try, or a browser\n * that cannot encode WebP (toBlob returns null or a non-WebP type).\n */\n\nimport { MediaError, MESSAGES } from \"./errors\";\n\nexport const ACCEPTED_TYPES = [\"image/jpeg\", \"image/png\", \"image/webp\", \"image/gif\"] as const;\nexport const MAX_INPUT_BYTES = 10 * 1024 * 1024;\n\nexport interface ResizeOptions {\n  /** Longest allowed width in pixels. Default 1600. */\n  maxWidth?: number;\n  /** Starting WebP quality 0–1. Default 0.82. */\n  quality?: number;\n  /** Target ceiling for the encoded size. Default 600KB. */\n  maxBytes?: number;\n}\n\nexport interface ResizedImage {\n  blob: Blob;\n  width: number;\n  height: number;\n}\n\n/** Pure: fit (width × height) inside maxWidth, never scaling up, whole pixels. */\nexport function fitWithin(width: number, height: number, maxWidth: number): { width: number; height: number } {\n  if (width <= maxWidth) return { width, height };\n  const ratio = maxWidth / width;\n  return { width: Math.round(width * ratio), height: Math.max(1, Math.round(height * ratio)) };\n}\n\n/** The type/size guards, separated so they can run (and be tested) without a canvas. */\nexport function checkInput(file: { type: string; size: number }): void {\n  if (!(ACCEPTED_TYPES as readonly string[]).includes(file.type)) throw new MediaError(MESSAGES.type);\n  if (file.size > MAX_INPUT_BYTES) throw new MediaError(MESSAGES.size);\n}\n\nexport async function resizeImage(file: File, opts: ResizeOptions = {}): Promise<ResizedImage> {\n  checkInput(file);\n  const { maxWidth = 1600, quality = 0.82, maxBytes = 600 * 1024 } = opts;\n\n  const bitmap = await decode(file);\n  const { width, height } = fitWithin(bitmap.width, bitmap.height, maxWidth);\n  const canvas = makeCanvas(width, height);\n  const ctx = canvas.getContext(\"2d\");\n  if (!ctx) throw new MediaError(MESSAGES.encode);\n  ctx.drawImage(bitmap, 0, 0, width, height);\n  bitmap.close?.();\n\n  let q = quality;\n  let blob = await encode(canvas, q);\n  while (blob.size > maxBytes && q - 0.08 >= 0.5) {\n    q -= 0.08;\n    blob = await encode(canvas, q);\n  }\n  return { blob, width, height };\n}\n\nasync function decode(file: File): Promise<ImageBitmap> {\n  try {\n    return await createImageBitmap(file);\n  } catch {\n    throw new MediaError(MESSAGES.encode);\n  }\n}\n\ntype AnyCanvas = HTMLCanvasElement | OffscreenCanvas;\n\nfunction makeCanvas(width: number, height: number): AnyCanvas {\n  if (typeof OffscreenCanvas !== \"undefined\") return new OffscreenCanvas(width, height);\n  const c = document.createElement(\"canvas\");\n  c.width = width;\n  c.height = height;\n  return c;\n}\n\nasync function encode(canvas: AnyCanvas, quality: number): Promise<Blob> {\n  const blob =\n    \"convertToBlob\" in canvas\n      ? await canvas.convertToBlob({ type: \"image/webp\", quality }).catch(() => null)\n      : await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, \"image/webp\", quality));\n  if (!blob || blob.type !== \"image/webp\") throw new MediaError(MESSAGES.encode);\n  return blob;\n}\n","/**\n * Where a picture lives, decided from the post's slug so the path is known before\n * anything is committed: hero → /blog/{slug}.webp, social → /blog/{slug}-social.webp,\n * body → /blog/{slug}/{name}.webp. The host commits the file under public/ + path.\n */\n\nexport type ImageKind = \"hero\" | \"social\" | \"body\";\n\nexport interface PathOptions {\n  /** URL prefix the pictures are served from. Default \"/blog\". */\n  publicDir?: string;\n}\n\n/** Lower-case letters, digits and single hyphens; empty in → \"image\". */\nexport function slugifyName(name: string): string {\n  const base = name.replace(/\\.[a-z0-9]+$/i, \"\");\n  const s = base\n    .normalize(\"NFKD\")\n    .replace(/[̀-ͯ]/g, \"\")\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-+|-+$/g, \"\");\n  return s || \"image\";\n}\n\nexport function imagePathFor(kind: ImageKind, slug: string, originalName = \"\", opts: PathOptions = {}): string {\n  const dir = (opts.publicDir ?? \"/blog\").replace(/\\/$/, \"\");\n  switch (kind) {\n    case \"hero\":\n      return `${dir}/${slug}.webp`;\n    case \"social\":\n      return `${dir}/${slug}-social.webp`;\n    case \"body\":\n      return `${dir}/${slug}/${slugifyName(originalName)}.webp`;\n  }\n}\n"]}

package/dist/shell/index.cjs

@@ -51,8 +51,12 @@ function Icon({ name }) {
       ] });
     case "settings":
       return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "3" }),
-        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z" })
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 7h9" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16", cy: "7", r: "2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 7h1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 17h9" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16", cy: "17", r: "2" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 17h1" })
       ] });
     default:
       return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...base, children: [
@@ -70,7 +74,7 @@ function isActive(item, activeHref, basePath) {
   if (item.href === basePath) return activeHref === basePath || activeHref === `${basePath}/`;
   return activeHref === item.href || activeHref.startsWith(`${item.href}/`);
 }
-function Sidebar({ items, activeHref, basePath }) {
+function Sidebar({ items, pinned = [], activeHref, basePath }) {
   const [collapsed, setCollapsed] = react.useState(false);
   react.useEffect(() => {
     try {
@@ -86,30 +90,32 @@ function Sidebar({ items, activeHref, basePath }) {
     } catch {
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: ["rz-sidebar", collapsed && "rz-sidebar--collapsed"].filter(Boolean).join(" "), "aria-label": "Admin navigation", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "rz-sidebar__nav", children: items.map((item) => {
-      const active = !item.disabled && isActive(item, activeHref, basePath);
-      if (item.disabled) {
-        return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rz-sidebar__item rz-sidebar__item--disabled", "aria-disabled": "true", title: collapsed ? `${item.label} \u2014 coming soon` : "Coming soon", children: [
+  const renderItem = (item) => {
+    const active = !item.disabled && isActive(item, activeHref, basePath);
+    if (item.disabled) {
+      return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rz-sidebar__item rz-sidebar__item--disabled", "aria-disabled": "true", title: collapsed ? `${item.label} \u2014 coming soon` : "Coming soon", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: iconFor(item.icon ?? item.id) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-sidebar__label", children: item.label })
+      ] }, item.id);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        href: item.href,
+        className: ["rz-sidebar__item", active && "rz-sidebar__item--active"].filter(Boolean).join(" "),
+        "aria-current": active ? "page" : void 0,
+        title: collapsed ? item.label : void 0,
+        children: [
           /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: iconFor(item.icon ?? item.id) }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-sidebar__label", children: item.label })
-        ] }, item.id);
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "a",
-        {
-          href: item.href,
-          className: ["rz-sidebar__item", active && "rz-sidebar__item--active"].filter(Boolean).join(" "),
-          "aria-current": active ? "page" : void 0,
-          title: collapsed ? item.label : void 0,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: iconFor(item.icon ?? item.id) }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-sidebar__label", children: item.label })
-          ]
-        },
-        item.id
-      );
-    }) }),
+        ]
+      },
+      item.id
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: ["rz-sidebar", collapsed && "rz-sidebar--collapsed"].filter(Boolean).join(" "), "aria-label": "Admin navigation", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "rz-sidebar__nav", children: items.map(renderItem) }),
+    pinned.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "rz-sidebar__pinned", "aria-label": "Settings", children: pinned.map(renderItem) }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -278,6 +284,8 @@ var SHELL_CSS = `
 .rz-admin a { color: inherit; }
 .rz-admin h1, .rz-admin h2, .rz-admin h3 { font-family: var(--rz-font-display); color: var(--text-primary); margin: 0; }
 .rz-admin .realiiz-form__control { background: var(--surface-0); }
+.rz-admin .realiiz-image { background: var(--surface-0); }
+.rz-admin .realiiz-image__thumb { background: var(--surface-2); }
 .rz-admin[data-theme="dark"] .realiiz-form__control::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); }
 .rz-admin .realiiz-form__button { background: var(--surface-1); color: var(--text-primary); }
 .rz-admin .realiiz-form__button--primary { background: var(--signal); color: var(--signal-fg); }
@@ -301,6 +309,7 @@ var SHELL_CSS = `
 .rz-sidebar__item--disabled, .rz-sidebar__item--disabled:hover { color: var(--text-muted); opacity: .55; background: transparent; cursor: default; }
 .rz-sidebar--collapsed .rz-sidebar__item { justify-content: center; padding: .55rem 0; }
 .rz-sidebar--collapsed .rz-sidebar__label { display: none; }
+.rz-sidebar__pinned { border-top: 1px solid var(--separator); padding: .3rem 0; }
 .rz-sidebar__collapse { display: flex; align-items: center; gap: .7rem; padding: .6rem 1rem; border: 0; border-top: 1px solid var(--separator); background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: .8rem; text-align: left; }
 .rz-sidebar__collapse:hover { color: var(--text-primary); }
 .rz-sidebar__collapse svg { flex-shrink: 0; }
@@ -411,6 +420,7 @@ var SHELL_CSS = `
   .rz-sidebar__item { flex-direction: column; gap: .2rem; font-size: .6875rem; padding: .4rem .6rem; border-radius: 6px; }
   .rz-sidebar--collapsed .rz-sidebar__label { display: block; }
   .rz-sidebar__collapse { display: none; }
+  .rz-sidebar__pinned { display: flex; border-top: 0; padding: .35rem .25rem; }
   .rz-topbar__greeting { display: none; }
   .rz-content { padding: 18px 14px 60px; }
   /* The sidebar is a top strip now, so it must not be sticky-height; the topbar stays pinned. */
@@ -483,6 +493,7 @@ function AdminShell({
   user,
   role,
   nav,
+  pinnedNav,
   activeHref,
   basePath = "/admin",
   signOutPath,
@@ -508,7 +519,7 @@ function AdminShell({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-body", children: [
-      showNav && /* @__PURE__ */ jsxRuntime.jsx(Sidebar, { items: nav, activeHref, basePath }),
+      showNav && /* @__PURE__ */ jsxRuntime.jsx(Sidebar, { items: nav, pinned: pinnedNav, activeHref, basePath }),
       /* @__PURE__ */ jsxRuntime.jsx("main", { className: "rz-main", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rz-content", children }) })
     ] })
   ] });