16:I[54961,["/_next/static/immutable/chunks/23kzrxojb_1p2.js","/_next/static/immutable/chunks/39h58d1utebdp.js","/_next/static/immutable/chunks/2nrtc1lb04fz1.js","/_next/static/immutable/chunks/21y0r7k6jovn5.js","/_next/static/immutable/chunks/31l88bjo9blmv.js","/_next/static/immutable/chunks/2z8nc0r40hilq.js","/_next/static/immutable/chunks/27fhzxv1uvtm8.js"],"default"] 17:T33f8,'use client'; import { useEffect, useRef, useState, type CSSProperties } from 'react'; import { AnimatePresence, motion, useReducedMotion } from 'motion/react'; import { gardenPalettes, reconcileGarden, type GardenColors, type GardenLetter, type GardenFlower, type GardenArrangement, } from './garden-botany'; import { BotanicalLayer } from './garden-sprouts'; export type TypeGardenProps = { defaultText?: string; editable?: boolean; palette?: string | GardenColors; motionMode?: 'breeze' | 'grow' | 'pulse' | 'flutter'; floralDensity?: number; flowerType?: GardenFlower; arrangement?: GardenArrangement; showButterflies?: boolean; showControls?: boolean; paused?: boolean; compact?: boolean; className?: string; onTextChange?: (text: string) => void; onPaletteChange?: (palette: string) => void; }; export default function TypeGarden({ defaultText = 'Type Garden', editable = true, palette = 'Rose Noir', motionMode = 'breeze', floralDensity = 1, flowerType = 'rose', arrangement = 'wild', showButterflies = true, showControls = true, paused = false, compact = false, className = '', onTextChange, onPaletteChange, }: TypeGardenProps) { const host = useRef(null), input = useRef(null), nextId = useRef(0), [text, setText] = useState(defaultText.slice(0, 160)), [letters, setLetters] = useState(() => reconcileGarden([], defaultText.slice(0, 160), () => nextId.current++), ), [chosen, setChosen] = useState(palette), [size, setSize] = useState(70), [focused, setFocused] = useState(false), reduced = useReducedMotion(), still = paused || !!reduced; useEffect(() => setChosen(palette), [palette]); useEffect(() => { const value = defaultText.slice(0, 160); setText(value); setLetters((previous) => reconcileGarden(previous, value, () => nextId.current++)); }, [defaultText]); useEffect(() => { const element = host.current!, measure = document.createElement('canvas').getContext('2d')!; const resize = () => { measure.font = '100px Georgia'; const longest = Math.max( 1, ...text .split('\n') .map((line) => measure.measureText(line || ' ').width - line.length * 4.5), ); const rows = text.split('\n').length; setSize( Math.max( 14, Math.min( 120, ((element.clientWidth * 0.76) / longest) * 100, (element.clientHeight - (showControls ? 90 : 25)) / (rows * 1.7 + 1), ), ), ); element.dataset.ready = 'true'; }; resize(); const observer = new ResizeObserver(resize); observer.observe(element); return () => observer.disconnect(); }, [text, showControls]); useEffect(() => { const element = host.current!; let visible = true; const rest = () => { element.toggleAttribute('data-resting', !visible || document.hidden); }; const observer = new IntersectionObserver(([entry]) => { visible = entry.isIntersecting; rest(); }); observer.observe(element); document.addEventListener('visibilitychange', rest); return () => { observer.disconnect(); document.removeEventListener('visibilitychange', rest); }; }, []); const colors = typeof chosen === 'string' ? (gardenPalettes[chosen] ?? gardenPalettes['Rose Noir']) : chosen, density = Math.max(0.5, Math.min(2, floralDensity)); function update(value: string) { value = value.slice(0, 160); setText(value); setLetters((previous) => reconcileGarden(previous, value, () => nextId.current++)); onTextChange?.(value); } return (

{letters.map((letter, i) => letter.char === '\n' ? (
) : ( {letter.char.trim() && ( )} {letter.char} {letter.char.trim() && ( )} ), )} {text === '' && ( Grow a thought. )}

{editable ? (

update(e.target.value)}
            onFocus={() => setFocused(true)}
            onBlur={() => setFocused(false)}
            spellCheck={false}
            maxLength={160}
            rows={Math.max(1, text.split('\n').length)}
            wrap="off"
            className="mq-garden-input"
            style={{ caretColor: colors.text }}
          />
        ) : (
          <span className="mq-garden-sr">{text}</span>
        )}
        {showButterflies &&
          [0, 1, 2].map((i) => (
            <svg
              key={i}
              className={`mq-garden-butterfly mq-garden-butterfly-${i}`}
              viewBox="0 0 34 26"
              aria-hidden="true"
              style={{ color: i === 1 ? colors.flowers : colors.foliage }}
            >
              <g className="mq-garden-wings">
                <path
                  d="M17 13C4-11-7 6 10 15C-2 27 16 29 17 13ZM17 13C30-11 41 6 24 15C36 27 18 29 17 13Z"
                  fill="currentColor"
                />
                <path
                  d="m12 7 5 6 5-6M11 18l6-5 6 5"
                  fill="none"
                  stroke={colors.background}
                  strokeWidth=".8"
                />
              </g>
              <path
                d="M17 10v10m0-9-3-6m3 6 3-6"
                stroke="currentColor"
                strokeWidth="1"
                fill="none"
              />
            </svg>
          ))}
      </div>
      {showControls && (
        <div className="mq-garden-toolbar" aria-label="Garden palettes">
          {Object.entries(gardenPalettes).map(([name, p]) => (
            <button
              key={name}
              type="button"
              aria-label={name}
              title={name}
              aria-pressed={typeof chosen === 'string' && chosen === name}
              onClick={() => {
                setChosen(name);
                onPaletteChange?.(name);
              }}
            >
              <span
                style={{
                  background: `linear-gradient(135deg,${p.background} 50%,${p.flowers} 50%)`,
                  borderColor: p.text + '45',
                }}
              />
            </button>
          ))}
        </div>
      )}
      {editable && !compact && !focused && (
        <span className="mq-garden-hint">Click the letters. Let something grow.</span>
      )}
    </div>
  );
}
const styles = `.mq-garden{position:relative;width:100%;height:100%;min-height:220px;display:grid;place-items:center;overflow:hidden;isolation:isolate;transition:background .6s,color .6s}.mq-garden-composition{position:relative;max-width:100%;margin-bottom:15px;font-family:Georgia,serif;line-height:1.18;letter-spacing:-.045em;font-kerning:none;font-variant-ligatures:none;font-weight:400;text-align:center;white-space:pre}.mq-garden-word{position:relative;pointer-events:none;min-width:1em;min-height:1.18em}.mq-garden-letter{display:inline-block;position:relative;white-space:pre}.mq-garden-glyph{position:relative;z-index:20;line-height:1.18}.mq-garden-botany{position:absolute;left:-.08em;top:0;width:.85em;height:1.18em;pointer-events:none}.mq-garden-back{z-index:10}.mq-garden-front{z-index:30}.mq-garden-sway{animation:mq-garden-breeze 5.5s ease-in-out infinite alternate;transform-box:fill-box}.mq-garden-grow .mq-garden-sway{animation:mq-garden-grow 6s ease-in-out infinite;animation-delay:var(--garden-delay,0s)}.mq-garden-pulse .mq-garden-sway{animation:mq-garden-pulse 2.5s ease-in-out infinite alternate}.mq-garden-flutter .mq-garden-butterfly{animation-duration:5s}.mq-garden-flutter .mq-garden-wings{animation-duration:.15s}.mq-garden-flutter .mq-garden-sway{animation:mq-garden-flutter 2s ease-in-out infinite alternate}.mq-garden-input{position:absolute;inset:0;width:100%;height:100%;font:inherit;line-height:1.18;letter-spacing:inherit;font-kerning:none;font-variant-ligatures:none;text-align:center;padding:0;margin:0;border:0;outline:0;background:transparent;resize:none;color:transparent;-webkit-text-fill-color:transparent;overflow:hidden;z-index:40;white-space:pre;cursor:text;border-radius:4px}.mq-garden-input::selection{background:#ffffff22}.mq-garden-input:focus-visible{outline:1px dashed #ffffff23;outline-offset:24px}.mq-garden-placeholder{opacity:.22;font-style:italic;letter-spacing:-.05em}.mq-garden-toolbar{position:absolute;bottom:39px;left:50%;transform:translateX(-50%);display:flex;gap:8px;padding:9px 13px;border:1px solid #ffffff1a;border-radius:40px;background:#ffffff09;backdrop-filter:blur(16px)}.mq-garden-toolbar button{display:grid;place-items:center;width:25px;height:25px;padding:0;background:none;border:1px solid transparent;border-radius:50%;cursor:pointer;transition:transform .3s,border-color .3s}.mq-garden-toolbar button span{display:block;width:17px;height:17px;border-radius:50%;border:1px solid}.mq-garden-toolbar button:hover{transform:translateY(-3px)}.mq-garden-toolbar button[aria-pressed=true]{border-color:#ffffffa0}.mq-garden-toolbar button:focus-visible{outline:2px solid currentColor;outline-offset:3px}.mq-garden-hint{position:absolute;bottom:15px;font:9px/1.2 sans-serif;letter-spacing:.06em;opacity:.35}.mq-garden-butterfly{position:absolute;width:.25em;height:.2em;z-index:35;pointer-events:none;animation:mq-garden-flight 9s ease-in-out infinite alternate}.mq-garden-butterfly-0{left:18%;top:-.65em}.mq-garden-butterfly-1{right:12%;top:-.25em;animation-delay:-4s;animation-duration:11s}.mq-garden-butterfly-2{left:60%;bottom:-.45em;animation-delay:-6s;animation-duration:13s}.mq-garden-wings{transform-origin:17px 13px;animation:mq-garden-wing .24s ease-in-out infinite alternate}.mq-garden-compact .mq-garden-toolbar{bottom:20px;padding:7px 10px;gap:5px}.mq-garden-compact .mq-garden-toolbar button{width:23px;height:23px}.mq-garden[data-resting] *,.mq-garden-still *{animation-play-state:paused!important;transition:none!important}.mq-garden-sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}@keyframes mq-garden-breeze{from{transform:rotate(calc(var(--garden-sway,3deg)*-1))}to{transform:rotate(var(--garden-sway,3deg))}}@keyframes mq-garden-grow{0%,100%{transform:scale(.05) rotate(-7deg)}30%,70%{transform:scale(1) rotate(2deg)}}@keyframes mq-garden-pulse{from{transform:scale(.97) rotate(-2deg)}to{transform:scale(1.04) rotate(2deg)}}@keyframes mq-garden-flutter{0%,100%{transform:rotate(-4deg) skewX(-1deg)}40%{transform:rotate(3deg) skewX(2deg)}70%{transform:rotate(-1deg)}}@keyframes mq-garden-flight{0%{transform:translate(0,0) rotate(-15deg)}35%{transform:translate(.35em,-.25em) rotate(15deg)}70%{transform:translate(-.25em,.1em) rotate(-8deg)}100%{transform:translate(.15em,-.3em) rotate(12deg)}}@keyframes mq-garden-wing{from{transform:scaleX(1)}to{transform:scaleX(.18)}}@media(prefers-reduced-motion:reduce){.mq-garden *{animation:none!important;transition:none!important}}`;
18:T15a3,'use client';
import { motion } from 'motion/react';
export type GardenColors = {
  background: string;
  text: string;
  foliage: string;
  flowers: string;
  flowerStrokes: string;
};
export const gardenPalettes: Record<string, GardenColors> = {
  'Rose Noir': {
    background: '#05070e',
    text: '#ffffff',
    foliage: '#0044ff',
    flowers: '#ff1e27',
    flowerStrokes: '#0044ff',
  },
  Midnight: {
    background: '#0c3b9e',
    text: '#ffffff',
    foliage: '#041642',
    flowers: '#ff4d2e',
    flowerStrokes: '#041642',
  },
  Orchid: {
    background: '#280836',
    text: '#f3e8ff',
    foliage: '#10b981',
    flowers: '#d946ef',
    flowerStrokes: '#713283',
  },
  Tomato: {
    background: '#e61919',
    text: '#0a0a0a',
    foliage: '#0a0a0a',
    flowers: '#f5f2eb',
    flowerStrokes: '#e61919',
  },
  Moss: {
    background: '#071f18',
    text: '#ecfdf5',
    foliage: '#34d399',
    flowers: '#fb7185',
    flowerStrokes: '#8b264b',
  },
  Paper: {
    background: '#f4f1ea',
    text: '#1c1917',
    foliage: '#1d4ed8',
    flowers: '#e11d48',
    flowerStrokes: '#1d4ed8',
  },
};
export type GardenLetter = { id: number; char: string; seed: number };
export type GardenFlower = 'rose' | 'cosmos' | 'poppy' | 'tulip' | 'mixed';
export type GardenArrangement = 'wild' | 'climbing' | 'meadow';
export function botanicalPlan(
  seed: number,
  density: number,
  arrangement: GardenArrangement = 'wild',
) {
  let state = seed | 0;
  const random = () => {
    state = (state + 0x6d2b79f5) | 0;
    let x = Math.imul(state ^ (state >>> 15), state | 1);
    x ^= x + Math.imul(x ^ (x >>> 7), x | 61);
    return ((x ^ (x >>> 14)) >>> 0) / 4294967296;
  };
  const count = Math.min(3, Math.max(1, Math.floor(density + random() * 1.4)));
  return Array.from({ length: count }, (_, i) => {
    const below = arrangement === 'wild' && random() < 0.32;
    const x = 2 + random() * 76,
      y = below
        ? 100 + random() * 29
        : -10 - random() * (arrangement === 'climbing' ? 55 : 35);
    const baseX = 18 + random() * 42,
      baseY = 68 + random() * 30;
    const c1: [number, number] = [
      baseX + (random() - 0.5) * 90,
      baseY - 12 - random() * 38,
    ];
    const c2: [number, number] = [x + (random() - 0.5) * 85, y + (below ? -30 : 35)];
    return {
      x,
      y,
      baseX,
      baseY,
      c1,
      c2,
      front: random() < 0.4,
      size: (0.35 + random() * 0.42) * (arrangement === 'meadow' ? 0.76 : 1),
      rotation: (random() - 0.5) * 115,
      species: Math.floor(random() * 4),
      bud: random() < 0.18,
      delay: random() * 0.3 + i * 0.09,
      sway: 1.5 + random() * 4,
      duration: 4 + random() * 5,
      leaves: 2 + Math.floor(random() * 3),
      curl: (random() - 0.5) * 45,
    };
  });
}
/** Preserve surviving glyph identity when editing in the middle, not just at the end. */
export function reconcileGarden(
  previous: GardenLetter[],
  text: string,
  nextId: () => number,
): GardenLetter[] {
  const chars = Array.from(text);
  let prefix = 0,
    suffix = 0;
  while (
    prefix < previous.length &&
    prefix < chars.length &&
    previous[prefix].char === chars[prefix]
  )
    prefix++;
  while (
    suffix < previous.length - prefix &&
    suffix < chars.length - prefix &&
    previous[previous.length - 1 - suffix].char === chars[chars.length - 1 - suffix]
  )
    suffix++;
  return chars.map((char, i) => {
    if (i < prefix) return previous[i];
    if (i >= chars.length - suffix)
      return previous[previous.length - (chars.length - i)];
    const id = nextId();
    return { id, char, seed: (char.codePointAt(0) ?? 0) * 31 + i * 137 };
  });
}
export function Rose({
  x,
  y,
  size,
  rotation,
  colors,
  seed,
  still,
}: {
  x: number;
  y: number;
  size: number;
  rotation: number;
  colors: GardenColors;
  seed: number;
  still: boolean;
}) {
  const petals = Array.from({ length: 11 + (seed % 6) }, (_, j) => {
    const angle = ((j * 137.508 + (seed % 90)) * Math.PI) / 180,
      r = 11 * (1 - j / 18),
      cx = Math.cos(angle) * r,
      cy = Math.sin(angle) * r,
      s = 17 - j * 0.72;
    return (
      <path
        key={j}
        d={`M${cx - s * 0.8} ${cy}C${cx - s} ${cy - s * 0.8} ${cx + s * 0.3} ${cy - s * 1.15} ${cx + s * 0.8} ${cy - s * 0.4}C${cx + s * 1.2} ${cy + s * 0.3} ${cx + s * 0.15} ${cy + s * 0.9} ${cx - s * 0.8} ${cy}Z`}
        fill={colors.flowers}
        stroke={colors.flowerStrokes}
        strokeWidth={0.75 + (j % 3) * 0.15}
        transform={`rotate(${j * 18} ${cx} ${cy})`}
      />
    );
  });
  return (
    <g transform={`translate(${x} ${y}) rotate(${rotation}) scale(${size})`}>
      <motion.g
        initial={still ? false : { scale: 0, rotate: -35 }}
        animate={{ scale: 1, rotate: 0 }}
        exit={{ scale: 0 }}
        transition={{
          type: 'spring',
          stiffness: 220,
          damping: 14,
          delay: still ? 0 : 0.14 + (seed % 5) * 0.035,
        }}
      >
        <path
          d="M-5 7-21 13-9-1-10-17 1-8 13-16 10 1 21 11 6 9Z"
          fill={colors.foliage}
        />
        <path
          d="M-25 0C-27-15-9-23 0-19C11-26 28-12 25 1C31 15 8 26 0 20C-17 27-30 11-25 0Z"
          fill={colors.flowers}
          stroke={colors.flowerStrokes}
          strokeWidth="1.1"
        />
        {petals}
        <path
          d="M-4 2C-7-5 5-9 7-2C10 3-1 8-3 2C-6-2 3-4 3 0"
          fill="none"
          stroke={colors.flowerStrokes}
          strokeWidth="1.2"
        />
      </motion.g>
    </g>
  );
}
19:T24b3,'use client';
import { motion } from 'motion/react';
import type { CSSProperties } from 'react';
import {
  botanicalPlan,
  Rose,
  type GardenArrangement,
  type GardenColors,
  type GardenFlower,
  type GardenLetter,
} from './garden-botany';

