singularity-components 0.1.151 → 0.1.193

package/dist/components/templates/hero/hero.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface HeroProps {
+    title?: React.ReactNode;
+    titleAccent?: string;
+    description?: string;
+    primaryCTA?: {
+        label: string;
+        href: string;
+    };
+    secondaryCTA?: {
+        label: string;
+        href: string;
+    };
+}
+declare function Hero({ title, titleAccent, description, primaryCTA, secondaryCTA, }: HeroProps): react_jsx_runtime.JSX.Element;
+
+export { Hero as default };

package/dist/components/{sections → templates}/hero/hero.js

@@ -4,22 +4,35 @@ import {
   Layout,
   LinkButton,
   Stack,
-  TextHeading,
-  TextParagraph,
+  Heading,
+  Text,
   TextSpan
-} from "../../primitives";
+} from "../../primitives/index.js";
 import { useCallback, useMemo, useRef, useState } from "react";
+function seededRandom(seed) {
+  const x = Math.sin(seed * 9999) * 1e4;
+  return x - Math.floor(x);
+}
+function round(num, decimals = 4) {
+  return Number(num.toFixed(decimals));
+}
 function generateSparkles(count) {
   return Array.from({ length: count }, (_, i) => ({
     id: i,
-    left: Math.random() * 100,
-    top: Math.random() * 100,
-    size: Math.random() * 4 + 2,
-    delay: Math.random() * 5,
-    duration: Math.random() * 2 + 1.5
+    left: round(seededRandom(i) * 100),
+    top: round(seededRandom(i + 1) * 100),
+    size: round(seededRandom(i + 2) * 4 + 2),
+    delay: round(seededRandom(i + 3) * 5),
+    duration: round(seededRandom(i + 4) * 2 + 1.5)
   }));
 }
-function Hero({}) {
+function Hero({
+  title,
+  titleAccent,
+  description,
+  primaryCTA,
+  secondaryCTA
+}) {
   const heroRef = useRef(null);
   const [mouse, setMouse] = useState({ x: 0.5, y: 0.5 });
   const [mousePixel, setMousePixel] = useState({ x: 0, y: 0 });
@@ -61,13 +74,22 @@ function Hero({}) {
       setBursts((prev) => prev.filter((b) => !newBursts.includes(b)));
     }, 800);
   }, []);
