@stnd/modules 0.5.1

package/brand-manual/index.module.js

@@ -0,0 +1,12 @@
+export default {
+  id: "stnd-brand-manual",
+  name: "Stnd :: Normes Graphiques",
+  description:
+    "Un manuel des normes graphiques affichant les tokens du thème comme les couleurs et la typographie.",
+  routes: [
+    {
+      path: "/brand",
+      entrypoint: "./route.astro",
+    },
+  ],
+};

package/brand-manual/route.astro

@@ -0,0 +1,341 @@
+---
+import Base from "@stnd/layout/Base.astro";
+
+// Manuel des Normes Graphiques - Définitions des Tokens
+const colors = [
+  { name: "Fond (Background)", token: "var(--color-background)" },
+  { name: "Premier plan (Foreground)", token: "var(--color-foreground)" },
+  { name: "Accentuation", token: "var(--color-accent)" },
+  { name: "Rouge", token: "var(--color-red)" },
+  { name: "Orange", token: "var(--color-orange)" },
+  { name: "Jaune", token: "var(--color-yellow)" },
+  { name: "Vert", token: "var(--color-green)" },
+  { name: "Cyan", token: "var(--color-cyan)" },
+  { name: "Bleu", token: "var(--color-blue)" },
+  { name: "Magenta", token: "var(--color-magenta)" },
+  { name: "Atténué (Muted)", token: "var(--color-muted)" },
+  { name: "Surface", token: "var(--color-surface)" },
+];
+
+const typography = [
+  {
+    name: "Sans empattement (Sans)",
+    token: "var(--font-sans)",
+    fallback: "system-ui, sans-serif",
+  },
+  {
+    name: "Avec empattement (Serif)",
+    token: "var(--font-serif)",
+    fallback: "Georgia, serif",
+  },
+  {
+    name: "Chasse fixe (Monospace)",
+    token: "var(--font-monospace)",
+    fallback: "monospace",
+  },
+];
+
+const scales = [
+  { name: "Le plus petit", token: "--scale-d5" },
+  { name: "Plus petit", token: "--scale-d2" },
+  { name: "Base", token: "--scale" },
+  { name: "Moyen", token: "--scale-2" },
+  { name: "Grand", token: "--scale-4" },
+  { name: "Le plus grand", token: "--scale-8" },
+];
+---
+
+<Base
+  title="Manuel des Normes Graphiques"
+  description="Lignes directrices de la marque & Tokens du système de design"
+>
+  <header class="manual-header full">
+    <h1>Manuel des Normes Graphiques</h1>
+    <p>Lignes directrices de la marque & Tokens du système de design</p>
+  </header>
+
+  <section class="manual-section full">
+      <h2 class="brand-header">1.0 Palette de Couleurs</h2>
+    <div class="grid-6 sm:grid-2 gap">
+      {
+        colors.map((color) => (
+          <div class="color-swatch-container">
+            <div
+              class="color-swatch"
+              style={`background-color: ${color.token}; border: 1px solid var(--color-border);`}
+            />
+            <div class="color-info">
+              <strong>{color.name}</strong>
+              <code>{color.token.replace("var(", "").replace(")", "")}</code>
+              <code class="hex-value" data-token={color.token} />
+            </div>
+          </div>
+        ))
+      }
+    </div>
+  </section>
+
+  <section class="manual-section full">
+      <h2 class="brand-header">2.0 Typographie</h2>
+    <div class="typography-list">
+      {
+        typography.map((font) => (
+          <div class="typography-item">
+            <div
+              class="typography-sample"
+              style={`font-family: ${font.token}, ${font.fallback};`}
+            >
+              Aa
+            </div>
+            <div class="typography-info">
+              <div class="typography-meta">
+                <strong>{font.name}</strong>
+                <span class="font-value" data-token={font.token} />
+                <!--code>{font.token.replace("var(", "").replace(")", "")}</code-->
+
+              </div>
+              <div
+                class="typography-preview"
+                style={`font-family: ${font.token}, ${font.fallback};`}
+              >
+                  <h2>Whereas recognition of the inherent dignity</h2>
+                  <p>No one shall be subjected to arbitrary arrest, detention or exile. Everyone is entitled in full equality to a fair and public hearing by an independent and impartial tribunal, in the determination of his rights and obligations and of any criminal charge against him. No one shall be subjected to arbitrary interference with his privacy, family, home or correspondence, nor to attacks upon his honour and reputation. Everyone has the right to the protection of the law against such interference or attacks.</p>
+                  <p>Everyone has the right to freedom of thought, conscience and religion; this right includes freedom to change his religion or belief, and freedom, either alone or in community with others and in public or private, to manifest his religion or belief in teaching, practice, worship and observance. Everyone has the right to freedom of opinion and expression; this right includes freedom to hold opinions without interference and to seek, receive and impart information and ideas through any media and regardless of frontiers. Everyone has the right to rest and leisure, including reasonable limitation of working hours and periodic holidays with pay.</p>
+              </div>
+            </div>
+          </div>
+        ))
+      }
+    </div>
+  </section>
+
+  <script>
+    // Get all hex-value elements
+    const hexElements = document.querySelectorAll(".hex-value");
+
+    // Create a reusable canvas to compute exact RGBA pixels from ANY color string (like oklch)
+    const canvas = document.createElement("canvas");
+    canvas.width = 1;
+    canvas.height = 1;
+    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+
+    // Calculate computed color for each token
+    hexElements.forEach((el) => {
+      const token = el.getAttribute("data-token");
+      if (token) {
+        // Create a temporary element to compute the style
+        const tempDiv = document.createElement("div");
+        tempDiv.style.color = token;
+        tempDiv.style.display = "none";
+        document.body.appendChild(tempDiv);
+
+        const computedColor = window.getComputedStyle(tempDiv).color;
+        document.body.removeChild(tempDiv);
+
+        let hexColor = computedColor;
+
+        if (ctx) {
+          // Draw the color onto our 1x1 canvas
+          ctx.clearRect(0, 0, 1, 1);
+          ctx.fillStyle = computedColor;
+          ctx.fillRect(0, 0, 1, 1);
+
+          // Read the precise pixel data
+          const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+
+          const toHex = (c) => c.toString(16).padStart(2, "0");
+          let hex = "#" + toHex(r) + toHex(g) + toHex(b);
+          if (a < 255) {
+            hex += toHex(a);
+          }
+
+          hexColor = hex.toUpperCase();
+        }
+
+        // Display the computed Hex code
+        el.textContent = hexColor;
+
+        // Click to copy functionality
+        const container = el.closest(".color-swatch-container");
+        if (container) {
+          container.style.cursor = "pointer";
+          container.title = "Cliquez pour copier";
+
+          container.addEventListener("click", async () => {
+            try {
+              await navigator.clipboard.writeText(hexColor);
+
+              if (window.toast) {
+                window.toast(`Couleur copiée: ${hexColor}`, "success", 2000);
+              } else {
+                // Fallback visual feedback if toast is not available
+                const originalText = el.textContent;
+                el.textContent = "Copié !";
+                el.style.color = "var(--color-green)";
+                el.style.fontWeight = "bold";
+
+                setTimeout(() => {
+                  el.textContent = originalText;
+                  el.style.color = "";
+                  el.style.fontWeight = "";
+                }, 1500);
+              }
+            } catch (err) {
+              console.error("Failed to copy text: ", err);
+              if (window.toast) {
+                window.toast("Erreur lors de la copie", "error");
+              }
+            }
+          });
+        }
+      }
+    });
+
+    // Calculate computed font-family for each token
+    const fontElements = document.querySelectorAll(".font-value");
+    fontElements.forEach((el) => {
+      const token = el.getAttribute("data-token");
+      if (token) {
+        const tempDiv = document.createElement("div");
+        tempDiv.style.fontFamily = token;
+        tempDiv.style.display = "none";
+        document.body.appendChild(tempDiv);
+
+        // Get computed font-family and clean it up
+        let computedFont = window.getComputedStyle(tempDiv).fontFamily;
+        document.body.removeChild(tempDiv);
+
+        // Remove quotes around font names for cleaner display
+        computedFont = computedFont.replace(/['"]/g, "");
+
+        // Display only the primary font (first one in the stack) if it's long, or the whole stack
+        const fonts = computedFont.split(",");
+        el.textContent = fonts[0].trim();
+
+        if (fonts.length > 1) {
+          el.title = computedFont; // Show full stack on hover
+        }
+      }
+    });
+  </script>
+</Base>
+
+<style>
+  .manual-header {
+    border-bottom: 4px solid var(--color-foreground);
+    padding-bottom: var(--space-3);
+    margin-block: var(--space-6);
+  }
+
+  .manual-header h1 {
+    font-size: var(--size-4xl);
+    font-weight: var(--font-header-weight);
+    text-transform: uppercase;
+    letter-spacing: -0.04em;
+    margin: 0 0 var(--space-d2) 0;
+    line-height: 0.8;
+  }
+
+  .manual-header p {
+    color: var(--color-muted);
+    font-size: var(--size-lg);
+    margin: 0;
+  }
+
+  .manual-section {
+    margin-bottom: var(--space-8);
+  }
+
+  .manual-section .brand-header {
+    font-size: var(--scale-3, 1.5rem);
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-bottom: 1px solid var(--color-border);
+    padding-bottom: var(--space);
+    margin-bottom: var(--space-4);
+    color: var(--color-foreground);
+  }
+
+  /* Colors */
+
+  .color-swatch {
+    width: 100%;
+    aspect-ratio: 1;
+    border-radius: var(--radius);
+  }
+
+  .color-info {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-d4);
+  }
+
+  .color-info strong {
+    font-weight: 600;
+    font-size: var(--scale);
+  }
+
+  .color-info code {
+    font-size: var(--scale-d2);
+    color: var(--color-muted);
+    font-family: var(--font-monospace, monospace);
+  }
+
+  /* Typography */
+  .typography-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+  }
+
+  .typography-item {
+    display: flex;
+    gap: var(--space-4);
+    align-items: center;
+    border-bottom: 1px dashed var(--color-border);
+    padding-bottom: var(--space-4);
+  }
+
+  .typography-item:last-child {
+    border-bottom: none;
+  }
+
+  .typography-sample {
+    font-size: var(--scale-8);
+    line-height: 1;
+    min-width: 120px;
+    text-align: center;
+    font-weight: 400;
+  }
+
+  .typography-info {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space);
+  }
+
+  .typography-meta {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-half);
+  }
+
+  .typography-meta strong {
+    font-weight: 600;
+    font-size: var(--size-lg);
+  }
+
+  .typography-meta code {
+    font-size: var(--size-xs);
+    color: var(--color-subtle);
+  }
+
+  .typography-preview {
+    font-size: var(--scale-base);
+    h2 {
+        font-family:inherit;
+    }
+  }
+</style>