export function BotanicalLayer({
  letter,
  front,
  colors,
  density,
  still,
  flowerType = 'rose',
  arrangement = 'wild',
}: {
  letter: GardenLetter;
  front: boolean;
  colors: GardenColors;
  density: number;
  still: boolean;
  flowerType?: GardenFlower;
  arrangement?: GardenArrangement;
}) {
  const plan = botanicalPlan(letter.seed, density, arrangement);
  return (
    <svg
      className={`mq-garden-botany ${front ? 'mq-garden-front' : 'mq-garden-back'}`}
      viewBox="0 0 80 110"
      aria-hidden="true"
      style={{ overflow: 'visible' }}
    >
      {plan.map((p, i) => {
        const seed = letter.seed + i * 37;
        const point = (t: number) => {
          const a = 1 - t;
          return [
            a * a * a * p.baseX +
              3 * a * a * t * p.c1[0] +
              3 * a * t * t * p.c2[0] +
              t * t * t * p.x,
            a * a * a * p.baseY +
              3 * a * a * t * p.c1[1] +
              3 * a * t * t * p.c2[1] +
              t * t * t * p.y,
          ];
        };
        const species =
          flowerType === 'mixed'
            ? (['rose', 'cosmos', 'poppy', 'tulip'] as const)[p.species]
            : flowerType;
        return (
          <g
            key={`${i}-${flowerType}-${arrangement}`}
            className="mq-garden-sway"
            style={
              {
                transformOrigin: `${p.baseX}px ${p.baseY}px`,
                animationDelay: `-${(seed % 51) / 7}s`,
                animationDuration: `${p.duration}s`,
                '--garden-sway': `${p.sway}deg`,
              } as CSSProperties
            }
          >
            {!front && (
              <>
                <motion.path
                  d={`M${p.baseX} ${p.baseY}C${p.c1} ${p.c2} ${p.x} ${p.y}`}
                  stroke={colors.foliage}
                  strokeWidth={i ? 1.15 : 1.7}
                  fill="none"
                  initial={still ? false : { pathLength: 0 }}
                  animate={{ pathLength: 1 }}
                  transition={{
                    duration: still ? 0 : 0.65,
                    delay: still ? 0 : p.delay,
                    ease: 'easeOut',
                  }}
                />
                {Array.from({ length: p.leaves }, (_, j) => {
                  const t = 0.22 + j * 0.17,
                    [x, y] = point(t),
                    [nx, ny] = point(Math.min(1, t + 0.04));
                  const rotation =
                    (Math.atan2(ny - y, nx - x) * 180) / Math.PI +
                    90 +
                    (j % 2 ? 105 : -15);
                  return (
                    <g
                      key={j}
                      transform={`translate(${x} ${y}) rotate(${rotation}) scale(${0.6 + ((seed + j * 13) % 7) * 0.045})`}
                    >
                      <motion.g
                        initial={still ? false : { scale: 0 }}
                        animate={{ scale: 1 }}
                        transition={{
                          type: 'spring',
                          stiffness: 220,
                          damping: 14,
                          delay: still ? 0 : p.delay + 0.12 + j * 0.06,
                        }}
                      >
                        <path
                          d={
                            j % 2
                              ? 'M0 0C-21-5-29-19-32-32C-12-31 5-19 0 0Z'
                              : 'M0 0C-6-13-3-29 5-39C13-25 12-7 0 0Z'
                          }
                          fill={colors.foliage}
                        />
                        <path
                          d={j % 2 ? 'M0 0-27-27M-7-8-19-12' : 'M0 0 5-33M2-10 8-20'}
                          fill="none"
                          stroke={colors.text}
                          strokeOpacity=".2"
                          strokeWidth=".55"
                        />
                      </motion.g>
                    </g>
                  );
                })}
              </>
            )}
            {p.front === front && (
              <Blossom
                {...{
                  x: p.x,
                  y: p.y,
                  size: p.size,
                  rotation: p.rotation,
                  colors,
                  seed,
                  still,
                  species,
                  bud: p.bud,
                }}
              />
            )}
            {front && i === 0 && (
              <motion.path
                d={`M${p.baseX - 12} ${p.baseY + 10}C${p.baseX - 45} ${p.baseY - 5} ${p.x + 42} ${p.y + 20} ${p.x + 15} ${p.y + 12}q${p.curl} -18 ${p.curl - 4} 1t-8 2`}
                fill="none"
                stroke={colors.foliage}
                strokeWidth=".85"
                initial={still ? false : { pathLength: 0 }}
                animate={{ pathLength: 1 }}
                transition={{
                  duration: still ? 0 : 0.9,
                  delay: still ? 0 : p.delay + 0.1,
                }}
              />
            )}
          </g>
        );
      })}
    </svg>
  );
}
b:["$","$L16",null,{"initialView":"preview","originalSource":{"type-garden":[{"name":"type-garden.tsx","code":"$17"},{"name":"garden-botany.tsx","code":"$18"},{"name":"garden-sprouts.tsx","code":"$19"}]},"initialElement":"type-garden","initialConfiguration":"$undefined","initialSaved":false,"initialTag":""}]
</article></body></html>