// ───────────────────────────────────────────────────────────────────────────── // sandric — workshop edition // Main app: tokens, products, hero variations, cards, page chrome. // Cork-board surface + drag/snap come from workshop-bench.jsx (window globals). // ───────────────────────────────────────────────────────────────────────────── const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "hero": "specimen" }/*EDITMODE-END*/; // ── tokens ────────────────────────────────────────────────────────────────── const TOK = { bg: '#E9E5DA', cream: '#E9E5DA', paper: '#F6F3EB', paperWarm: '#F4EFE0', paperCool: '#F0EDE3', paperCream: '#F8F2E0', ink: '#111110', sub: 'rgba(17,17,16,0.56)', hair: 'rgba(17,17,16,0.12)', rule: 'rgba(17,17,16,0.85)', ter: '#B6371E', fr: '"Fraunces", "Cormorant Garamond", Georgia, serif', sans: '"Inter Tight", "Söhne", system-ui, sans-serif', mono: '"JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace', }; // ── Products ──────────────────────────────────────────────────────────────── // Each card now also carries: paper tone, pin color index, serial code. const PRODUCTS = [ { id: 'ah', n: '01', serial: 'SAN·2025·001·AH', name: 'Agent Handover', domain: 'agenthandover.com', url: 'https://agenthandover.com', tag: 'AGENT', kind: 'image', img: 'assets/agenthandover-mascot.png', blurb: 'An agent that learns how you decide and gets sharper every run.', meta: 'macOS · 2025', paper: 'paper', pin: 0, status: 'LIVE' }, { id: 'dc', n: '02', serial: 'SAN·2025·002·DC', name: 'Dopamine Club', domain: 'dopamine.club', url: 'https://dopamine.club', tag: 'HEALTH', kind: 'type', img: null, blurb: 'Evidence-based biohacking supplements, matched to what your brain and body actually need.', meta: 'Web · 2025', paper: 'paperCream', pin: 3, status: 'BETA' }, { id: 'cl', n: '03', serial: 'SAN·2025·003·CL', name: 'Clime', domain: 'clime.sh', url: 'https://clime.sh', tag: 'INFRA', kind: 'type', img: null, blurb: '846+ command-line tools, in one human-and-agent registry.', meta: 'Web · 2025', paper: 'paperCool', pin: 1, status: 'LIVE' }, { id: 'ub', n: '04', serial: 'SAN·2025·004·UB', name: 'Unbury', domain: 'unbury.app', url: 'https://unbury.app', tag: 'iOS', kind: 'image', img: 'assets/unbury-cat.png', blurb: 'On-device AI for the screenshots you forgot you took.', meta: 'iOS · 2025', paper: 'paperWarm', pin: 2, status: 'LIVE' }, { id: 'ae', n: '05', serial: 'SAN·2024·005·AE', name: 'AInthusiast', domain: 'ainthusiast.com', url: 'https://ainthusiast.com', tag: 'RESEARCH', kind: 'image', img: 'assets/ainthusiast.png', blurb: 'Independent research into how language models actually think.', meta: 'Journal · 2024', paper: 'paper', pin: 5, status: 'ACTIVE' }, { id: 'ld', n: '06', serial: 'SAN·2026·006·LD', name: 'Latent Diaries', domain: 'latentdiaries.com', url: 'https://latentdiaries.com', tag: 'ARCHIVE', kind: 'type', img: null, blurb: 'A time capsule of early human–AI conversations.', meta: 'Archive · 2026', paper: 'paperCream', pin: 4, status: 'SOON' }, ]; const CARD_W = 330; const CARD_H = 480; // ── Barcode (deterministic from serial) ───────────────────────────────────── function Barcode({ code, w = 130, h = 32 }) { const bars = useMemo(() => { let s = 0; for (let i = 0; i < code.length; i++) s = ((s * 131 + code.charCodeAt(i)) >>> 0); const out = []; let x = 0; let bar = true; // alternate, but with varying widths while (x < w - 1) { // pseudo-random width 1..3 for bars, 1..2 for gaps s = (s * 1103515245 + 12345) >>> 0; const span = bar ? (1 + (s % 3)) : (1 + ((s >>> 4) % 2)); out.push({ x, w: span, bar }); x += span; bar = !bar; } return out; }, [code, w]); const barH = h - 9; return ( {bars.map((b, i) => b.bar && ( ))} {code} ); } // ── Plate ─────────────────────────────────────────────────────────────────── function Plate({ product, height = 188 }) { const isImg = product.kind === 'image' && product.img; // Custom typographic plates per product const renderType = () => { if (product.id === 'cl') { // Clime — CLI registry, mono wordmark "cli,me" with teal comma const compact = height < 130; return (
cli,me
$  846+ tools
); } if (product.id === 'dc') { // Dopamine Club — recreated logo card (avoids blurry low-res PNG) const compact = height < 130; const dcSize = compact ? 38 : 56; const labelSize = compact ? 10 : 13; const estSize = compact ? 6.5 : 8; return (
Dc
Dopamine
Club
{/* ESTD 2024 stacked vertical */}
ES
TD
20
24
); } if (product.id === 'ld') { // Latent Diaries — italic serif, two-line wordmark with year const compact = height < 130; const fs = compact ? 32 : 44; return (
Latent
Diaries
2 0 2 6
); } // Default typographic plate return (
{product.name.split(' ')[0]}
); }; return (
{isImg ? ( {product.name} ) : renderType()} {/* corner specimen mark */}
SPC·{product.n}
); } // ── Card ──────────────────────────────────────────────────────────────────── function Card({ product, layout, onChange, onBringToTop, onCommit, dragLayerRef, cardW = CARD_W, cardH = CARD_H, dragEnabled = true }) { const ref = useRef(null); const [hover, setHover] = useState(false); const [dragging, setDragging] = useState(false); const dragRef = useRef(null); const onPointerDown = useCallback((e) => { if (!dragEnabled) return; if (e.target && e.target.closest('[data-no-drag]')) return; if (e.button !== 0 && e.pointerType === 'mouse') return; e.preventDefault(); const layerRect = dragLayerRef.current.getBoundingClientRect(); const cardRect = ref.current.getBoundingClientRect(); dragRef.current = { pointerId: e.pointerId, startX: e.clientX, startY: e.clientY, dx: e.clientX - cardRect.left, dy: e.clientY - cardRect.top, layerLeft: layerRect.left, layerTop: layerRect.top, moved: false, }; setDragging(true); onBringToTop(product.id); try { ref.current.setPointerCapture(e.pointerId); } catch (_) {} document.body.classList.add('dragging'); }, [dragLayerRef, product.id, onBringToTop, dragEnabled]); const onPointerMove = useCallback((e) => { const d = dragRef.current; if (!d) return; const dx = e.clientX - d.startX; const dy = e.clientY - d.startY; if (!d.moved && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) d.moved = true; const nx = e.clientX - d.layerLeft - d.dx; const ny = e.clientY - d.layerTop - d.dy; onChange(product.id, { x: nx, y: ny }); }, [onChange, product.id]); const finishDrag = useCallback((e, opts = {}) => { const d = dragRef.current; if (!d) return; const wasClick = !d.moved && !opts.cancel; const wasMoved = d.moved; dragRef.current = null; setDragging(false); document.body.classList.remove('dragging'); try { ref.current.releasePointerCapture(d.pointerId); } catch (_) {} if (wasClick) { window.open(product.url, '_blank', 'noopener,noreferrer'); } else if (wasMoved) { onCommit(product.id); } }, [product.url, onCommit, product.id]); const onPointerUp = useCallback((e) => finishDrag(e), [finishDrag]); const onPointerCancel = useCallback((e) => finishDrag(e, { cancel: true }), [finishDrag]); const onKeyDown = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); window.open(product.url, '_blank', 'noopener,noreferrer'); } }; const liftRot = dragging ? layout.rot * 0.25 : layout.rot; const liftScale = dragging ? 1.05 : (hover ? 1.012 : 1); const liftY = dragging ? -8 : 0; // Lifted shadow is much taller — pin "lifts" off the cork const shadow = dragging ? '0 1px 0 rgba(0,0,0,0.05), 0 50px 70px -20px rgba(20, 12, 4, 0.55), 0 14px 24px rgba(20, 12, 4, 0.20)' : (hover ? '0 1px 0 rgba(0,0,0,0.05), 0 26px 36px -16px rgba(20, 12, 4, 0.40), 0 6px 10px rgba(20, 12, 4, 0.14)' : '0 1px 0 rgba(0,0,0,0.05), 0 16px 24px -14px rgba(20, 12, 4, 0.32), 0 3px 6px rgba(20, 12, 4, 0.10)'); // Per-card paper tone for variation const paper = TOK[product.paper] || TOK.paper; // Compact (small mobile) sizing const compact = cardH < 380; const sz = compact ? { pad: '16px 14px 14px', spec: 8.5, status: 7.5, name: 22, domainTop: 4, domain: 9.5, plate: 110, blurbTop: 10, blurb: 11.5, blurbLh: 1.4, barW: 92, barH: 22, barL: 14, barB: 10, openR: 14, openB: 13, openFs: 8.5, rowGap: 10, } : { pad: '24px 22px 22px', spec: 9.5, status: 8.5, name: 30, domainTop: 5, domain: 10.5, plate: cardH < 460 ? 140 : 188, blurbTop: 12, blurb: 13.5, blurbLh: 1.46, barW: 140, barH: 32, barL: 22, barB: 16, openR: 20, openB: 22, openFs: 10, rowGap: 14, }; return (
{ if (e.target && e.target.closest('[data-no-drag]')) return; window.open(product.url, '_blank', 'noopener,noreferrer'); } : undefined} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} onKeyDown={onKeyDown} style={{ position: 'absolute', left: layout.x, top: layout.y, width: cardW, height: cardH, transform: `translateY(${liftY}px) rotate(${liftRot}deg) scale(${liftScale})`, transformOrigin: '50% -10%', // pivot near the pin transition: dragging ? 'none' : 'transform 320ms cubic-bezier(.2,.8,.2,1), box-shadow 240ms ease', zIndex: layout.z, cursor: dragEnabled ? (dragging ? 'grabbing' : 'grab') : 'pointer', background: paper, color: TOK.ink, border: `1px solid rgba(17,17,16,0.10)`, padding: sz.pad, fontFamily: TOK.sans, boxShadow: shadow, userSelect: 'none', touchAction: dragEnabled ? 'none' : 'manipulation', outline: 'none', }} > {/* Subtle paper texture overlay */}
{/* spec line */}
№ {product.n} · {product.tag} {product.status}
); } // ── Toolbar button ────────────────────────────────────────────────────────── function ToolBtn({ children, onClick, first }) { const [h, setH] = useState(false); return ( ); } // ── Hero variations ───────────────────────────────────────────────────────── // (A) Literary — current direction, refined function HeroLiterary() { return (
ENTRY № 06 · 2026.05.04