package/confetti/Confetti.astro

@@ -0,0 +1,42 @@
+---
+/**
+ * @stnd/modules/confetti/Confetti.astro
+ *
+ * A standalone component that triggers a confetti explosion on page load.
+ *
+ * It is safe to include even if the confetti script is not loaded; it will gracefully fail.
+ */
+---
+
+<script>
+  // Fire standard ready event on page load and attempt a guarded confetti burst.
+  document.addEventListener("astro:page-load", () => {
+    try {
+      // Use bracket access to avoid TypeScript/linters complaining about unknown properties.
+      // @ts-ignore
+      if (typeof window !== "undefined" && typeof window["confetti"] === "function") {
+         // @ts-ignore
+        window["confetti"]({
+          particleCount: 150,
+          spread: 90,
+          origin: { y: 0.7 },
+        });
+      } else {
+        // CDN script may still be loading — one retry
+        setTimeout(() => {
+           // @ts-ignore
+          if (typeof window !== "undefined" && typeof window["confetti"] === "function") {
+             // @ts-ignore
+            window["confetti"]({
+              particleCount: 150,
+              spread: 90,
+              origin: { y: 0.7 },
+            });
+          }
+        }, 600);
+      }
+    } catch (err) {
+      // Swallow any errors — confetti is non-critical.
+    }
+  });
+</script>

