@djangocfg/nextjs 2.1.627 → 2.1.628

package/dist/app-icon/index.d.mts

@@ -0,0 +1,11 @@
+export { A as AppIconGlyph, a as AppIconOptions, b as AppIconShape, I as IconNode, c as appIconElement, d as appIconGradient, o as oklchToHex } from '../element-DhDVWCha.mjs';
+import 'react';
+
+/** The manifest's `icons` for an app that serves `createAppIcon` at `app/icon.tsx`. Pass it to `createManifest({ icons })`. */
+declare const appIconPaths: {
+    readonly logo192: "/icon/192";
+    readonly logo384: "/icon/384";
+    readonly logo512: "/icon/512";
+};
+
+export { appIconPaths };

package/dist/app-icon/index.mjs

@@ -0,0 +1,66 @@
+// src/app-icon/element.ts
+import { createElement } from "react";
+function oklchToHex(l, c, h) {
+  const a = c * Math.cos(h * Math.PI / 180);
+  const b = c * Math.sin(h * Math.PI / 180);
+  const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  const lin = [
+    4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_,
+    -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_,
+    -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_
+  ];
+  const hex = lin.map((v) => {
+    const g = v <= 31308e-7 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055;
+    return Math.round(Math.min(1, Math.max(0, g)) * 255).toString(16).padStart(2, "0");
+  });
+  return `#${hex.join("")}`;
+}
+function appIconGradient(hue) {
+  return `linear-gradient(150deg, ${oklchToHex(0.66, 0.17, hue)}, ${oklchToHex(0.47, 0.18, hue + 22)})`;
+}
+function nodesOf(glyph) {
+  if (Array.isArray(glyph)) return glyph;
+  const node = glyph.__iconData?.node;
+  if (!node) throw new Error("app-icon: glyph is not a lucide icon module (expected `import * as x from 'lucide-react/icons/<name>'`)");
+  return node;
+}
+function appIconElement({ glyph, hue, size, shape = "rounded" }) {
+  const square = shape === "square";
+  const side = Math.round(size * (square ? 0.46 : 0.58));
+  const glyphSvg = createElement(
+    "svg",
+    { width: side, height: side, viewBox: "0 0 24 24", fill: "none", stroke: "#ffffff", strokeWidth: 2.1, strokeLinecap: "round", strokeLinejoin: "round" },
+    ...nodesOf(glyph).map(([tag, { key, ...attrs }]) => createElement(tag, { key, ...attrs }))
+  );
+  return createElement(
+    "div",
+    {
+      style: {
+        width: size,
+        height: size,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundImage: appIconGradient(hue),
+        borderRadius: square ? 0 : Math.round(size * 0.225)
+      }
+    },
+    glyphSvg
+  );
+}
+
+// src/app-icon/paths.ts
+var appIconPaths = {
+  logo192: "/icon/192",
+  logo384: "/icon/384",
+  logo512: "/icon/512"
+};
+export {
+  appIconElement,
+  appIconGradient,
+  appIconPaths,
+  oklchToHex
+};
+//# sourceMappingURL=index.mjs.map