-  return /* @__PURE__ */ jsx(Layout, { type: "full", children: /* @__PURE__ */ jsx(Layout.Col1, { hideDiv: true, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Layout, { type: "container", children: /* @__PURE__ */ jsx(Layout.Col1, { hideDiv: true, children: /* @__PURE__ */ jsxs(
     "section",
     {
       ref: heroRef,
       onMouseMove: handleMouseMove,
       onClick: handleClick,
-      className: "sg:relative sg:overflow-hidden sg:bg-background sg:cursor-crosshair",
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick(e);
+        }
+      },
+      role: "button",
+      tabIndex: 0,
+      "data-testid": "hero-section",
+      className: "sg:relative sg:overflow-hidden sg:bg-background sg:cursor-crosshair sg:focus-visible:outline-none sg:focus-visible:ring-2 sg:focus-visible:ring-primary sg:focus-visible:ring-offset-2",
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -226,30 +248,38 @@ function Hero({}) {
           }
         ),
         /* @__PURE__ */ jsx(Layout, { type: "col", className: "sg:py-20 sg:md:py-32", children: /* @__PURE__ */ jsxs(Layout.Col1, { hideDiv: true, children: [
-          /* @__PURE__ */ jsxs(TextHeading, { variant: "h1", children: [
-            "Stories worth",
+          (title || titleAccent) && /* @__PURE__ */ jsxs(Heading, { variant: "h1", children: [
+            title,
             " ",
-            /* @__PURE__ */ jsx(TextSpan, { size: "4xl", foreground: "primary", children: "savoring" })
+            titleAccent && /* @__PURE__ */ jsx(TextSpan, { size: "4xl", foreground: "primary", children: titleAccent })
           ] }),
-          /* @__PURE__ */ jsx(
-            TextParagraph,
+          description && /* @__PURE__ */ jsx(
+            Text,
             {
               size: "lg",
               foreground: "muted-foreground",
               className: "sg:mt-6 sg:max-w-xl",
-              children: "A curated journal exploring design, culture, and the quiet art of living with intention."
+              children: description
             }
           ),
-          /* @__PURE__ */ jsxs(Stack, { gap: 3, direction: "row", className: "sg:mt-8", children: [
-            /* @__PURE__ */ jsx(LinkButton, { buttonSize: "lg", href: "#", className: "sg:z-1", children: "Browse all posts" }),
-            /* @__PURE__ */ jsx(
+          (primaryCTA || secondaryCTA) && /* @__PURE__ */ jsxs(Stack, { gap: 3, direction: "row", wrap: "wrap", className: "sg:mt-8", children: [
+            primaryCTA && /* @__PURE__ */ jsx(
+              LinkButton,
+              {
+                buttonSize: "lg",
+                to: primaryCTA.href,
+                className: "sg:z-1",
+                children: primaryCTA.label
+              }
+            ),
+            secondaryCTA && /* @__PURE__ */ jsx(
               LinkButton,
               {
                 variant: "secondary",
                 buttonSize: "lg",
-                href: "#",
+                to: secondaryCTA.href,
                 className: "sg:z-1",
-                children: "Our design system"
+                children: secondaryCTA.label
               }
             )
           ] })

package/dist/components/templates/hero/hero.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/templates/hero/hero.tsx"],"sourcesContent":["\"use client\";\r\nimport {\r\n  Layout,\r\n  LinkButton,\r\n  Stack,\r\n  Heading,\r\n  Text,\r\n  TextSpan,\r\n} from \"../../primitives/index\";\r\nimport { useCallback, useMemo, useRef, useState } from \"react\";\r\n\r\nfunction seededRandom(seed: number) {\r\n  const x = Math.sin(seed * 9999) * 10000;\r\n  return x - Math.floor(x);\r\n}\r\n\r\nfunction round(num: number, decimals = 4) {\r\n  return Number(num.toFixed(decimals));\r\n}\r\n\r\nfunction generateSparkles(count: number) {\r\n  return Array.from({ length: count }, (_, i) => ({\r\n    id: i,\r\n    left: round(seededRandom(i) * 100),\r\n    top: round(seededRandom(i + 1) * 100),\r\n    size: round(seededRandom(i + 2) * 4 + 2),\r\n    delay: round(seededRandom(i + 3) * 5),\r\n    duration: round(seededRandom(i + 4) * 2 + 1.5),\r\n  }));\r\n}\r\n\r\ninterface BurstParticle {\r\n  id: number;\r\n  x: number;\r\n  y: number;\r\n  angle: number;\r\n  speed: number;\r\n  hue: number;\r\n  size: number;\r\n}\r\n\r\ninterface HeroProps {\r\n  title?: React.ReactNode;\r\n  titleAccent?: string;\r\n  description?: string;\r\n  primaryCTA?: { label: string; href: string };\r\n  secondaryCTA?: { label: string; href: string };\r\n}\r\n\r\nexport default function Hero({\r\n  title,\r\n  titleAccent,\r\n  description,\r\n  primaryCTA,\r\n  secondaryCTA,\r\n}: HeroProps) {\r\n  const heroRef = useRef<HTMLElement>(null);\r\n  const [mouse, setMouse] = useState({ x: 0.5, y: 0.5 });\r\n  const [mousePixel, setMousePixel] = useState({ x: 0, y: 0 });\r\n  const sparkles = useMemo(() => generateSparkles(40), []);\r\n  const [bursts, setBursts] = useState<BurstParticle[]>([]);\r\n  const burstIdRef = useRef(0);\r\n\r\n  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLElement>) => {\r\n    const rect = heroRef.current?.getBoundingClientRect();\r\n    if (!rect) return;\r\n    setMouse({\r\n      x: (e.clientX - rect.left) / rect.width,\r\n      y: (e.clientY - rect.top) / rect.height,\r\n    });\r\n    setMousePixel({\r\n      x: e.clientX - rect.left,\r\n      y: e.clientY - rect.top,\r\n    });\r\n  }, []);\r\n\r\n  const handleClick = useCallback((e: React.MouseEvent<HTMLElement>) => {\r\n    const rect = heroRef.current?.getBoundingClientRect();\r\n    if (!rect) return;\r\n    const cx = e.clientX - rect.left;\r\n    const cy = e.clientY - rect.top;\r\n    const count = 18;\r\n\r\n    const newBursts: BurstParticle[] = Array.from(\r\n      { length: count },\r\n      (_, i) => ({\r\n        id: burstIdRef.current++,\r\n        x: cx,\r\n        y: cy,\r\n        angle: (360 / count) * i + Math.random() * 20 - 10,\r\n        speed: Math.random() * 120 + 60,\r\n        hue: Math.random() * 360,\r\n        size: Math.random() * 5 + 3,\r\n      }),\r\n    );\r\n\r\n    setBursts((prev) => [...prev, ...newBursts]);\r\n    setTimeout(() => {\r\n      setBursts((prev) => prev.filter((b) => !newBursts.includes(b)));\r\n    }, 800);\r\n  }, []);\r\n\r\n  return (\r\n    <Layout type=\"container\">\r\n      <Layout.Col1 hideDiv>\r\n        <section\r\n          ref={heroRef}\r\n          onMouseMove={handleMouseMove}\r\n          onClick={handleClick}\r\n          onKeyDown={(e) => {\r\n            if (e.key === \"Enter\" || e.key === \" \") {\r\n              e.preventDefault();\r\n              handleClick(e as any);\r\n            }\r\n          }}\r\n          role=\"button\"\r\n          tabIndex={0}\r\n          data-testid=\"hero-section\"\r\n          className=\"sg:relative sg:overflow-hidden sg:bg-background sg:cursor-crosshair sg:focus-visible:outline-none sg:focus-visible:ring-2 sg:focus-visible:ring-primary sg:focus-visible:ring-offset-2\"\r\n        >\r\n          {/* Colorful gradient blobs — follow mouse */}\r\n          <div\r\n            className=\"sg:absolute sg:inset-0 sg:overflow-hidden sg:pointer-events-none\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            {/* Hot pink / magenta */}\r\n            <div\r\n              className=\"sg:absolute sg:h-175 sg:w-175 sg:rounded-full sg:opacity-35 sg:blur-[90px] sg:transition-transform sg:duration-500 sg:ease-out\"\r\n              style={{\r\n                background: \"hsl(330, 90%, 55%)\",\r\n                transform: `translate(${mouse.x * 70 - 35}%, ${mouse.y * 60 - 50}%)`,\r\n                top: \"-10%\",\r\n                right: \"-5%\",\r\n              }}\r\n            />\r\n            {/* Electric blue */}\r\n            <div\r\n              className=\"sg:absolute sg:h-150 sg:w-150 sg:rounded-full sg:opacity-30 sg:blur-[80px] sg:transition-transform sg:duration-700 sg:ease-out\"\r\n              style={{\r\n                background: \"hsl(220, 95%, 55%)\",\r\n                transform: `translate(${mouse.x * -60 + 30}%, ${mouse.y * 50 - 25}%)`,\r\n                top: \"20%\",\r\n                left: \"-8%\",\r\n              }}\r\n            />\r\n            {/* Vivid orange */}\r\n            <div\r\n              className=\"sg:absolute sg:h-137.5 sg:w-137.5 sg:rounded-full sg:opacity-30 sg:blur-[70px] sg:transition-transform sg:duration-900 sg:ease-out\"\r\n              style={{\r\n                background: \"hsl(25, 95%, 55%)\",\r\n                transform: `translate(${mouse.x * 55 - 28}%, ${mouse.y * -55 + 28}%)`,\r\n                bottom: \"-5%\",\r\n                right: \"15%\",\r\n              }}\r\n            />\r\n            {/* Lime / green */}\r\n            <div\r\n              className=\"sg:absolute sg:h-100 sg:w-100 sg:rounded-full sg:opacity-25 sg:blur-[60px] sg:transition-transform sg:duration-400 sg:ease-out\"\r\n              style={{\r\n                background: \"hsl(145, 80%, 45%)\",\r\n                transform: `translate(${mouse.x * 80 - 40}%, ${mouse.y * 80 - 40}%)`,\r\n                top: \"5%\",\r\n                left: \"20%\",\r\n              }}\r\n            />\r\n            {/* Purple / violet */}\r\n            <div\r\n              className=\"sg:absolute sg:h-125 sg:w-125 sg:rounded-full sg:opacity-25 sg:blur-[75px] sg:transition-transform sg:duration-600 sg:ease-out\"\r\n              style={{\r\n                background: \"hsl(270, 85%, 55%)\",\r\n                transform: `translate(${mouse.x * -45 + 22}%, ${mouse.y * 65 - 32}%)`,\r\n                bottom: \"10%\",\r\n                left: \"30%\",\r\n              }}\r\n            />\r\n            {/* Yellow / gold accent */}\r\n            <div\r\n              className=\"sg:absolute sg:h-87.5 sg:w-87.5 sg:rounded-full sg:opacity-20 sg:blur-[50px] sg:transition-transform sg:duration-350 sg:ease-out\"\r\n              style={{\r\n                background: \"hsl(50, 95%, 55%)\",\r\n                transform: `translate(${mouse.x * 90 - 45}%, ${mouse.y * -70 + 35}%)`,\r\n                top: \"40%\",\r\n                right: \"5%\",\r\n              }}\r\n            />\r\n          </div>\r\n\r\n          {/* Sparkle / glitter particles */}\r\n          <div\r\n            className=\"sg:absolute sg:inset-0 sg:overflow-hidden sg:pointer-events-none\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            {sparkles.map((s) => (\r\n              <div\r\n                key={s.id}\r\n                className=\"sg:absolute sg:rounded-full\"\r\n                style={{\r\n                  left: `${s.left}%`,\r\n                  top: `${s.top}%`,\r\n                  width: s.size,\r\n                  height: s.size,\r\n                  background: `hsl(${(s.id * 47) % 360}, 90%, 70%)`,\r\n                  boxShadow: `0 0 ${s.size * 2}px hsl(${(s.id * 47) % 360}, 90%, 70%)`,\r\n                  animation: `sparkle ${s.duration}s ${s.delay}s ease-in-out infinite`,\r\n                  transform: `translate(${(mouse.x - 0.5) * s.size * 8}px, ${(mouse.y - 0.5) * s.size * 8}px)`,\r\n                  transition: \"transform 0.3s ease-out\",\r\n                }}\r\n              />\r\n            ))}\r\n          </div>\r\n\r\n          {/* Cursor spotlight */}\r\n          <div\r\n            className=\"sg:absolute sg:pointer-events-none\"\r\n            style={{\r\n              left: mousePixel.x - 150,\r\n              top: mousePixel.y - 150,\r\n              width: 300,\r\n              height: 300,\r\n              background:\r\n                \"radial-gradient(circle, hsla(0, 0%, 100%, 0.15) 0%, transparent 60%)\",\r\n              transition: \"left 0.1s ease-out, top 0.1s ease-out\",\r\n            }}\r\n            aria-hidden=\"true\"\r\n          />\r\n\r\n          {/* Click burst particles */}\r\n          <div\r\n            className=\"sg:absolute sg:inset-0 sg:pointer-events-none sg:overflow-hidden\"\r\n            aria-hidden=\"true\"\r\n          >\r\n            {bursts.map((b) => (\r\n              <div\r\n                key={b.id}\r\n                className=\"sg:absolute sg:rounded-full\"\r\n                style={\r\n                  {\r\n                    left: b.x,\r\n                    top: b.y,\r\n                    width: b.size,\r\n                    height: b.size,\r\n                    background: `hsl(${b.hue}, 90%, 65%)`,\r\n                    boxShadow: `0 0 ${b.size * 3}px hsl(${b.hue}, 90%, 65%)`,\r\n                    animation: `burst 0.7s ease-out forwards`,\r\n                    \"--burst-x\": `${Math.cos((b.angle * Math.PI) / 180) * b.speed}px`,\r\n                    \"--burst-y\": `${Math.sin((b.angle * Math.PI) / 180) * b.speed}px`,\r\n                  } as React.CSSProperties\r\n                }\r\n              />\r\n            ))}\r\n          </div>\r\n\r\n          {/* Subtle grain texture overlay */}\r\n          <div\r\n            className=\"sg:absolute sg:inset-0 sg:opacity-[0.02] sg:dark:opacity-[0.04] sg:pointer-events-none\"\r\n            style={{\r\n              backgroundImage:\r\n                \"url(\\\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\\\")\",\r\n            }}\r\n            aria-hidden=\"true\"\r\n          />\r\n\r\n          <Layout type=\"col\" className=\"sg:py-20 sg:md:py-32\">\r\n            <Layout.Col1 hideDiv>\r\n              {(title || titleAccent) && (\r\n                <Heading variant=\"h1\">\r\n                  {title}{\" \"}\r\n                  {titleAccent && (\r\n                    <TextSpan size=\"4xl\" foreground=\"primary\">\r\n                      {titleAccent}\r\n                    </TextSpan>\r\n                  )}\r\n                </Heading>\r\n              )}\r\n\r\n              {description && (\r\n                <Text\r\n                  size=\"lg\"\r\n                  foreground=\"muted-foreground\"\r\n                  className=\"sg:mt-6 sg:max-w-xl\"\r\n                >\r\n                  {description}\r\n                </Text>\r\n              )}\r\n\r\n              {(primaryCTA || secondaryCTA) && (\r\n                <Stack gap={3} direction=\"row\" wrap=\"wrap\" className=\"sg:mt-8\">\r\n                  {primaryCTA && (\r\n                    <LinkButton\r\n                      buttonSize=\"lg\"\r\n                      to={primaryCTA.href}\r\n                      className=\"sg:z-1\"\r\n                    >\r\n                      {primaryCTA.label}\r\n                    </LinkButton>\r\n                  )}\r\n                  {secondaryCTA && (\r\n                    <LinkButton\r\n                      variant=\"secondary\"\r\n                      buttonSize=\"lg\"\r\n                      to={secondaryCTA.href}\r\n                      className=\"sg:z-1\"\r\n                    >\r\n                      {secondaryCTA.label}\r\n                    </LinkButton>\r\n                  )}\r\n                </Stack>\r\n              )}\r\n            </Layout.Col1>\r\n          </Layout>\r\n\r\n          {/* Bottom fade to background */}\r\n          <div\r\n            className=\"sg:absolute sg:bottom-0 sg:left-0 sg:right-0 sg:h-32 sg:bg-linear-to-t sg:from-background sg:to-transparent sg:pointer-events-none\"\r\n            aria-hidden=\"true\"\r\n          />\r\n        </section>\r\n      </Layout.Col1>\r\n    </Layout>\r\n  );\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/components/templates/index.d.ts

@@ -1,3 +1,5 @@
-export { BlogPost } from './blogpost/blogpost.js';
-export { StartPage } from './startpage/startpage.js';
+export { Container } from './container/container.js';
+export { Footer } from './footer/footer.js';
+export { Header, HeaderProps, NavLink } from './navigation/header.js';
 import 'react/jsx-runtime';
+import 'react';

package/dist/components/templates/index.js

@@ -1,3 +1,5 @@
-export * from "./blogpost/blogpost";
-export * from "./startpage/startpage";
+export * from "./container/container.js";
+export * from "./footer/footer.js";
+export * from "./hero/hero.js";
+export * from "./navigation/index.js";
 //# sourceMappingURL=index.js.map

package/dist/components/templates/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/templates/index.ts"],"sourcesContent":["export * from \"./blogpost/blogpost\";\r\nexport * from \"./startpage/startpage\";\r\n"],"mappings":"AAAA,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../../src/components/templates/index.ts"],"sourcesContent":["/**\n * Templates index\n *\n * Please keep exports sorted alphabetically by path!\n */\n\nexport * from \"./container/container\";\nexport * from \"./footer/footer\";\nexport * from \"./hero/hero\";\nexport * from \"./navigation/index\";\n"],"mappings":"AAMA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/components/templates/navigation/header.d.ts

@@ -0,0 +1,19 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface NavLink {
+    label: string;
+    to: string;
+}
+interface HeaderProps {
+    navLinks?: NavLink[];
+    extrasLinks?: NavLink[];
+    logo?: React.ReactNode;
+    currentPath?: string;
+    loginPath?: string;
+    loginLabel?: string;
+    extrasLabel?: string;
+}
+declare function Header({ navLinks, extrasLinks, logo, currentPath, loginPath, loginLabel, extrasLabel, }: HeaderProps): react_jsx_runtime.JSX.Element;
+
+export { Header, type HeaderProps, type NavLink };

package/dist/components/templates/navigation/header.js

@@ -0,0 +1,222 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "../../primitives/buttons/button.js";
+import {
+  Sheet,
+  SheetContent,
+  SheetTrigger,
+  SheetTitle
+} from "../../primitives/sheet/sheet.js";
+import { useTheme } from "../../providers/theme-provider.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../../primitives/dropdown-menu/dropdown-menu.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "../../primitives/collapsible/collapsible.js";
+import { LinkButton } from "../../primitives/buttons/link-button.js";
+import { Link } from "../../primitives/link/link.js";
+import {
+  Icon,
+  IconButton,
+  Layout
+} from "singularity-components/components/primitives/index";
+function Header({
+  navLinks = [],
+  extrasLinks = [],
+  logo = "Singularity.",
+  currentPath = "/",
+  loginPath = "/login",
+  loginLabel = "Log in",
+  extrasLabel = "Extras"
+}) {
+  const { toggleTheme, resolvedTheme, mounted } = useTheme();
+  const [open, setOpen] = React.useState(false);
+  const headerRef = React.useRef(null);
+  const [spotlightPos, setSpotlightPos] = React.useState({ x: -200, y: -200 });
+  const isActive = (path) => path === "/" ? currentPath === "/" : currentPath.startsWith(path);
+  const handleMouseMove = React.useCallback(
+    (e) => {
+      const rect = headerRef.current?.getBoundingClientRect();
+      if (!rect) return;
+      setSpotlightPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+    },
+    []
+  );
+  const handleMouseLeave = React.useCallback(() => {
+    setSpotlightPos({ x: -200, y: -200 });
+  }, []);
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    Layout,
+    {
+      className: "border-b border-gray-light",
+      as: "header",
+      onMouseMove: handleMouseMove,
+      onMouseLeave: handleMouseLeave,
+      children: /* @__PURE__ */ jsxs(Layout.Col1, { hideDiv: true, children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sg:absolute sg:pointer-events-none sg:transition-opacity sg:duration-300",
+            style: {
+              left: spotlightPos.x - 120,
+              top: spotlightPos.y - 120,
+              width: 240,
+              height: 240,
+              background: "radial-gradient(circle, hsl(var(--sg-primary) / 0.15) 0%, transparent 70%)",
+              opacity: spotlightPos.x < 0 ? 0 : 1
+            },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "sg:container sg:mx-auto sg:flex sg:h-16 sg:items-center sg:justify-between sg:relative sg:px-4", children: [
+          /* @__PURE__ */ jsx(Link, { to: "/", variant: "logo", children: logo }),
+          /* @__PURE__ */ jsxs(
+            "nav",
+            {
+              className: "sg:hidden sg:md:flex sg:items-center sg:gap-1",
+              "aria-label": "Main navigation",
+              children: [
+                navLinks.map((link) => /* @__PURE__ */ jsx(
+                  Link,
+                  {
+                    to: link.to,
+                    variant: isActive(link.to) ? "nav-desktop-active" : "nav-desktop",
+                    children: link.label
+                  },
+                  link.to
+                )),
+                extrasLinks.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                  /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", children: [
+                    extrasLabel,
+                    /* @__PURE__ */ jsx(Icon, { icon: "ChevronDown" })
+                  ] }) }),
+                  /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "start", children: [
+                    /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxs(
+                      Link,
+                      {
+                        to: "/extras",
+                        className: "sg:w-full",
+                        variant: "no-decoration",
+                        children: [
+                          "All ",
+                          extrasLabel
+                        ]
+                      }
+                    ) }),
+                    extrasLinks.map((link) => /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsx(
+                      Link,
+                      {
+                        to: link.to,
+                        className: "sg:w-full",
+                        variant: "no-decoration",
+                        children: link.label
+                      }
+                    ) }, link.to))
+                  ] })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "sg:flex sg:items-center sg:gap-2", children: [
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                variant: "ghost",
+                size: "sm",
+                icon: resolvedTheme === "light" ? "Moon" : "Sun",
+                onClick: toggleTheme,
+                "aria-label": mounted ? `Switch to ${resolvedTheme === "light" ? "dark" : "light"} mode` : "Switch theme"
+              }
+            ),
+            /* @__PURE__ */ jsx(LinkButton, { variant: "outline", size: "sm", to: loginPath, children: loginLabel }),
+            /* @__PURE__ */ jsx("div", { className: "sg:md:hidden", children: /* @__PURE__ */ jsxs(Sheet, { open, onOpenChange: setOpen, children: [
+              /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, className: "sg:md:hidden", children: /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  variant: "ghost",
+                  icon: "Menu",
+                  "aria-label": "Open menu"
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(SheetContent, { side: "right", className: "sg:w-72", children: [
+                /* @__PURE__ */ jsx(SheetTitle, { className: "sg:font-serif sg:text-xl sg:text-primary sg:mb-6", children: "Menu" }),
+                /* @__PURE__ */ jsxs(
+                  "nav",
+                  {
+                    className: "sg:flex sg:flex-col sg:gap-1",
+                    "aria-label": "Mobile navigation",
+                    children: [
+                      navLinks.map((link) => /* @__PURE__ */ jsx(
+                        Link,
+                        {
+                          to: link.to,
+                          variant: isActive(link.to) ? "nav-mobile-active" : "nav-mobile",
+                          onClick: () => setOpen(false),
+                          children: link.label
+                        },
+                        link.to
+                      )),
+                      extrasLinks.length > 0 && /* @__PURE__ */ jsxs(Collapsible, { children: [
+                        /* @__PURE__ */ jsxs(CollapsibleTrigger, { className: "sg:flex sg:items-center sg:justify-between sg:w-full sg:px-3 sg:py-3 sg:rounded-md sg:text-base sg:font-medium sg:transition-colors sg:hover:text-primary sg:text-muted-foreground sg:cursor-pointer", children: [
+                          extrasLabel,
+                          " ",
+                          /* @__PURE__ */ jsx(Icon, { icon: "ChevronDown" })
+                        ] }),
+                        /* @__PURE__ */ jsxs(CollapsibleContent, { className: "sg:pl-4 sg:flex sg:flex-col sg:gap-1", children: [
+                          /* @__PURE__ */ jsxs(
+                            Link,
+                            {
+                              to: "/extras",
+                              variant: "no-decoration",
+                              onClick: () => setOpen(false),
+                              className: "sg:px-3 sg:py-2 sg:rounded-md sg:text-sm sg:font-medium sg:text-muted-foreground sg:hover:text-primary sg:transition-colors",
+                              children: [
+                                "All ",
+                                extrasLabel
+                              ]
+                            }
+                          ),
+                          extrasLinks.map((link) => /* @__PURE__ */ jsx(
+                            Link,
+                            {
+                              to: link.to,
+                              variant: "no-decoration",
+                              onClick: () => setOpen(false),
+                              className: "sg:px-3 sg:py-2 sg:rounded-md sg:text-sm sg:font-medium sg:text-muted-foreground sg:hover:text-primary sg:transition-colors",
+                              children: link.label
+                            },
+                            link.to
+                          ))
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        LinkButton,
+                        {
+                          variant: "outline",
+                          to: loginPath,
+                          className: "sg:w-full sg:mt-4",
+                          onClick: () => setOpen(false),
+                          children: loginLabel
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            ] }) })
+          ] })
+        ] })
+      ] })
+    }
+  ) });
+}
+export {
+  Header
+};
+//# sourceMappingURL=header.js.map

package/dist/components/templates/navigation/header.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/templates/navigation/header.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Button } from \"../../primitives/buttons/button\";\nimport {\n  Sheet,\n  SheetContent,\n  SheetTrigger,\n  SheetTitle,\n} from \"../../primitives/sheet/sheet\";\nimport { useTheme } from \"../../providers/theme-provider\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"../../primitives/dropdown-menu/dropdown-menu\";\nimport {\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleTrigger,\n} from \"../../primitives/collapsible/collapsible\";\nimport { LinkButton } from \"../../primitives/buttons/link-button\";\nimport { Link } from \"../../primitives/link/link\";\nimport {\n  Icon,\n  IconButton,\n  Layout,\n} from \"singularity-components/components/primitives/index\";\n\nexport interface NavLink {\n  label: string;\n  to: string;\n}\n\nexport interface HeaderProps {\n  navLinks?: NavLink[];\n  extrasLinks?: NavLink[];\n  logo?: React.ReactNode;\n  currentPath?: string;\n  loginPath?: string;\n  loginLabel?: string;\n  extrasLabel?: string;\n}\n\nexport function Header({\n  navLinks = [],\n  extrasLinks = [],\n  logo = \"Singularity.\",\n  currentPath = \"/\",\n  loginPath = \"/login\",\n  loginLabel = \"Log in\",\n  extrasLabel = \"Extras\",\n}: HeaderProps) {\n  const { toggleTheme, resolvedTheme, mounted } = useTheme();\n  const [open, setOpen] = React.useState(false);\n  const headerRef = React.useRef<HTMLElement>(null);\n  const [spotlightPos, setSpotlightPos] = React.useState({ x: -200, y: -200 });\n\n  const isActive = (path: string) =>\n    path === \"/\" ? currentPath === \"/\" : currentPath.startsWith(path);\n\n  const handleMouseMove = React.useCallback(\n    (e: React.MouseEvent<HTMLElement>) => {\n      const rect = headerRef.current?.getBoundingClientRect();\n      if (!rect) return;\n      setSpotlightPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });\n    },\n    [],\n  );\n\n  const handleMouseLeave = React.useCallback(() => {\n    setSpotlightPos({ x: -200, y: -200 });\n  }, []);\n\n  return (\n    <>\n      <Layout\n        className=\"border-b border-gray-light\"\n        as=\"header\"\n        onMouseMove={handleMouseMove}\n        onMouseLeave={handleMouseLeave}\n        // ref={headerRef}\n      >\n        <Layout.Col1 hideDiv>\n          {/* Cursor spotlight */}\n          <div\n            className=\"sg:absolute sg:pointer-events-none sg:transition-opacity sg:duration-300\"\n            style={{\n              left: spotlightPos.x - 120,\n              top: spotlightPos.y - 120,\n              width: 240,\n              height: 240,\n              background:\n                \"radial-gradient(circle, hsl(var(--sg-primary) / 0.15) 0%, transparent 70%)\",\n              opacity: spotlightPos.x < 0 ? 0 : 1,\n            }}\n            aria-hidden=\"true\"\n          />\n          <div className=\"sg:container sg:mx-auto sg:flex sg:h-16 sg:items-center sg:justify-between sg:relative sg:px-4\">\n            {/* Logo */}\n            <Link to=\"/\" variant=\"logo\">\n              {logo}\n            </Link>\n\n            {/* Desktop nav */}\n            <nav\n              className=\"sg:hidden sg:md:flex sg:items-center sg:gap-1\"\n              aria-label=\"Main navigation\"\n            >\n              {navLinks.map((link) => (\n                <Link\n                  key={link.to}\n                  to={link.to}\n                  variant={\n                    isActive(link.to) ? \"nav-desktop-active\" : \"nav-desktop\"\n                  }\n                >\n                  {link.label}\n                </Link>\n              ))}\n\n              {/* Extras dropdown */}\n              {extrasLinks.length > 0 && (\n                <DropdownMenu>\n                  <DropdownMenuTrigger asChild>\n                    <Button variant=\"ghost\">\n                      {extrasLabel}\n                      <Icon icon=\"ChevronDown\" />\n                    </Button>\n                  </DropdownMenuTrigger>\n                  <DropdownMenuContent align=\"start\">\n                    <DropdownMenuItem asChild>\n                      <Link\n                        to=\"/extras\"\n                        className=\"sg:w-full\"\n                        variant=\"no-decoration\"\n                      >\n                        All {extrasLabel}\n                      </Link>\n                    </DropdownMenuItem>\n                    {extrasLinks.map((link) => (\n                      <DropdownMenuItem key={link.to} asChild>\n                        <Link\n                          to={link.to}\n                          className=\"sg:w-full\"\n                          variant=\"no-decoration\"\n                        >\n                          {link.label}\n                        </Link>\n                      </DropdownMenuItem>\n                    ))}\n                  </DropdownMenuContent>\n                </DropdownMenu>\n              )}\n            </nav>\n\n            <div className=\"sg:flex sg:items-center sg:gap-2\">\n              {/* Theme toggle */}\n              <IconButton\n                variant=\"ghost\"\n                size=\"sm\"\n                icon={resolvedTheme === \"light\" ? \"Moon\" : \"Sun\"}\n                onClick={toggleTheme}\n                aria-label={\n                  mounted\n                    ? `Switch to ${resolvedTheme === \"light\" ? \"dark\" : \"light\"} mode`\n                    : \"Switch theme\"\n                }\n              />\n\n              {/* Login link - desktop */}\n              <LinkButton variant=\"outline\" size=\"sm\" to={loginPath}>\n                {loginLabel}\n              </LinkButton>\n\n              {/* Mobile menu */}\n              <div className=\"sg:md:hidden\">\n                <Sheet open={open} onOpenChange={setOpen}>\n                  <SheetTrigger asChild className=\"sg:md:hidden\">\n                    <IconButton\n                      variant=\"ghost\"\n                      icon=\"Menu\"\n                      aria-label={\"Open menu\"}\n                    />\n                  </SheetTrigger>\n                  <SheetContent side=\"right\" className=\"sg:w-72\">\n                    <SheetTitle className=\"sg:font-serif sg:text-xl sg:text-primary sg:mb-6\">\n                      Menu\n                    </SheetTitle>\n                    <nav\n                      className=\"sg:flex sg:flex-col sg:gap-1\"\n                      aria-label=\"Mobile navigation\"\n                    >\n                      {navLinks.map((link) => (\n                        <Link\n                          key={link.to}\n                          to={link.to}\n                          variant={\n                            isActive(link.to)\n                              ? \"nav-mobile-active\"\n                              : \"nav-mobile\"\n                          }\n                          onClick={() => setOpen(false)}\n                        >\n                          {link.label}\n                        </Link>\n                      ))}\n                      {/* Extras collapsible */}\n                      {extrasLinks.length > 0 && (\n                        <Collapsible>\n                          <CollapsibleTrigger className=\"sg:flex sg:items-center sg:justify-between sg:w-full sg:px-3 sg:py-3 sg:rounded-md sg:text-base sg:font-medium sg:transition-colors sg:hover:text-primary sg:text-muted-foreground sg:cursor-pointer\">\n                            {extrasLabel} <Icon icon=\"ChevronDown\" />\n                          </CollapsibleTrigger>\n                          <CollapsibleContent className=\"sg:pl-4 sg:flex sg:flex-col sg:gap-1\">\n                            <Link\n                              to=\"/extras\"\n                              variant=\"no-decoration\"\n                              onClick={() => setOpen(false)}\n                              className=\"sg:px-3 sg:py-2 sg:rounded-md sg:text-sm sg:font-medium sg:text-muted-foreground sg:hover:text-primary sg:transition-colors\"\n                            >\n                              All {extrasLabel}\n                            </Link>\n                            {extrasLinks.map((link) => (\n                              <Link\n                                key={link.to}\n                                to={link.to}\n                                variant=\"no-decoration\"\n                                onClick={() => setOpen(false)}\n                                className=\"sg:px-3 sg:py-2 sg:rounded-md sg:text-sm sg:font-medium sg:text-muted-foreground sg:hover:text-primary sg:transition-colors\"\n                              >\n                                {link.label}\n                              </Link>\n                            ))}\n                          </CollapsibleContent>\n                        </Collapsible>\n                      )}\n                      <LinkButton\n                        variant=\"outline\"\n                        to={loginPath}\n                        className=\"sg:w-full sg:mt-4\"\n                        onClick={() => setOpen(false)}\n                      >\n                        {loginLabel}\n                      </LinkButton>\n                    </nav>\n                  </SheetContent>\n                </Sheet>\n              </div>\n            </div>\n          </div>\n        </Layout.Col1>\n      </Layout>\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/templates/navigation/index.d.ts

@@ -0,0 +1,3 @@
+export { Header, HeaderProps, NavLink } from './header.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/components/templates/navigation/index.js

@@ -0,0 +1,2 @@
+export * from "./header.js";
+//# sourceMappingURL=index.js.map

package/dist/components/templates/navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/templates/navigation/index.ts"],"sourcesContent":["/**\n * Navigation templates index\n *\n * Please keep exports sorted alphabetically by path!\n */\n\nexport * from \"./header\";\n"],"mappings":"AAMA,cAAc;","names":[]}

package/dist/css/variables.css

@@ -1,7 +1,7 @@
 :root {
   --sg-black: oklch(0.25 0 0);
   --sg-charcoal: oklch(0.35 0.01 60);
-  --sg-ash: oklch(0.55 0 0);
+  --sg-ash: oklch(0.44 0 0);
   --sg-silver: oklch(0.78 0.01 60);
   --sg-fog: oklch(0.92 0.005 240);
   --sg-cream: oklch(0.97 0.01 80);
@@ -17,7 +17,7 @@
   --sg-night: oklch(0.22 0.01 60);
   --sg-onyx: oklch(0.28 0 0);
   --sg-slate: oklch(0.43 0 0);
-  --sg-dove: oklch(0.7 0.01 60);
+  --sg-dove: oklch(0.82 0.01 60);
   --sg-cloud: oklch(0.88 0.01 60);
   --sg-background: var(--sg-cream);
   --sg-foreground: var(--sg-black);

package/dist/css/variables.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/css/variables.css"],"sourcesContent":[":root {\n  /* Neutrals */\n  --sg-black: oklch(0.25 0 0);\n  --sg-charcoal: oklch(0.35 0.01 60);\n  --sg-ash: oklch(0.55 0 0);\n  --sg-silver: oklch(0.78 0.01 60);\n  --sg-fog: oklch(0.92 0.005 240);\n  --sg-cream: oklch(0.97 0.01 80);\n  --sg-white: oklch(0.99 0.005 80);\n  --sg-pure-white: oklch(1 0 0);\n\n  /* Brand colors */\n  --sg-terracotta: oklch(0.52 0.15 35);\n  --sg-terracotta-light: oklch(0.65 0.16 35);\n  --sg-amber: oklch(0.72 0.15 75);\n  --sg-amber-dark: oklch(0.45 0.08 75);\n  --sg-sand: oklch(0.93 0.03 80);\n\n  /* Feedback */\n  --sg-crimson: oklch(0.55 0.22 25);\n  --sg-crimson-light: oklch(0.6 0.2 25);\n\n  /* Dark mode neutrals */\n  --sg-night: oklch(0.22 0.01 60);\n  --sg-onyx: oklch(0.28 0 0);\n  --sg-slate: oklch(0.43 0 0);\n  --sg-dove: oklch(0.7 0.01 60);\n  --sg-cloud: oklch(0.88 0.01 60);\n\n  /* ── Semantic mapping – Light mode ── */\n  --sg-background: var(--sg-cream);\n  --sg-foreground: var(--sg-black);\n\n  --sg-card: var(--sg-pure-white);\n  --sg-card-foreground: var(--sg-black);\n\n  --sg-popover: var(--sg-pure-white);\n  --sg-popover-foreground: var(--sg-black);\n\n  --sg-primary: var(--sg-terracotta);\n  --sg-primary-foreground: var(--sg-cream);\n\n  --sg-secondary: var(--sg-amber);\n  --sg-secondary-foreground: var(--sg-black);\n\n  --sg-muted: var(--sg-fog);\n  --sg-muted-foreground: var(--sg-ash);\n\n  --sg-accent: var(--sg-sand);\n  --sg-accent-foreground: var(--sg-charcoal);\n\n  --sg-destructive: var(--sg-crimson);\n  --sg-destructive-foreground: var(--sg-cream);\n\n  --sg-border: var(--sg-silver);\n  --sg-input: var(--sg-silver);\n  --sg-ring: var(--sg-terracotta);\n\n  --sg-radius: 0.5rem;\n\n  --sg-sidebar-background: var(--sg-cream);\n  --sg-sidebar-foreground: var(--sg-black);\n  --sg-sidebar-primary: var(--sg-terracotta);\n  --sg-sidebar-primary-foreground: var(--sg-cream);\n  --sg-sidebar-accent: var(--sg-fog);\n  --sg-sidebar-accent-foreground: var(--sg-charcoal);\n  --sg-sidebar-border: var(--sg-silver);\n  --sg-sidebar-ring: var(--sg-terracotta);\n}\n\n.dark {\n  --sg-background: var(--sg-charcoal);\n  --sg-foreground: var(--sg-cloud);\n\n  --sg-card: var(--sg-night);\n  --sg-card-foreground: var(--sg-cloud);\n\n  --sg-popover: var(--sg-night);\n  --sg-popover-foreground: var(--sg-cloud);\n\n  --sg-primary: var(--sg-terracotta-light);\n  --sg-primary-foreground: var(--sg-night);\n\n  --sg-secondary: var(--sg-amber);\n  --sg-secondary-foreground: var(--sg-night);\n\n  --sg-muted: var(--sg-slate);\n  --sg-muted-foreground: var(--sg-dove);\n\n  --sg-accent: var(--sg-onyx);\n  --sg-accent-foreground: var(--sg-cloud);\n\n  --sg-destructive: var(--sg-crimson-light);\n  --sg-destructive-foreground: var(--sg-cream);\n\n  --sg-border: var(--sg-slate);\n  --sg-input: var(--sg-slate);\n  --sg-ring: var(--sg-terracotta-light);\n\n  --sg-sidebar-background: var(--sg-night);\n  --sg-sidebar-foreground: var(--sg-cloud);\n  --sg-sidebar-primary: var(--sg-terracotta-light);\n  --sg-sidebar-primary-foreground: var(--sg-night);\n  --sg-sidebar-accent: var(--sg-onyx);\n  --sg-sidebar-accent-foreground: var(--sg-cloud);\n  --sg-sidebar-border: var(--sg-slate);\n  --sg-sidebar-ring: var(--sg-terracotta-light);\n}\n"],"mappings":"AAAA;AAEE,cAAY,MAAM,KAAK,EAAE;AACzB,iBAAe,MAAM,KAAK,KAAK;AAC/B,YAAU,MAAM,KAAK,EAAE;AACvB,eAAa,MAAM,KAAK,KAAK;AAC7B,YAAU,MAAM,KAAK,MAAM;AAC3B,cAAY,MAAM,KAAK,KAAK;AAC5B,cAAY,MAAM,KAAK,MAAM;AAC7B,mBAAiB,MAAM,EAAE,EAAE;AAG3B,mBAAiB,MAAM,KAAK,KAAK;AACjC,yBAAuB,MAAM,KAAK,KAAK;AACvC,cAAY,MAAM,KAAK,KAAK;AAC5B,mBAAiB,MAAM,KAAK,KAAK;AACjC,aAAW,MAAM,KAAK,KAAK;AAG3B,gBAAc,MAAM,KAAK,KAAK;AAC9B,sBAAoB,MAAM,IAAI,IAAI;AAGlC,cAAY,MAAM,KAAK,KAAK;AAC5B,aAAW,MAAM,KAAK,EAAE;AACxB,cAAY,MAAM,KAAK,EAAE;AACzB,aAAW,MAAM,IAAI,KAAK;AAC1B,cAAY,MAAM,KAAK,KAAK;AAG5B,mBAAiB,IAAI;AACrB,mBAAiB,IAAI;AAErB,aAAW,IAAI;AACf,wBAAsB,IAAI;AAE1B,gBAAc,IAAI;AAClB,2BAAyB,IAAI;AAE7B,gBAAc,IAAI;AAClB,2BAAyB,IAAI;AAE7B,kBAAgB,IAAI;AACpB,6BAA2B,IAAI;AAE/B,cAAY,IAAI;AAChB,yBAAuB,IAAI;AAE3B,eAAa,IAAI;AACjB,0BAAwB,IAAI;AAE5B,oBAAkB,IAAI;AACtB,+BAA6B,IAAI;AAEjC,eAAa,IAAI;AACjB,cAAY,IAAI;AAChB,aAAW,IAAI;AAEf,eAAa;AAEb,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,wBAAsB,IAAI;AAC1B,mCAAiC,IAAI;AACrC,uBAAqB,IAAI;AACzB,kCAAgC,IAAI;AACpC,uBAAqB,IAAI;AACzB,qBAAmB,IAAI;AACzB;AAEA,CAAC;AACC,mBAAiB,IAAI;AACrB,mBAAiB,IAAI;AAErB,aAAW,IAAI;AACf,wBAAsB,IAAI;AAE1B,gBAAc,IAAI;AAClB,2BAAyB,IAAI;AAE7B,gBAAc,IAAI;AAClB,2BAAyB,IAAI;AAE7B,kBAAgB,IAAI;AACpB,6BAA2B,IAAI;AAE/B,cAAY,IAAI;AAChB,yBAAuB,IAAI;AAE3B,eAAa,IAAI;AACjB,0BAAwB,IAAI;AAE5B,oBAAkB,IAAI;AACtB,+BAA6B,IAAI;AAEjC,eAAa,IAAI;AACjB,cAAY,IAAI;AAChB,aAAW,IAAI;AAEf,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,wBAAsB,IAAI;AAC1B,mCAAiC,IAAI;AACrC,uBAAqB,IAAI;AACzB,kCAAgC,IAAI;AACpC,uBAAqB,IAAI;AACzB,qBAAmB,IAAI;AACzB;","names":[]}
+{"version":3,"sources":["../../src/css/variables.css"],"sourcesContent":[":root {\n  /* Neutrals */\n  --sg-black: oklch(0.25 0 0);\n  --sg-charcoal: oklch(0.35 0.01 60);\n  --sg-ash: oklch(0.44 0 0);\n  --sg-silver: oklch(0.78 0.01 60);\n  --sg-fog: oklch(0.92 0.005 240);\n  --sg-cream: oklch(0.97 0.01 80);\n  --sg-white: oklch(0.99 0.005 80);\n  --sg-pure-white: oklch(1 0 0);\n\n  /* Brand colors */\n  --sg-terracotta: oklch(0.52 0.15 35);\n  --sg-terracotta-light: oklch(0.65 0.16 35);\n  --sg-amber: oklch(0.72 0.15 75);\n  --sg-amber-dark: oklch(0.45 0.08 75);\n  --sg-sand: oklch(0.93 0.03 80);\n\n  /* Feedback */\n  --sg-crimson: oklch(0.55 0.22 25);\n  --sg-crimson-light: oklch(0.6 0.2 25);\n\n  /* Dark mode neutrals */\n  --sg-night: oklch(0.22 0.01 60);\n  --sg-onyx: oklch(0.28 0 0);\n  --sg-slate: oklch(0.43 0 0);\n  --sg-dove: oklch(0.82 0.01 60);\n  --sg-cloud: oklch(0.88 0.01 60);\n\n  /* ── Semantic mapping – Light mode ── */\n  --sg-background: var(--sg-cream);\n  --sg-foreground: var(--sg-black);\n\n  --sg-card: var(--sg-pure-white);\n  --sg-card-foreground: var(--sg-black);\n\n  --sg-popover: var(--sg-pure-white);\n  --sg-popover-foreground: var(--sg-black);\n\n  --sg-primary: var(--sg-terracotta);\n  --sg-primary-foreground: var(--sg-cream);\n\n  --sg-secondary: var(--sg-amber);\n  --sg-secondary-foreground: var(--sg-black);\n\n  --sg-muted: var(--sg-fog);\n  --sg-muted-foreground: var(--sg-ash);\n\n  --sg-accent: var(--sg-sand);\n  --sg-accent-foreground: var(--sg-charcoal);\n\n  --sg-destructive: var(--sg-crimson);\n  --sg-destructive-foreground: var(--sg-cream);\n\n  --sg-border: var(--sg-silver);\n  --sg-input: var(--sg-silver);\n  --sg-ring: var(--sg-terracotta);\n\n  --sg-radius: 0.5rem;\n\n  --sg-sidebar-background: var(--sg-cream);\n  --sg-sidebar-foreground: var(--sg-black);\n  --sg-sidebar-primary: var(--sg-terracotta);\n  --sg-sidebar-primary-foreground: var(--sg-cream);\n  --sg-sidebar-accent: var(--sg-fog);\n  --sg-sidebar-accent-foreground: var(--sg-charcoal);\n  --sg-sidebar-border: var(--sg-silver);\n  --sg-sidebar-ring: var(--sg-terracotta);\n}\n\n.dark {\n  --sg-background: var(--sg-charcoal);\n  --sg-foreground: var(--sg-cloud);\n\n  --sg-card: var(--sg-night);\n  --sg-card-foreground: var(--sg-cloud);\n\n  --sg-popover: var(--sg-night);\n  --sg-popover-foreground: var(--sg-cloud);\n\n  --sg-primary: var(--sg-terracotta-light);\n  --sg-primary-foreground: var(--sg-night);\n\n  --sg-secondary: var(--sg-amber);\n  --sg-secondary-foreground: var(--sg-night);\n\n  --sg-muted: var(--sg-slate);\n  --sg-muted-foreground: var(--sg-dove);\n\n  --sg-accent: var(--sg-onyx);\n  --sg-accent-foreground: var(--sg-cloud);\n\n  --sg-destructive: var(--sg-crimson-light);\n  --sg-destructive-foreground: var(--sg-cream);\n\n  --sg-border: var(--sg-slate);\n  --sg-input: var(--sg-slate);\n  --sg-ring: var(--sg-terracotta-light);\n\n  --sg-sidebar-background: var(--sg-night);\n  --sg-sidebar-foreground: var(--sg-cloud);\n  --sg-sidebar-primary: var(--sg-terracotta-light);\n  --sg-sidebar-primary-foreground: var(--sg-night);\n  --sg-sidebar-accent: var(--sg-onyx);\n  --sg-sidebar-accent-foreground: var(--sg-cloud);\n  --sg-sidebar-border: var(--sg-slate);\n  --sg-sidebar-ring: var(--sg-terracotta-light);\n}\n"],"mappings":"AAAA;AAEE,cAAY,MAAM,KAAK,EAAE;AACzB,iBAAe,MAAM,KAAK,KAAK;AAC/B,YAAU,MAAM,KAAK,EAAE;AACvB,eAAa,MAAM,KAAK,KAAK;AAC7B,YAAU,MAAM,KAAK,MAAM;AAC3B,cAAY,MAAM,KAAK,KAAK;AAC5B,cAAY,MAAM,KAAK,MAAM;AAC7B,mBAAiB,MAAM,EAAE,EAAE;AAG3B,mBAAiB,MAAM,KAAK,KAAK;AACjC,yBAAuB,MAAM,KAAK,KAAK;AACvC,cAAY,MAAM,KAAK,KAAK;AAC5B,mBAAiB,MAAM,KAAK,KAAK;AACjC,aAAW,MAAM,KAAK,KAAK;AAG3B,gBAAc,MAAM,KAAK,KAAK;AAC9B,sBAAoB,MAAM,IAAI,IAAI;AAGlC,cAAY,MAAM,KAAK,KAAK;AAC5B,aAAW,MAAM,KAAK,EAAE;AACxB,cAAY,MAAM,KAAK,EAAE;AACzB,aAAW,MAAM,KAAK,KAAK;AAC3B,cAAY,MAAM,KAAK,KAAK;AAG5B,mBAAiB,IAAI;AACrB,mBAAiB,IAAI;AAErB,aAAW,IAAI;AACf,wBAAsB,IAAI;AAE1B,gBAAc,IAAI;AAClB,2BAAyB,IAAI;AAE7B,gBAAc,IAAI;AAClB,2BAAyB,IAAI;AAE7B,kBAAgB,IAAI;AACpB,6BAA2B,IAAI;AAE/B,cAAY,IAAI;AAChB,yBAAuB,IAAI;AAE3B,eAAa,IAAI;AACjB,0BAAwB,IAAI;AAE5B,oBAAkB,IAAI;AACtB,+BAA6B,IAAI;AAEjC,eAAa,IAAI;AACjB,cAAY,IAAI;AAChB,aAAW,IAAI;AAEf,eAAa;AAEb,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,wBAAsB,IAAI;AAC1B,mCAAiC,IAAI;AACrC,uBAAqB,IAAI;AACzB,kCAAgC,IAAI;AACpC,uBAAqB,IAAI;AACzB,qBAAmB,IAAI;AACzB;AAEA,CAAC;AACC,mBAAiB,IAAI;AACrB,mBAAiB,IAAI;AAErB,aAAW,IAAI;AACf,wBAAsB,IAAI;AAE1B,gBAAc,IAAI;AAClB,2BAAyB,IAAI;AAE7B,gBAAc,IAAI;AAClB,2BAAyB,IAAI;AAE7B,kBAAgB,IAAI;AACpB,6BAA2B,IAAI;AAE/B,cAAY,IAAI;AAChB,yBAAuB,IAAI;AAE3B,eAAa,IAAI;AACjB,0BAAwB,IAAI;AAE5B,oBAAkB,IAAI;AACtB,+BAA6B,IAAI;AAEjC,eAAa,IAAI;AACjB,cAAY,IAAI;AAChB,aAAW,IAAI;AAEf,2BAAyB,IAAI;AAC7B,2BAAyB,IAAI;AAC7B,wBAAsB,IAAI;AAC1B,mCAAiC,IAAI;AACrC,uBAAqB,IAAI;AACzB,kCAAgC,IAAI;AACpC,uBAAqB,IAAI;AACzB,qBAAmB,IAAI;AACzB;","names":[]}

package/dist/data/authors.d.ts

@@ -0,0 +1,12 @@
+interface Author {
+    name: string;
+    slug: string;
+    bio: string;
+    avatar: string;
+    role: string;
+    location: string;
+    interests: string[];
+}
+declare const authors: Author[];
+
+export { type Author, authors };

package/dist/data/authors.js

@@ -0,0 +1,33 @@
+const authors = [
+  {
+    name: "Elena Marsh",
+    slug: "elena-marsh",
+    bio: "Elena is a writer and wellness advocate who explores the intersection of mindfulness, slow living, and everyday rituals. Her work encourages readers to find beauty in simplicity and presence in the mundane.",
+    avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop&crop=face",
+    role: "Wellness Writer",
+    location: "Portland, Oregon",
+    interests: ["Slow living", "Meditation", "Herbalism", "Ceramics"]
+  },
+  {
+    name: "James Kato",
+    slug: "james-kato",
+    bio: "James is a designer and creative thinker who writes about intentional design, minimalism, and the power of constraints. He believes great work comes from knowing what to leave out.",
+    avatar: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop&crop=face",
+    role: "Design Writer",
+    location: "Tokyo, Japan",
+    interests: ["Typography", "Minimalism", "Architecture", "Film"]
+  },
+  {
+    name: "Sofia Andersson",
+    slug: "sofia-andersson",
+    bio: "Sofia is a cultural journalist and traveler who documents rituals, traditions, and creative expression across the globe. Her writing bridges the gap between the familiar and the foreign.",
+    avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face",
+    role: "Cultural Journalist",
+    location: "Stockholm, Sweden",
+    interests: ["Travel", "Photography", "Folklore", "Letter writing"]
+  }
+];
+export {
+  authors
+};
+//# sourceMappingURL=authors.js.map

package/dist/data/authors.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/data/authors.ts"],"sourcesContent":["export interface Author {\r\n  name: string;\r\n  slug: string;\r\n  bio: string;\r\n  avatar: string;\r\n  role: string;\r\n  location: string;\r\n  interests: string[];\r\n}\r\n\r\nexport const authors: Author[] = [\r\n  {\r\n    name: \"Elena Marsh\",\r\n    slug: \"elena-marsh\",\r\n    bio: \"Elena is a writer and wellness advocate who explores the intersection of mindfulness, slow living, and everyday rituals. Her work encourages readers to find beauty in simplicity and presence in the mundane.\",\r\n    avatar:\r\n      \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop&crop=face\",\r\n    role: \"Wellness Writer\",\r\n    location: \"Portland, Oregon\",\r\n    interests: [\"Slow living\", \"Meditation\", \"Herbalism\", \"Ceramics\"],\r\n  },\r\n  {\r\n    name: \"James Kato\",\r\n    slug: \"james-kato\",\r\n    bio: \"James is a designer and creative thinker who writes about intentional design, minimalism, and the power of constraints. He believes great work comes from knowing what to leave out.\",\r\n    avatar:\r\n      \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop&crop=face\",\r\n    role: \"Design Writer\",\r\n    location: \"Tokyo, Japan\",\r\n    interests: [\"Typography\", \"Minimalism\", \"Architecture\", \"Film\"],\r\n  },\r\n  {\r\n    name: \"Sofia Andersson\",\r\n    slug: \"sofia-andersson\",\r\n    bio: \"Sofia is a cultural journalist and traveler who documents rituals, traditions, and creative expression across the globe. Her writing bridges the gap between the familiar and the foreign.\",\r\n    avatar:\r\n      \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face\",\r\n    role: \"Cultural Journalist\",\r\n    location: \"Stockholm, Sweden\",\r\n    interests: [\"Travel\", \"Photography\", \"Folklore\", \"Letter writing\"],\r\n  },\r\n];\r\n"],"mappings":"AAUO,MAAM,UAAoB;AAAA,EAC/B;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,KAAK;AAAA,IACL,QACE;AAAA,IACF,MAAM;AAAA,IACN,UAAU;AAAA,IACV,WAAW,CAAC,eAAe,cAAc,aAAa,UAAU;AAAA,EAClE;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,KAAK;AAAA,IACL,QACE;AAAA,IACF,MAAM;AAAA,IACN,UAAU;AAAA,IACV,WAAW,CAAC,cAAc,cAAc,gBAAgB,MAAM;AAAA,EAChE;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,MAAM;AAAA,IACN,KAAK;AAAA,IACL,QACE;AAAA,IACF,MAAM;AAAA,IACN,UAAU;AAAA,IACV,WAAW,CAAC,UAAU,eAAe,YAAY,gBAAgB;AAAA,EACnE;AACF;","names":[]}

package/dist/data/posts.d.ts

@@ -1,12 +1,14 @@
 interface BlogPost {
-    slug: string;
+    id: number;
     title: string;
     excerpt: string;
-    body: string;
-    image: string;
+    content: string;
+    primaryImage: string;
+    originalImage: string;
     date: string;
     author: string;
     featured?: boolean;
+    categories: string[];
 }
 interface Comment {
     id: string;