package/confetti/index.module.js

@@ -0,0 +1,22 @@
+/**
+ * 🎉 Confetti - Page Load Celebration
+ *
+ * Adds a fun confetti explosion on page load.
+ * Registered as a Gold Standard module — every @stnd site ships with this.
+ *
+ * Zone: stnd:base (static Astro SSR, no hydration needed)
+ */
+export default {
+  id: "stnd-confetti",
+  name: "Stnd :: Confetti",
+  description: "A fun confetti explosion on page load.",
+  environment: ["dev"],
+
+  scripts: [
+    "https://cdn.jsdelivr.net/npm/canvas-confetti@1.6.0/dist/confetti.browser.min.js",
+  ],
+
+  hooks: {
+    "stnd:base": ["./Confetti.astro"],
+  },
+};

package/content/index.module.js

@@ -0,0 +1,19 @@
+/**
+ * Content Route core module
+ *
+ * Injects the dynamic markdown content route so it can be opt-in
+ * via the Standard module system.
+ */
+export default {
+  id: "stnd-content",
+  name: "Stnd :: Content Route",
+  description:
+    "Renders markdown content from the 'content' collection using generated permalinks.",
+  routes: [
+    {
+      // Dynamic slug route for content collection pages
+      path: "/[...slug]",
+      entrypoint: "./route.astro",
+    },
+  ],
+};