A small{' '} workshop,
mostly always{' '} shipping.

Sandric is a one-person product studio operated by{' '} Sandro Andric. Six small machines in active use across AI, health, and developer infrastructure. Below is what's on the bench — pick anything up, move it, click to open.

); } // (B) Filing card — the hero IS a giant index card pinned to the cork function HeroFilingCard() { return (
{/* the pin sits inside the card; we mount the card on a strip of cork */}
{/* Ruled lines (top) */}
{/* punch hole */}
FILE № 06 STUDIO RECORD · SANDRIC. 2026.05.04

sandric — workshop
est. 2024 · six live

SIX MACHINES IN ACTIVE USE

A one-person studio operated by Sandro Andric. AI, health, and developer infrastructure. Pick anything off the board below.

); } // (C) Manifesto — bold typographic statement, no chrome function HeroManifesto() { return (
SANDRIC · WORKSHOP NOTES VOL. I · ENTRY № 06

No
side
projects,
only
early
ones.

OPERATED BY
SANDRO ANDRIC
FOCUS
AI · HEALTH · INFRA

Six small machines in active use across AI, health, and developer infrastructure. Below is what's on the bench — pick anything up, move it, click to open.

); } // (D) Ledger — horizontal printed studio ledger, six rows of in-flight work function HeroLedger() { const rows = [ ['01', 'AGENT HANDOVER', 'AGENT', 'macOS', 'LIVE'], ['02', 'DOPAMINE CLUB', 'HEALTH', 'Web', 'BETA'], ['03', 'CLIME', 'INFRA', 'Web', 'LIVE'], ['04', 'UNBURY', 'iOS', 'iOS', 'LIVE'], ['05', 'AINTHUSIAST', 'RESEARCH', 'Journal', 'ACTIVE'], ['06', 'LATENT DIARIES', 'ARCHIVE', 'Archive', 'SOON'], ]; return (
LEDGER · IN-FLIGHT WORK VOL. I · 2026.05