package/dist/app-icon/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/app-icon/element.ts","../../src/app-icon/paths.ts"],"sourcesContent":["/**\n * App icon: ONE definition of the picture an app shows in a tab, on a home screen and as a PWA icon.\n *\n * House style: a full-bleed tile in the product's hue (a two-stop gradient), a white lucide glyph in the inner ~46-58%,\n * and NO border near the edge. The OS cuts its own corner (iOS ~22%, Android a mask); anything drawn at the edge never\n * matches that curve.\n *\n * Pure: plain host elements only (`next/og` renders nothing else) and no `next/og` import, so a client bundle can use\n * the same gradient for an in-app tile. The route factory lives in `./next`.\n */\n\nimport { createElement, type ReactElement } from 'react';\n\n/** What lucide stores for an icon: `[tag, attrs][]`; `attrs.key` is React's key. */\nexport type IconNode = [tag: string, attrs: Record<string, string>][];\n\n/**\n * A glyph is a lucide icon MODULE, `import * as workflow from 'lucide-react/icons/workflow'` (a lucide component is a\n * client component and `next/og` cannot render it, so its drawing data is read from the module), or the node list itself.\n */\nexport type AppIconGlyph = object | IconNode;\n\nexport type AppIconShape = 'rounded' | 'square';\n\nexport interface AppIconOptions {\n  glyph: AppIconGlyph;\n  /** OKLCH hue, 0-360. The switcher tile should use `appIconGradient(hue)` so both agree. */\n  hue: number;\n  /** Side in px. */\n  size: number;\n  /** `rounded`: transparent corners (browser tab). `square`: full-bleed for iOS and maskable PWA icons. @default 'rounded' */\n  shape?: AppIconShape;\n}\n\n/** OKLCH to sRGB hex. `next/og` does not parse `oklch()`; CSS does, and the two must show the same colour. */\nexport function oklchToHex(l: number, c: number, h: number): string {\n  const a = c * Math.cos((h * Math.PI) / 180);\n  const b = c * Math.sin((h * Math.PI) / 180);\n  const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;\n  const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;\n  const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;\n  const lin = [\n    4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_,\n    -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_,\n    -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_,\n  ];\n  const hex = lin.map((v) => {\n    const g = v <= 0.0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055;\n    return Math.round(Math.min(1, Math.max(0, g)) * 255).toString(16).padStart(2, '0');\n  });\n  return `#${hex.join('')}`;\n}\n\n/** The gradient behind a glyph, two hex stops from one hue. */\nexport function appIconGradient(hue: number): string {\n  return `linear-gradient(150deg, ${oklchToHex(0.66, 0.17, hue)}, ${oklchToHex(0.47, 0.18, hue + 22)})`;\n}\n\nfunction nodesOf(glyph: AppIconGlyph): IconNode {\n  if (Array.isArray(glyph)) return glyph as IconNode;\n  const node = (glyph as { __iconData?: { node?: IconNode } }).__iconData?.node;\n  if (!node) throw new Error(\"app-icon: glyph is not a lucide icon module (expected `import * as x from 'lucide-react/icons/<name>'`)\");\n  return node;\n}\n\n/** The picture as plain JSX, for `new ImageResponse(...)`. */\nexport function appIconElement({ glyph, hue, size, shape = 'rounded' }: AppIconOptions): ReactElement {\n  const square = shape === 'square';\n  // A square icon is cropped by the OS: keep the glyph inside the maskable safe zone (the inner 60%).\n  const side = Math.round(size * (square ? 0.46 : 0.58));\n  const glyphSvg = createElement(\n    'svg',\n    { width: side, height: side, viewBox: '0 0 24 24', fill: 'none', stroke: '#ffffff', strokeWidth: 2.1, strokeLinecap: 'round', strokeLinejoin: 'round' },\n    ...nodesOf(glyph).map(([tag, { key, ...attrs }]) => createElement(tag, { key, ...attrs })),\n  );\n  return createElement(\n    'div',\n    {\n      style: {\n        width: size,\n        height: size,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundImage: appIconGradient(hue),\n        borderRadius: square ? 0 : Math.round(size * 0.225),\n      },\n    },\n    glyphSvg,\n  );\n}\n","/** The manifest's `icons` for an app that serves `createAppIcon` at `app/icon.tsx`. Pass it to `createManifest({ icons })`. */\nexport const appIconPaths = {\n  logo192: '/icon/192',\n  logo384: '/icon/384',\n  logo512: '/icon/512',\n} as const;\n"],"mappings":";AAWA,SAAS,qBAAwC;AAwB1C,SAAS,WAAW,GAAW,GAAW,GAAmB;AAClE,QAAM,IAAI,IAAI,KAAK,IAAK,IAAI,KAAK,KAAM,GAAG;AAC1C,QAAM,IAAI,IAAI,KAAK,IAAK,IAAI,KAAK,KAAM,GAAG;AAC1C,QAAM,MAAM,IAAI,eAAe,IAAI,eAAe,MAAM;AACxD,QAAM,MAAM,IAAI,eAAe,IAAI,eAAe,MAAM;AACxD,QAAM,MAAM,IAAI,eAAe,IAAI,cAAc,MAAM;AACvD,QAAM,MAAM;AAAA,IACV,eAAe,KAAK,eAAe,KAAK,eAAe;AAAA,IACvD,gBAAgB,KAAK,eAAe,KAAK,eAAe;AAAA,IACxD,gBAAgB,KAAK,eAAe,KAAK,cAAc;AAAA,EACzD;AACA,QAAM,MAAM,IAAI,IAAI,CAAC,MAAM;AACzB,UAAM,IAAI,KAAK,WAAY,QAAQ,IAAI,QAAQ,MAAM,IAAI,OAAO;AAChE,WAAO,KAAK,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,CAAC,CAAC,IAAI,GAAG,EAAE,SAAS,EAAE,EAAE,SAAS,GAAG,GAAG;AAAA,EACnF,CAAC;AACD,SAAO,IAAI,IAAI,KAAK,EAAE,CAAC;AACzB;AAGO,SAAS,gBAAgB,KAAqB;AACnD,SAAO,2BAA2B,WAAW,MAAM,MAAM,GAAG,CAAC,KAAK,WAAW,MAAM,MAAM,MAAM,EAAE,CAAC;AACpG;AAEA,SAAS,QAAQ,OAA+B;AAC9C,MAAI,MAAM,QAAQ,KAAK,EAAG,QAAO;AACjC,QAAM,OAAQ,MAA+C,YAAY;AACzE,MAAI,CAAC,KAAM,OAAM,IAAI,MAAM,yGAAyG;AACpI,SAAO;AACT;AAGO,SAAS,eAAe,EAAE,OAAO,KAAK,MAAM,QAAQ,UAAU,GAAiC;AACpG,QAAM,SAAS,UAAU;AAEzB,QAAM,OAAO,KAAK,MAAM,QAAQ,SAAS,OAAO,KAAK;AACrD,QAAM,WAAW;AAAA,IACf;AAAA,IACA,EAAE,OAAO,MAAM,QAAQ,MAAM,SAAS,aAAa,MAAM,QAAQ,QAAQ,WAAW,aAAa,KAAK,eAAe,SAAS,gBAAgB,QAAQ;AAAA,IACtJ,GAAG,QAAQ,KAAK,EAAE,IAAI,CAAC,CAAC,KAAK,EAAE,KAAK,GAAG,MAAM,CAAC,MAAM,cAAc,KAAK,EAAE,KAAK,GAAG,MAAM,CAAC,CAAC;AAAA,EAC3F;AACA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,MACE,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,iBAAiB,gBAAgB,GAAG;AAAA,QACpC,cAAc,SAAS,IAAI,KAAK,MAAM,OAAO,KAAK;AAAA,MACpD;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACF;;;ACzFO,IAAM,eAAe;AAAA,EAC1B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AACX;","names":[]}