package/content/route.astro

@@ -0,0 +1,59 @@
+---
+/**
+ * Dynamic content route for markdown files
+ * Provided via the content-route folio.
+ *
+ * It handles all markdown content from the 'docs' collection
+ * and generates pages based on their permalink.
+ */
+
+import { getCollection, render } from "astro:content";
+import Base from "../../layouts/Base.astro";
+import { generatePermalink } from "../../core/permalink";
+
+export async function getStaticPaths() {
+  const content = await getCollection("content");
+
+  return content.map((entry: any) => {
+    // Get permalink from frontmatter OR generate it using shared utility
+    // (Remark folios run too late for getStaticPaths, so we must ensure it exists here)
+    const permalink = entry.data.permalink || generatePermalink(entry.id);
+
+    // Convert permalink to a valid Astro slug (remove leading/trailing slashes)
+    const slug = permalink.replace(/^\/|\/$/g, "");
+
+    // Empty string/undefined for index file (/) - this becomes the root route
+    return {
+      params: { slug: slug || undefined },
+      props: { entry },
+    };
+  });
+}
+
+const { entry } = Astro.props;
+const rendered = await render(entry);
+// @ts-ignore
+const { Content: ContentComponent, remarkFolioFrontmatter } = rendered;
+
+// Merge schema data with data injected by remark folios (like backlinks)
+const frontmatter = {
+  ...entry.data,
+  ...remarkFolioFrontmatter,
+};
+
+// Ensure backlinks are present
+const frontmatterWithBacklinks = {
+  ...frontmatter,
+  backlinks: frontmatter?.backlinks || {},
+};
+---
+
+<!-- Use Base layout and pass the markdown content through -->
+<Base
+  frontmatter={frontmatterWithBacklinks}
+  title={frontmatter?.title || "Standard Framework"}
+  description={frontmatter?.description || ""}
+  class="prose"
+>
+  <ContentComponent />
+</Base>