sandric.{' '} a one-person studio

STUDIO LEDGER · OPERATED BY SANDRO ANDRIC
№ NAME DOMAIN SURFACE STATUS
{rows.map((r, i) => (
{r[0]} {r[1]} {r[2]} {r[3]} {r[4]}
))}

Six small machines across AI, health, and developer infrastructure. Below is the bench — pick anything up, move it, click to open.

); } // (E) Specimen — single-idea hero. The wordmark is the page; a small // dictionary-style gloss sits beneath it, right-aligned to the wordmark's // right edge. Vertical meta in the right margin. No eyebrow, no CTA. function HeroSpecimen() { return (
{/* Main composition — wordmark stacked above gloss */}

sandric.

{/* Gloss — left caption + right italic, justified across the wordmark's full width with a thin rule above */}
n.  Sandric · /sand·ric/ a small product studio, run alone, shipping six.
{/* Right margin — vertical meta */}
Sandro Andric  ·  MMXXVI
); } function Hero({ which }) { if (which === 'card') return ; if (which === 'manifesto') return ; if (which === 'ledger') return ; if (which === 'specimen') return ; return ; } // ── Mobile detection hook ─────────────────────────────────────────────────── function useIsMobile(breakpoint = 720) { const [isMobile, setIsMobile] = useState( typeof window !== 'undefined' ? window.innerWidth <= breakpoint : false ); useEffect(() => { const onResize = () => setIsMobile(window.innerWidth <= breakpoint); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, [breakpoint]); return isMobile; } // ── Static card (mobile / no-drag) ────────────────────────────────────────── function StaticCard({ product }) { const [hover, setHover] = useState(false); const paper = TOK[product.paper] || TOK.paper; return ( setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: 'relative', display: 'block', width: '100%', background: paper, color: TOK.ink, border: `1px solid rgba(17,17,16,0.10)`, padding: '22px 20px 20px', fontFamily: TOK.sans, boxShadow: '0 1px 0 rgba(0,0,0,0.05), 0 16px 24px -14px rgba(20, 12, 4, 0.32), 0 3px 6px rgba(20, 12, 4, 0.10)', textDecoration: 'none', transition: 'transform 200ms ease, box-shadow 200ms ease', transform: hover ? 'translateY(-2px)' : 'none', }} > {/* Subtle paper texture overlay */}
{/* spec line */}
№ {product.n} · {product.tag} {product.status}
{product.name}
{product.domain}
{product.blurb}
{/* Bottom row: barcode + OPEN */}
OPEN ↗
); } // ── Workshop ──────────────────────────────────────────────────────────────── function Workshop() { const stageRef = useRef(null); const dragLayerRef = useRef(null); const [hint, setHint] = useState('drag to rearrange · click to open · cards snap on drop'); // Responsive viewport tracking const [vw, setVw] = useState(typeof window !== 'undefined' ? window.innerWidth : 1200); useEffect(() => { const onResize = () => setVw(window.innerWidth); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); const isMobile = vw <= 720; const isTablet = vw > 720 && vw <= 1024; // Responsive grid + card sizing const cols = isMobile ? 1 : isTablet ? 2 : 3; const padX = isMobile ? 18 : 56; const cardW = isMobile ? Math.max(200, Math.min(vw - 90, 240)) : (isTablet ? 300 : CARD_W); const cardH = isMobile ? 350 : CARD_H; const rows = Math.ceil(PRODUCTS.length / cols); const rowGap = isMobile ? 24 : 40; // useBench uses padY = 60 internally; match it here for consistent slot sizing const tidyHeight = 60 * 2 + rows * cardH + (rows - 1) * rowGap; // Default to stack on mobile so the page opens compact with the top card visible const initialMobileRef = useRef(typeof window !== 'undefined' && window.innerWidth <= 720); const [mode, setMode] = useState(initialMobileRef.current ? 'stack' : null); // On mobile, shrink the cork canvas for stack/scatter so it doesn't take the full tidy height const corkHeight = (isMobile && mode === 'stack') ? Math.max(cardH + 200, 460) : (isMobile && mode === 'scatter') ? Math.max(Math.ceil(tidyHeight * 0.55), cardH * 2 + 160) : tidyHeight; const tweaks = TWEAK_DEFAULTS; const { layouts, size, updateCard, bringToTop, commitDrop, arrange } = useBench({ products: PRODUCTS, stageRef, dragLayerRef, cardW, cardH, cols, padX, initialMode: initialMobileRef.current ? 'stack' : null, }); const doTidy = () => { setHint('tidied · everything to a clean grid'); setMode('tidy'); }; const doScatter = () => { setHint('scattered · soft snap on drop'); setMode('scatter'); }; const doStack = () => { setHint('stacked · click to fan out'); setMode('stack'); }; // After mode + corkHeight changes propagate to the stage size, run arrange. // Initial mode is already reflected in useBench's initial layout, so skip the first run. const lastArrangedRef = useRef({ mode: initialMobileRef.current ? 'stack' : null, h: 0, initialSkipped: false, }); useEffect(() => { if (!mode) return; if (size.w < 100) return; // Skip the first effect run if it matches the initialMode useBench already used if (!lastArrangedRef.current.initialSkipped && lastArrangedRef.current.mode === mode) { lastArrangedRef.current.initialSkipped = true; lastArrangedRef.current.h = size.h; return; } if (lastArrangedRef.current.mode === mode && Math.abs(lastArrangedRef.current.h - size.h) < 8) return; lastArrangedRef.current = { mode, h: size.h, initialSkipped: true }; arrange(mode); }, [mode, size.h, size.w, arrange]); return (
{/* Top bar */}
sandric.
AN INDEPENDENT PRODUCT STUDIO · SIX LIVE
{/* Section header */}
ON THE BENCH — 06 LIVE
TIDY SCATTER STACK
{hint}
{layouts && layouts.map((l) => { const product = PRODUCTS.find(p => p.id === l.id); return ( ); })}
{/* About */}
№ 02 · ABOUT

Sandro + Andric{' '} = sandric.

Sandric started because side projects kept outgrowing the side. An AI that learns how you decide. A biohacking supplement platform with real research behind it. A CLI registry I built for myself that, eight hundred tools later, still isn't done.

Each one began as a question nobody was answering. At some point you stop calling it a hobby.
{/* Footer */}
); } window.Workshop = Workshop;