package/dist/app-icon/next.d.mts

@@ -0,0 +1,51 @@
+import { ImageResponse } from 'next/og';
+import { AppIconGlyph } from './index.mjs';
+import 'react';
+
+/**
+ * Route handlers for Next's icon file conventions, from one glyph and one hue.
+ *
+ *   // app/icon.tsx
+ *   import * as workflow from 'lucide-react/icons/workflow';
+ *   import { createAppIcon } from '@djangocfg/nextjs/app-icon/next';
+ *   const icon = createAppIcon({ glyph: workflow, hue: 55 });
+ *   export const generateImageMetadata = icon.generateImageMetadata;
+ *   export default icon.icon;
+ *
+ *   // app/apple-icon.tsx
+ *   export const size = { width: 180, height: 180 };
+ *   export const contentType = 'image/png';
+ *   export default icon.appleIcon;   // same createAppIcon call, or call it again
+ *
+ * Served at `/icon/tab` (64, rounded), `/icon/192`, `/icon/384`, `/icon/512` (square) and `/apple-icon` (180, square).
+ */
+
+declare const appIconSizes: {
+    readonly tab: 64;
+    readonly '192': 192;
+    readonly '384': 384;
+    readonly '512': 512;
+};
+declare const appleIconSize: {
+    readonly width: 180;
+    readonly height: 180;
+};
+declare function createAppIcon({ glyph, hue }: {
+    glyph: AppIconGlyph;
+    hue: number;
+}): {
+    generateImageMetadata(): {
+        id: string;
+        size: {
+            width: 64 | 192 | 384 | 512;
+            height: 64 | 192 | 384 | 512;
+        };
+        contentType: string;
+    }[];
+    icon({ id }: {
+        id: Promise<string | number>;
+    }): Promise<ImageResponse>;
+    appleIcon(): ImageResponse;
+};
+
+export { appIconSizes, appleIconSize, createAppIcon };

package/dist/app-icon/next.mjs