package/copy-buttons/index.module.js

@@ -0,0 +1,9 @@
+/**
+ * Copy Buttons Module
+ * Client script lives in @stnd/client — manifest registered here.
+ */
+export default {
+  id: "stnd-copy-buttons",
+  name: "Stnd :: Client :: Copy Buttons",
+  scripts: [{ src: "@stnd/client/copy-buttons", init: "initCopyButtons", refresh: "refreshCopyButtons" }],
+};

package/deep-link/index.module.js

@@ -0,0 +1,9 @@
+/**
+ * Deep Link Module
+ * Client script lives in @stnd/client — manifest registered here.
+ */
+export default {
+  id: "stnd-deep-link",
+  name: "Stnd :: Client :: Deep Link",
+  scripts: [{ src: "./init.js", init: "init" }],
+};

package/deep-link/init.js

@@ -0,0 +1,14 @@
+/**
+ * Deep Link — Configured initializer
+ *
+ * Wraps initTextFragments with app-specific callbacks (toast notifications).
+ * Called by the @stnd/store script runner on load and after View Transitions.
+ */
+import { initTextFragments } from "@stnd/client/deep-link.js";
+
+export function init() {
+  initTextFragments({
+    onSuccess: () => window.toast?.("Link to highlight copied"),
+    onError: (msg) => window.toast?.(msg ?? "Failed to copy link", "error"),
+  });
+}

package/eink/index.module.js

@@ -0,0 +1,9 @@
+/**
+ * E-Ink Module
+ * Client script lives in @stnd/client — manifest registered here.
+ */
+export default {
+  id: "stnd-eink",
+  name: "Stnd :: Client :: E-Ink",
+  scripts: [{ src: "@stnd/client/eink", init: "initEInk" }],
+};

package/fonts/index.module.js

@@ -0,0 +1,76 @@
+/**
+ * Core Themes Module
+ * Loads individual theme folios so their fonts and styles are registered via the module system.
+ *
+ * Reason: loading the theme folios (instead of a single aggregated stylesheet)
+ * ensures each theme's `dependencies` (fonts) are processed and available when
+ * the theme is applied.
+ */
+export default {
+  id: "stnd-fonts",
+  name: "Stnd :: Fonts",
+  description: "Loads all shipped font",
+
+  // Declare module-level dependencies so the loader will import each theme folio.
+  // Each theme folio in packages/themes/<name>/ has its own `styles` and `dependencies`
+  // (e.g. font folios) and should be loaded via `dependencies` here.
+  dependencies: [
+    // Fonts
+    "@stnd/fonts/andika",
+    "@stnd/fonts/atkinson-hyperlegible-mono",
+    "@stnd/fonts/atkinson-hyperlegible-next",
+    "@stnd/fonts/avant-garde-pro",
+    "@stnd/fonts/avenir-next",
+    "@stnd/fonts/bauhaus-pro",
+    "@stnd/fonts/berkeley-mono",
+    "@stnd/fonts/bookerly",
+    "@stnd/fonts/brixton",
+    "@stnd/fonts/calsans",
+    "@stnd/fonts/cargo-arizona",
+    "@stnd/fonts/cargo-diatype",
+    "@stnd/fonts/cargo-diatype-widths",
+    "@stnd/fonts/cargo-marist",
+    "@stnd/fonts/cargo-monument-grotesk",
+    "@stnd/fonts/cargo-synt",
+    "@stnd/fonts/courier-prime",
+    "@stnd/fonts/din-condensed",
+    "@stnd/fonts/eb-garamond",
+    "@stnd/fonts/fern",
+    "@stnd/fonts/forrest",
+    "@stnd/fonts/fraunces",
+    "@stnd/fonts/futura-now",
+    "@stnd/fonts/gnomon",
+    "@stnd/fonts/gorton-perfected",
+    "@stnd/fonts/graveur",
+    "@stnd/fonts/helvetica-mono",
+    "@stnd/fonts/helvetica-now",
+    "@stnd/fonts/herbus",
+    "@stnd/fonts/ia-writer",
+    "@stnd/fonts/ibm-plex",
+    "@stnd/fonts/instrument-sans",
+    "@stnd/fonts/instrument-serif",
+    "@stnd/fonts/inter",
+    "@stnd/fonts/jimmy",
+    "@stnd/fonts/joly",
+    "@stnd/fonts/kalice",
+    "@stnd/fonts/lexend",
+    "@stnd/fonts/literata",
+    "@stnd/fonts/maine",
+    "@stnd/fonts/maple",
+    "@stnd/fonts/marauder",
+    "@stnd/fonts/monaspace-xenon",
+    "@stnd/fonts/monolisa",
+    "@stnd/fonts/monosten",
+    "@stnd/fonts/national-park",
+    "@stnd/fonts/newsreader",
+    "@stnd/fonts/oktah",
+    "@stnd/fonts/opendyslexic",
+    "@stnd/fonts/quicksand",
+    "@stnd/fonts/sohne",
+    "@stnd/fonts/source-serif-4",
+    "@stnd/fonts/souvenir-mono",
+    "@stnd/fonts/tiempos-headline",
+    "@stnd/fonts/univers-next",
+    "@stnd/fonts/wonder",
+  ],
+};

package/gestures/index.module.js

@@ -0,0 +1,9 @@
+/**
+ * Gestures Module
+ * Client script lives in @stnd/client — manifest registered here.
+ */
+export default {
+  id: "stnd-gestures",
+  name: "Stnd :: Client :: Gestures",
+  scripts: [{ src: "./init.js", init: "init" }],
+};

package/gestures/init.js

@@ -0,0 +1,13 @@
+/**
+ * Gestures — Configured initializer
+ *
+ * Wraps initGestures with app-specific defaults (swipe-back navigation).
+ * Called by the @stnd/store script runner on load and after View Transitions.
+ */
+import { initGestures } from "@stnd/client/gestures.js";
+
+export function init() {
+  initGestures({
+    onSwipeBack: () => window.history.back(),
+  });
+}

package/gsap/client.js

@@ -0,0 +1,41 @@
+/**
+ * GSAP Module — Client Loader
+ *
+ * Provides lazy loaders for GSAP core and plugins from CDN.
+ * Use `loadGsap()` in Svelte `onMount` or any async context.
+ *
+ * @example
+ * import { loadGsap } from "@stnd/modules/gsap/client.js";
+ *
+ * onMount(async () => {
+ *   const { gsap, ScrollTrigger } = await loadGsap();
+ *   gsap.registerPlugin(ScrollTrigger);
+ *   // ...
+ * });
+ */
+
+const GSAP_VERSION = "3";
+const GSAP_CDN = `https://cdn.jsdelivr.net/npm/gsap@${GSAP_VERSION}`;
+
+let loading = null;
+
+/**
+ * Load GSAP core + ScrollTrigger from CDN (ESM build).
+ * Cached after first call — safe to call multiple times.
+ * @returns {Promise<{ gsap: typeof gsap, ScrollTrigger: typeof ScrollTrigger }>}
+ */
+export function loadGsap() {
+  if (loading) return loading;
+
+  loading = Promise.all([
+    import(/* @vite-ignore */ `${GSAP_CDN}/index.js`),
+    import(/* @vite-ignore */ `${GSAP_CDN}/ScrollTrigger.js`),
+  ]).then(([gsapMod, stMod]) => {
+    const gsap = gsapMod.gsap ?? gsapMod.default;
+    const ScrollTrigger = stMod.ScrollTrigger ?? stMod.default;
+    gsap.registerPlugin(ScrollTrigger);
+    return { gsap, ScrollTrigger };
+  });
+
+  return loading;
+}