@@ -0,0 +1,87 @@
+// src/app-icon/next.ts
+import { ImageResponse } from "next/og";
+
+// src/app-icon/element.ts
+import { createElement } from "react";
+function oklchToHex(l, c, h) {
+  const a = c * Math.cos(h * Math.PI / 180);
+  const b = c * Math.sin(h * Math.PI / 180);
+  const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  const lin = [
+    4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_,
+    -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_,
+    -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_
+  ];
+  const hex = lin.map((v) => {
+    const g = v <= 31308e-7 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055;
+    return Math.round(Math.min(1, Math.max(0, g)) * 255).toString(16).padStart(2, "0");
+  });
+  return `#${hex.join("")}`;
+}
+function appIconGradient(hue) {
+  return `linear-gradient(150deg, ${oklchToHex(0.66, 0.17, hue)}, ${oklchToHex(0.47, 0.18, hue + 22)})`;
+}
+function nodesOf(glyph) {
+  if (Array.isArray(glyph)) return glyph;
+  const node = glyph.__iconData?.node;
+  if (!node) throw new Error("app-icon: glyph is not a lucide icon module (expected `import * as x from 'lucide-react/icons/<name>'`)");
+  return node;
+}
+function appIconElement({ glyph, hue, size, shape = "rounded" }) {
+  const square = shape === "square";
+  const side = Math.round(size * (square ? 0.46 : 0.58));
+  const glyphSvg = createElement(
+    "svg",
+    { width: side, height: side, viewBox: "0 0 24 24", fill: "none", stroke: "#ffffff", strokeWidth: 2.1, strokeLinecap: "round", strokeLinejoin: "round" },
+    ...nodesOf(glyph).map(([tag, { key, ...attrs }]) => createElement(tag, { key, ...attrs }))
+  );
+  return createElement(
+    "div",
+    {
+      style: {
+        width: size,
+        height: size,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundImage: appIconGradient(hue),
+        borderRadius: square ? 0 : Math.round(size * 0.225)
+      }
+    },
+    glyphSvg
+  );
+}
+
+// src/app-icon/next.ts
+var appIconSizes = { tab: 64, "192": 192, "384": 384, "512": 512 };
+var appleIconSize = { width: 180, height: 180 };
+function createAppIcon({ glyph, hue }) {
+  return {
+    generateImageMetadata() {
+      return Object.entries(appIconSizes).map(([id, side]) => ({
+        id,
+        size: { width: side, height: side },
+        contentType: "image/png"
+      }));
+    },
+    async icon({ id }) {
+      const key = String(await id);
+      const side = appIconSizes[key] ?? appIconSizes.tab;
+      return new ImageResponse(appIconElement({ glyph, hue, size: side, shape: key === "tab" ? "rounded" : "square" }), {
+        width: side,
+        height: side
+      });
+    },
+    appleIcon() {
+      return new ImageResponse(appIconElement({ glyph, hue, size: appleIconSize.width, shape: "square" }), appleIconSize);
+    }
+  };
+}
+export {
+  appIconSizes,
+  appleIconSize,
+  createAppIcon
+};
+//# sourceMappingURL=next.mjs.map

package/dist/app-icon/next.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/app-icon/next.ts","../../src/app-icon/element.ts"],"sourcesContent":["/**\n * Route handlers for Next's icon file conventions, from one glyph and one hue.\n *\n *   // app/icon.tsx\n *   import * as workflow from 'lucide-react/icons/workflow';\n *   import { createAppIcon } from '@djangocfg/nextjs/app-icon/next';\n *   const icon = createAppIcon({ glyph: workflow, hue: 55 });\n *   export const generateImageMetadata = icon.generateImageMetadata;\n *   export default icon.icon;\n *\n *   // app/apple-icon.tsx\n *   export const size = { width: 180, height: 180 };\n *   export const contentType = 'image/png';\n *   export default icon.appleIcon;   // same createAppIcon call, or call it again\n *\n * Served at `/icon/tab` (64, rounded), `/icon/192`, `/icon/384`, `/icon/512` (square) and `/apple-icon` (180, square).\n */\n\nimport { ImageResponse } from 'next/og';\n\nimport { appIconElement, type AppIconGlyph } from './element';\n\nexport const appIconSizes = { tab: 64, '192': 192, '384': 384, '512': 512 } as const;\nexport const appleIconSize = { width: 180, height: 180 } as const;\n\nexport function createAppIcon({ glyph, hue }: { glyph: AppIconGlyph; hue: number }) {\n  return {\n    generateImageMetadata() {\n      return Object.entries(appIconSizes).map(([id, side]) => ({\n        id,\n        size: { width: side, height: side },\n        contentType: 'image/png',\n      }));\n    },\n    async icon({ id }: { id: Promise<string | number> }) {\n      const key = String(await id) as keyof typeof appIconSizes;\n      const side = appIconSizes[key] ?? appIconSizes.tab;\n      return new ImageResponse(appIconElement({ glyph, hue, size: side, shape: key === 'tab' ? 'rounded' : 'square' }), {\n        width: side,\n        height: side,\n      });\n    },\n    appleIcon() {\n      return new ImageResponse(appIconElement({ glyph, hue, size: appleIconSize.width, shape: 'square' }), appleIconSize);\n    },\n  };\n}\n","/**\n * App icon: ONE definition of the picture an app shows in a tab, on a home screen and as a PWA icon.\n *\n * House style: a full-bleed tile in the product's hue (a two-stop gradient), a white lucide glyph in the inner ~46-58%,\n * and NO border near the edge. The OS cuts its own corner (iOS ~22%, Android a mask); anything drawn at the edge never\n * matches that curve.\n *\n * Pure: plain host elements only (`next/og` renders nothing else) and no `next/og` import, so a client bundle can use\n * the same gradient for an in-app tile. The route factory lives in `./next`.\n */\n\nimport { createElement, type ReactElement } from 'react';\n\n/** What lucide stores for an icon: `[tag, attrs][]`; `attrs.key` is React's key. */\nexport type IconNode = [tag: string, attrs: Record<string, string>][];\n\n/**\n * A glyph is a lucide icon MODULE, `import * as workflow from 'lucide-react/icons/workflow'` (a lucide component is a\n * client component and `next/og` cannot render it, so its drawing data is read from the module), or the node list itself.\n */\nexport type AppIconGlyph = object | IconNode;\n\nexport type AppIconShape = 'rounded' | 'square';\n\nexport interface AppIconOptions {\n  glyph: AppIconGlyph;\n  /** OKLCH hue, 0-360. The switcher tile should use `appIconGradient(hue)` so both agree. */\n  hue: number;\n  /** Side in px. */\n  size: number;\n  /** `rounded`: transparent corners (browser tab). `square`: full-bleed for iOS and maskable PWA icons. @default 'rounded' */\n  shape?: AppIconShape;\n}\n\n/** OKLCH to sRGB hex. `next/og` does not parse `oklch()`; CSS does, and the two must show the same colour. */\nexport function oklchToHex(l: number, c: number, h: number): string {\n  const a = c * Math.cos((h * Math.PI) / 180);\n  const b = c * Math.sin((h * Math.PI) / 180);\n  const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;\n  const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;\n  const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;\n  const lin = [\n    4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_,\n    -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_,\n    -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_,\n  ];\n  const hex = lin.map((v) => {\n    const g = v <= 0.0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055;\n    return Math.round(Math.min(1, Math.max(0, g)) * 255).toString(16).padStart(2, '0');\n  });\n  return `#${hex.join('')}`;\n}\n\n/** The gradient behind a glyph, two hex stops from one hue. */\nexport function appIconGradient(hue: number): string {\n  return `linear-gradient(150deg, ${oklchToHex(0.66, 0.17, hue)}, ${oklchToHex(0.47, 0.18, hue + 22)})`;\n}\n\nfunction nodesOf(glyph: AppIconGlyph): IconNode {\n  if (Array.isArray(glyph)) return glyph as IconNode;\n  const node = (glyph as { __iconData?: { node?: IconNode } }).__iconData?.node;\n  if (!node) throw new Error(\"app-icon: glyph is not a lucide icon module (expected `import * as x from 'lucide-react/icons/<name>'`)\");\n  return node;\n}\n\n/** The picture as plain JSX, for `new ImageResponse(...)`. */\nexport function appIconElement({ glyph, hue, size, shape = 'rounded' }: AppIconOptions): ReactElement {\n  const square = shape === 'square';\n  // A square icon is cropped by the OS: keep the glyph inside the maskable safe zone (the inner 60%).\n  const side = Math.round(size * (square ? 0.46 : 0.58));\n  const glyphSvg = createElement(\n    'svg',\n    { width: side, height: side, viewBox: '0 0 24 24', fill: 'none', stroke: '#ffffff', strokeWidth: 2.1, strokeLinecap: 'round', strokeLinejoin: 'round' },\n    ...nodesOf(glyph).map(([tag, { key, ...attrs }]) => createElement(tag, { key, ...attrs })),\n  );\n  return createElement(\n    'div',\n    {\n      style: {\n        width: size,\n        height: size,\n        display: 'flex',\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundImage: appIconGradient(hue),\n        borderRadius: square ? 0 : Math.round(size * 0.225),\n      },\n    },\n    glyphSvg,\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/element-DhDVWCha.d.mts

@@ -0,0 +1,39 @@
+import { ReactElement } from 'react';
+
+/**
+ * App icon: ONE definition of the picture an app shows in a tab, on a home screen and as a PWA icon.
+ *
+ * House style: a full-bleed tile in the product's hue (a two-stop gradient), a white lucide glyph in the inner ~46-58%,
+ * and NO border near the edge. The OS cuts its own corner (iOS ~22%, Android a mask); anything drawn at the edge never
+ * matches that curve.
+ *
+ * Pure: plain host elements only (`next/og` renders nothing else) and no `next/og` import, so a client bundle can use
+ * the same gradient for an in-app tile. The route factory lives in `./next`.
+ */
+
+/** What lucide stores for an icon: `[tag, attrs][]`; `attrs.key` is React's key. */
+type IconNode = [tag: string, attrs: Record<string, string>][];
+/**
+ * A glyph is a lucide icon MODULE, `import * as workflow from 'lucide-react/icons/workflow'` (a lucide component is a
+ * client component and `next/og` cannot render it, so its drawing data is read from the module), or the node list itself.
+ */
+type AppIconGlyph = object | IconNode;
+type AppIconShape = 'rounded' | 'square';
+interface AppIconOptions {
+    glyph: AppIconGlyph;
+    /** OKLCH hue, 0-360. The switcher tile should use `appIconGradient(hue)` so both agree. */
+    hue: number;
+    /** Side in px. */
+    size: number;
+    /** `rounded`: transparent corners (browser tab). `square`: full-bleed for iOS and maskable PWA icons. @default 'rounded' */
+    shape?: AppIconShape;
+}
+/** OKLCH to sRGB hex. `next/og` does not parse `oklch()`; CSS does, and the two must show the same colour. */
+declare function oklchToHex(l: number, c: number, h: number): string;
+/** The gradient behind a glyph, two hex stops from one hue. */
+declare function appIconGradient(hue: number): string;
+/** The picture as plain JSX, for `new ImageResponse(...)`. */
+declare function appIconElement({ glyph, hue, size, shape }: AppIconOptions): ReactElement;
+
+export { appIconElement as c, appIconGradient as d, oklchToHex as o };
+export type { AppIconGlyph as A, IconNode as I, AppIconOptions as a, AppIconShape as b };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/nextjs",
-  "version": "2.1.627",
+  "version": "2.1.628",
   "description": "Next.js server utilities: sitemap, health, OG images, contact forms, navigation, config",
   "keywords": [
     "nextjs",
@@ -92,6 +92,16 @@
       "import": "./dist/pwa/worker/index.mjs",
       "default": "./dist/pwa/worker/index.mjs"
     },
+    "./app-icon": {
+      "types": "./dist/app-icon/index.d.mts",
+      "import": "./dist/app-icon/index.mjs",
+      "default": "./dist/app-icon/index.mjs"
+    },
+    "./app-icon/next": {
+      "types": "./dist/app-icon/next.d.mts",
+      "import": "./dist/app-icon/next.mjs",
+      "default": "./dist/app-icon/next.mjs"
+    },
     "./og-image": {
       "types": "./dist/og-image/index.d.mts",
       "import": "./dist/og-image/index.mjs",
@@ -162,10 +172,10 @@
     "ai-docs": "tsx src/ai/cli.ts"
   },
   "peerDependencies": {
-    "@djangocfg/api": "^2.1.627",
-    "@djangocfg/devtools": "^2.1.627",
-    "@djangocfg/i18n": "^2.1.627",
-    "@djangocfg/ui-core": "^2.1.627",
+    "@djangocfg/api": "^2.1.628",
+    "@djangocfg/devtools": "^2.1.628",
+    "@djangocfg/i18n": "^2.1.628",
+    "@djangocfg/ui-core": "^2.1.628",
     "next": "^16.4.5",
     "next-intl": "^4.9.1"
   },
@@ -187,12 +197,12 @@
     "semver": "^7.8.6"
   },
   "devDependencies": {
-    "@djangocfg/api": "^2.1.627",
-    "@djangocfg/devtools": "^2.1.627",
-    "@djangocfg/i18n": "^2.1.627",
-    "@djangocfg/layouts": "^2.1.627",
-    "@djangocfg/typescript-config": "^2.1.627",
-    "@djangocfg/ui-core": "^2.1.627",
+    "@djangocfg/api": "^2.1.628",
+    "@djangocfg/devtools": "^2.1.628",
+    "@djangocfg/i18n": "^2.1.628",
+    "@djangocfg/layouts": "^2.1.628",
+    "@djangocfg/typescript-config": "^2.1.628",
+    "@djangocfg/ui-core": "^2.1.628",
     "@types/node": "^25.9.5",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",

package/src/app-icon/element.test.ts

@@ -0,0 +1,35 @@
+import assert from 'node:assert/strict';
+import { describe, it } from 'node:test';
+
+import type { ReactElement } from 'react';
+
+import { appIconElement, appIconGradient, oklchToHex } from './element';
+
+const GOLDEN = '#3f93f7';
+
+type Tile = ReactElement<{ style: Record<string, unknown>; children: ReactElement<{ width: number }> }>;
+
+describe('app-icon', () => {
+  it('converts oklch to a stable hex (golden)', () => {
+    assert.equal(oklchToHex(0.66, 0.17, 255), GOLDEN);
+    assert.equal(oklchToHex(1, 0, 0), '#ffffff');
+  });
+
+  it('builds the gradient from two hex stops', () => {
+    assert.match(appIconGradient(55), /^linear-gradient\(150deg, #[0-9a-f]{6}, #[0-9a-f]{6}\)$/);
+  });
+
+  it('draws a full-bleed tile with no border and a smaller glyph on a square', () => {
+    const rounded = appIconElement({ glyph: [['path', { key: 'a', d: 'M0 0' }]], hue: 55, size: 100 }) as Tile;
+    const square = appIconElement({ glyph: [['path', { key: 'a', d: 'M0 0' }]], hue: 55, size: 100, shape: 'square' }) as Tile;
+    assert.equal(rounded.props.style.border, undefined);
+    assert.equal(rounded.props.style.borderRadius, 23);
+    assert.equal(square.props.style.borderRadius, 0);
+    assert.equal(rounded.props.children.props.width, 58);
+    assert.equal(square.props.children.props.width, 46);
+  });
+
+  it('refuses a glyph that is not a lucide module', () => {
+    assert.throws(() => appIconElement({ glyph: {}, hue: 0, size: 10 }), /lucide/);
+  });
+});

package/src/app-icon/element.ts

@@ -0,0 +1,91 @@
+/**
+ * App icon: ONE definition of the picture an app shows in a tab, on a home screen and as a PWA icon.
+ *
+ * House style: a full-bleed tile in the product's hue (a two-stop gradient), a white lucide glyph in the inner ~46-58%,
+ * and NO border near the edge. The OS cuts its own corner (iOS ~22%, Android a mask); anything drawn at the edge never
+ * matches that curve.
+ *
+ * Pure: plain host elements only (`next/og` renders nothing else) and no `next/og` import, so a client bundle can use
+ * the same gradient for an in-app tile. The route factory lives in `./next`.
+ */
+
+import { createElement, type ReactElement } from 'react';
+
+/** What lucide stores for an icon: `[tag, attrs][]`; `attrs.key` is React's key. */
+export type IconNode = [tag: string, attrs: Record<string, string>][];
+
+/**
+ * A glyph is a lucide icon MODULE, `import * as workflow from 'lucide-react/icons/workflow'` (a lucide component is a
+ * client component and `next/og` cannot render it, so its drawing data is read from the module), or the node list itself.
+ */
+export type AppIconGlyph = object | IconNode;
+
+export type AppIconShape = 'rounded' | 'square';
+
+export interface AppIconOptions {
+  glyph: AppIconGlyph;
+  /** OKLCH hue, 0-360. The switcher tile should use `appIconGradient(hue)` so both agree. */
+  hue: number;
+  /** Side in px. */
+  size: number;
+  /** `rounded`: transparent corners (browser tab). `square`: full-bleed for iOS and maskable PWA icons. @default 'rounded' */
+  shape?: AppIconShape;
+}
+
+/** OKLCH to sRGB hex. `next/og` does not parse `oklch()`; CSS does, and the two must show the same colour. */
+export function oklchToHex(l: number, c: number, h: number): string {
+  const a = c * Math.cos((h * Math.PI) / 180);
+  const b = c * Math.sin((h * Math.PI) / 180);
+  const l_ = (l + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m_ = (l - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s_ = (l - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  const lin = [
+    4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_,
+    -1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_,
+    -0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_,
+  ];
+  const hex = lin.map((v) => {
+    const g = v <= 0.0031308 ? 12.92 * v : 1.055 * v ** (1 / 2.4) - 0.055;
+    return Math.round(Math.min(1, Math.max(0, g)) * 255).toString(16).padStart(2, '0');
+  });
+  return `#${hex.join('')}`;
+}
+
+/** The gradient behind a glyph, two hex stops from one hue. */
+export function appIconGradient(hue: number): string {
+  return `linear-gradient(150deg, ${oklchToHex(0.66, 0.17, hue)}, ${oklchToHex(0.47, 0.18, hue + 22)})`;
+}
+
+function nodesOf(glyph: AppIconGlyph): IconNode {
+  if (Array.isArray(glyph)) return glyph as IconNode;
+  const node = (glyph as { __iconData?: { node?: IconNode } }).__iconData?.node;
+  if (!node) throw new Error("app-icon: glyph is not a lucide icon module (expected `import * as x from 'lucide-react/icons/<name>'`)");
+  return node;
+}
+
+/** The picture as plain JSX, for `new ImageResponse(...)`. */
+export function appIconElement({ glyph, hue, size, shape = 'rounded' }: AppIconOptions): ReactElement {
+  const square = shape === 'square';
+  // A square icon is cropped by the OS: keep the glyph inside the maskable safe zone (the inner 60%).
+  const side = Math.round(size * (square ? 0.46 : 0.58));
+  const glyphSvg = createElement(
+    'svg',
+    { width: side, height: side, viewBox: '0 0 24 24', fill: 'none', stroke: '#ffffff', strokeWidth: 2.1, strokeLinecap: 'round', strokeLinejoin: 'round' },
+    ...nodesOf(glyph).map(([tag, { key, ...attrs }]) => createElement(tag, { key, ...attrs })),
+  );
+  return createElement(
+    'div',
+    {
+      style: {
+        width: size,
+        height: size,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundImage: appIconGradient(hue),
+        borderRadius: square ? 0 : Math.round(size * 0.225),
+      },
+    },
+    glyphSvg,
+  );
+}

package/src/app-icon/index.ts

@@ -0,0 +1,3 @@
+export { appIconElement, appIconGradient, oklchToHex } from './element';
+export type { AppIconGlyph, AppIconOptions, AppIconShape, IconNode } from './element';
+export { appIconPaths } from './paths';

package/src/app-icon/next.ts

@@ -0,0 +1,47 @@
+/**
+ * Route handlers for Next's icon file conventions, from one glyph and one hue.
+ *
+ *   // app/icon.tsx
+ *   import * as workflow from 'lucide-react/icons/workflow';
+ *   import { createAppIcon } from '@djangocfg/nextjs/app-icon/next';
+ *   const icon = createAppIcon({ glyph: workflow, hue: 55 });
+ *   export const generateImageMetadata = icon.generateImageMetadata;
+ *   export default icon.icon;
+ *
+ *   // app/apple-icon.tsx
+ *   export const size = { width: 180, height: 180 };
+ *   export const contentType = 'image/png';
+ *   export default icon.appleIcon;   // same createAppIcon call, or call it again
+ *
+ * Served at `/icon/tab` (64, rounded), `/icon/192`, `/icon/384`, `/icon/512` (square) and `/apple-icon` (180, square).
+ */
+
+import { ImageResponse } from 'next/og';
+
+import { appIconElement, type AppIconGlyph } from './element';
+
+export const appIconSizes = { tab: 64, '192': 192, '384': 384, '512': 512 } as const;
+export const appleIconSize = { width: 180, height: 180 } as const;
+
+export function createAppIcon({ glyph, hue }: { glyph: AppIconGlyph; hue: number }) {
+  return {
+    generateImageMetadata() {
+      return Object.entries(appIconSizes).map(([id, side]) => ({
+        id,
+        size: { width: side, height: side },
+        contentType: 'image/png',
+      }));
+    },
+    async icon({ id }: { id: Promise<string | number> }) {
+      const key = String(await id) as keyof typeof appIconSizes;
+      const side = appIconSizes[key] ?? appIconSizes.tab;
+      return new ImageResponse(appIconElement({ glyph, hue, size: side, shape: key === 'tab' ? 'rounded' : 'square' }), {
+        width: side,
+        height: side,
+      });
+    },
+    appleIcon() {
+      return new ImageResponse(appIconElement({ glyph, hue, size: appleIconSize.width, shape: 'square' }), appleIconSize);
+    },
+  };
+}

package/src/app-icon/paths.ts

@@ -0,0 +1,6 @@
+/** The manifest's `icons` for an app that serves `createAppIcon` at `app/icon.tsx`. Pass it to `createManifest({ icons })`. */
+export const appIconPaths = {
+  logo192: '/icon/192',
+  logo384: '/icon/384',
+  logo512: '/icon/512',
+} as const;