@heartheyouth/brandbook-toolkit 0.0.0-stage → 0.2.0

package/components/BrandFonts.jsx

@@ -0,0 +1,10 @@
+// The Suisse fonts, served by the brand book (src/app/fonts.css/route.ts in product-brand-book), so
+// the licensed font files don't ship in this package. A <link> and not an @import in global.css:
+// Next.js bundles global CSS with other CSS, and a browser ignores an @import that isn't first.
+// With `precedence`, React 19 hoists it into <head> once, wherever it's rendered. BrowserCheck
+// renders it, so a tool only needs this when it doesn't use BrowserCheck
+export const BRAND_FONTS_URL = 'https://brandbook.heartheyouth.com/fonts.css'
+
+export default function BrandFonts() {
+  return <link rel="stylesheet" href={BRAND_FONTS_URL} precedence="default" />
+}

package/components/BrowserCheck.jsx

@@ -0,0 +1,39 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { checkBrowserSupport, SUPPORTED_BROWSERS } from '../lib/browserSupport'
+import BrandFonts from './BrandFonts'
+import styles from './BrowserCheck.module.scss'
+
+// Blocks the tool in browsers that can't run every export, so nobody builds a
+// composition they can't save. See lib/browserSupport.js for what's checked.
+// Also loads the brand fonts (BrandFonts), in every state, so every tool gets them.
+export default function BrowserCheck({ children }) {
+  const [missing, setMissing] = useState(null)
+
+  useEffect(() => {
+    let cancelled = false
+    checkBrowserSupport().then(m => {
+      if (cancelled) return
+      if (m.length) console.warn('[BrowserCheck] missing:', m.join(', '))
+      setMissing(m)
+    })
+    return () => { cancelled = true }
+  }, [])
+
+  if (!missing) return <BrandFonts />
+  if (!missing.length) return <><BrandFonts />{children}</>
+
+  const storageOnly = missing.length === 1 && missing[0] === 'storage'
+  return (
+    <div className={styles.blocked}>
+      <BrandFonts />
+      <div>
+        <p className={styles.message}>
+          {storageOnly
+            ? 'This tool needs to save files to your browser’s storage while exporting, which isn’t available here. Private windows often block this. Open the tool in a normal window.'
+            : `This browser can’t run this tool. Use ${SUPPORTED_BROWSERS} or newer.`}
+        </p>
+      </div>
+    </div>
+  )
+}

package/components/BrowserCheck.module.scss

@@ -0,0 +1,20 @@
+@use '../styles/type' as *;
+
+.blocked {
+  flex: 1;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  background: var(--page-bg);
+  color: var(--text);
+  text-align: center;
+}
+
+.message {
+  @include heading-3;
+  margin: 0;
+  line-height: 1.3;
+  max-width: 420px;
+}

package/components/ui/Accordion.jsx

@@ -0,0 +1,17 @@
+import styles from './Accordion.module.scss'
+
+// Figma: Variation. Closed it shows `label`, `title` and a one-line `summary` (`title` and `summary`
+// are optional), and the whole card opens it; open it shows `label` and the controls, and the label closes it. Controls inside turn
+// black (--control-bg). Keep one open at a time by passing `open` from the parent.
+export default function Accordion({ label, title, summary, open, onToggle, children }) {
+  return (
+    <section className={`${styles.accordion}${open ? ` ${styles.open}` : ''}`}>
+      <button type="button" className={styles.header} aria-expanded={open ? 'true' : 'false'} onClick={onToggle}>
+        <span className={styles.label}>{label}</span>
+        {!open && title && <span className={styles.title}>{title}</span>}
+        {!open && summary && <span className={styles.summary}>{summary}</span>}
+      </button>
+      {open && children}
+    </section>
+  )
+}

package/components/ui/Accordion.module.scss

@@ -0,0 +1,57 @@
+@use '../../styles/type' as *;
+
+.accordion {
+  --control-bg: var(--hty-black);
+  --bleed: 12px; // ColorSwatches run out to this edge
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 150px;
+  padding: 12px;
+  border-radius: var(--radius-control);
+  background: var(--hty-dark-grey);
+  color: var(--text);
+}
+
+// Closed, the header is the whole card (padding included), so anywhere on it opens it
+.header {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: calc(100% + 24px);
+  margin: -12px;
+  padding: 12px;
+  border: none;
+  border-radius: var(--radius-control);
+  background: none;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+
+  &:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
+}
+
+// Open, only the label row is the header; the controls keep the card's padding
+.open .header {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+.label {
+  @include label;
+}
+
+.title {
+  @include heading-3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.summary {
+  @include label;
+  opacity: 0.2;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/components/ui/AlignGrid.jsx

@@ -0,0 +1,37 @@
+import styles from './AlignGrid.module.scss'
+
+const CELLS = [
+  { h: 'left',   v: 'top',    title: 'Top left' },
+  { h: 'center', v: 'top',    title: 'Top center' },
+  { h: 'right',  v: 'top',    title: 'Top right' },
+  { h: 'left',   v: 'center', title: 'Center left' },
+  { h: 'center', v: 'center', title: 'Center' },
+  { h: 'right',  v: 'center', title: 'Center right' },
+  { h: 'left',   v: 'bottom', title: 'Bottom left' },
+  { h: 'center', v: 'bottom', title: 'Bottom center' },
+  { h: 'right',  v: 'bottom', title: 'Bottom right' },
+]
+
+// 3×3 alignment buttons. `value` ({ h, v }, or null) is the alignment to show as selected
+export default function AlignGrid({ value, onAlign }) {
+  return (
+    <div className={styles.row}>
+      <span className={styles.label}>Align</span>
+      <div className={styles.grid}>
+        {CELLS.map(c => {
+          const isSelected = value?.h === c.h && value?.v === c.v
+          return (
+            <button
+              key={`${c.h}-${c.v}`}
+              type="button"
+              className={`${styles.cell}${isSelected ? ` ${styles.selected}` : ''}`}
+              title={c.title}
+              aria-pressed={isSelected ? 'true' : 'false'}
+              onClick={() => onAlign(c.h, c.v)}
+            />
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/components/ui/AlignGrid.module.scss

@@ -0,0 +1,39 @@
+@use '../../styles/type' as *;
+
+.row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.label {
+  @include label;
+  color: var(--text);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 4px;
+  width: 100%;
+}
+
+.cell {
+  height: 16px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-swatch);
+  background: var(--control-bg);
+  cursor: pointer;
+  transition: background .15s;
+
+  &.selected,
+  &:hover { background: var(--control-active-bg); }
+  &:focus-visible { outline: 2px solid var(--text); outline-offset: 1px; }
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .cell { height: 30px; }
+  .cell:not(.selected):hover { background: var(--control-bg); }
+  .cell:active { background: var(--control-active-bg); }
+}

package/components/ui/AppIntro.jsx

@@ -0,0 +1,14 @@
+import styles from './AppIntro.module.scss'
+
+// The tool's icon and name, e.g. on the empty result area before anything is uploaded
+export default function AppIntro({ icon, name, tagline }) {
+  return (
+    <div className={styles.intro}>
+      {icon && <img src={icon} alt="" className={styles.icon} />}
+      <div className={styles.name}>
+        <span>{name}</span>
+        {tagline && <span className={styles.tagline}>{tagline}</span>}
+      </div>
+    </div>
+  )
+}

package/components/ui/AppIntro.module.scss

@@ -0,0 +1,27 @@
+@use '../../styles/type' as *;
+
+.intro {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+}
+
+.icon {
+  width: 100px;
+  height: 100px;
+  border-radius: var(--radius-sm);
+  object-fit: cover;
+}
+
+.name {
+  @include label;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: var(--text);
+  text-align: center;
+}
+
+.tagline { opacity: 0.5; }

package/components/ui/Artboard.jsx

@@ -0,0 +1,13 @@
+import styles from './Artboard.module.scss'
+
+// The black card that holds the tool's canvas (Figma: Result). It takes the size of what's inside,
+// so size the canvas (or give it a className/style); `overlay` is centred on top, e.g. an AppIntro
+// while nothing is uploaded yet. Other props (ref, data-*, handlers) go to the card itself.
+export default function Artboard({ overlay, className, children, ...props }) {
+  return (
+    <div className={`${styles.artboard}${className ? ` ${className}` : ''}`} {...props}>
+      {children}
+      {overlay && <div className={styles.overlay}>{overlay}</div>}
+    </div>
+  )
+}

package/components/ui/Artboard.module.scss

@@ -0,0 +1,18 @@
+// Figma: Result — black, 16px corners, content clipped to them
+.artboard {
+  position: relative;
+  border-radius: var(--radius-panel);
+  overflow: hidden;
+  background: var(--hty-black);
+
+  > canvas { display: block; }
+}
+
+.overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+}

package/components/ui/Button.jsx

@@ -0,0 +1,21 @@
+import Icon from './Icon'
+import styles from './Button.module.scss'
+
+// variant: 'neutral' (dark grey, white on hover), 'primary' (white).
+// `small` sizes it to its text (Figma: Controls' Play/Stop); `arrow` adds the → (Figma: Button).
+export default function Button({ variant = 'neutral', small, arrow, className, children, ...props }) {
+  const cls = [
+    styles.btn,
+    styles[variant] ?? styles.neutral,
+    small && styles.small,
+    arrow && styles.withArrow,
+    className,
+  ].filter(Boolean).join(' ')
+
+  return (
+    <button type="button" className={cls} {...props}>
+      {children}
+      {arrow && <Icon name="arrow" />}
+    </button>
+  )
+}

package/components/ui/Button.module.scss

@@ -0,0 +1,55 @@
+@use '../../styles/type' as *;
+
+.btn {
+  @include label;
+  width: 100%;
+  min-height: 40px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border: none;
+  border-radius: var(--radius-control);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background .15s, color .15s, opacity .2s;
+
+  &:disabled { opacity: 0.4; cursor: not-allowed; }
+  &:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
+}
+
+.neutral {
+  background: var(--control-bg);
+  color: var(--text);
+
+  &:not(:disabled):hover {
+    background: var(--control-active-bg);
+    color: var(--control-active-fg);
+  }
+}
+
+.primary {
+  background: var(--control-active-bg);
+  color: var(--control-active-fg);
+
+  &:not(:disabled):hover { opacity: 0.85; }
+}
+
+.small {
+  width: auto;
+  min-height: 0;
+  padding: 8px;
+}
+
+.withArrow {
+  justify-content: space-between;
+  padding-right: 8px;
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .neutral:not(:disabled):hover { background: var(--control-bg); color: var(--text); }
+  .neutral:not(:disabled):active { background: var(--control-active-bg); color: var(--control-active-fg); }
+  .primary:not(:disabled):hover { opacity: 1; }
+  .small { padding: 11px 14px; }
+}

package/components/ui/ColorComboSwatch.jsx

@@ -0,0 +1,17 @@
+import styles from './ColorSwatch.module.scss'
+
+// A text color on a background color, previewed as "Aa": square, round when selected
+export default function ColorComboSwatch({ background, color, label = 'Aa', selected, title, onClick }) {
+  return (
+    <button
+      type="button"
+      className={`${styles.swatch}${selected ? ` ${styles.selected}` : ''}`}
+      style={{ background, color }}
+      title={title ?? `${color} on ${background}`}
+      aria-pressed={selected ? 'true' : 'false'}
+      onClick={onClick}
+    >
+      {label}
+    </button>
+  )
+}

package/components/ui/ColorSwatch.jsx

@@ -0,0 +1,15 @@
+import styles from './ColorSwatch.module.scss'
+
+// A color to pick: square, round when selected
+export default function ColorSwatch({ color, selected, title, onClick }) {
+  return (
+    <button
+      type="button"
+      className={`${styles.swatch}${selected ? ` ${styles.selected}` : ''}`}
+      style={{ background: color }}
+      title={title ?? color}
+      aria-pressed={selected ? 'true' : 'false'}
+      onClick={onClick}
+    />
+  )
+}

package/components/ui/ColorSwatch.module.scss

@@ -0,0 +1,22 @@
+@use '../../styles/type' as *;
+
+.swatch {
+  @include label;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  border-radius: var(--radius-swatch);
+  background: var(--hty-black);
+  color: var(--text);
+  text-transform: none;
+  cursor: pointer;
+  transition: border-radius .35s var(--ease-out);
+
+  &.selected { border-radius: 50%; }
+  &:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
+}

package/components/ui/ColorSwatches.jsx

@@ -0,0 +1,16 @@
+import { useRef } from 'react'
+import { useDragScroll } from '../../hooks/useDragScroll'
+import styles from './ColorSwatches.module.scss'
+
+// A row of ColorSwatch or ColorComboSwatch, 2px apart. It doesn't wrap: it scrolls sideways and runs
+// to the edges of the Section or Accordion it sits in, and the mouse can drag it
+export default function ColorSwatches({ label, children }) {
+  const rowRef = useRef(null)
+  useDragScroll({ ref: rowRef })
+
+  return (
+    <div ref={rowRef} className={styles.swatches} role="group" aria-label={label}>
+      {children}
+    </div>
+  )
+}

package/components/ui/ColorSwatches.module.scss

@@ -0,0 +1,19 @@
+// One row that scrolls sideways and runs to the edges of its Section (or Accordion), so swatches
+// slide out under the panel's edge instead of wrapping. --bleed is that container's side padding.
+.swatches {
+  display: flex;
+  gap: 2px;
+  margin: -4px calc(-1 * var(--bleed, 16px));
+  padding: 4px var(--bleed, 16px); // room for the focus outline, which overflow would clip
+  overflow-x: auto;
+  scroll-padding-inline: var(--bleed, 16px);
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar { display: none; }
+  &[data-dragging] { cursor: grabbing; user-select: none; }
+  &[data-dragging] > * { cursor: inherit; }
+
+  // Keeps the last swatch's right padding, which a scrolling flex row drops
+  &::after { content: ''; flex: 0 0 1px; margin-left: -1px; }
+}

package/components/ui/EditablePill.jsx

@@ -0,0 +1,32 @@
+import { useRef, useEffect } from 'react'
+import styles from './EditablePill.module.scss'
+
+export default function EditablePill({ value, onCommit, className }) {
+  const ref = useRef(null)
+  const prevRef = useRef(null)
+
+  useEffect(() => {
+    if (ref.current && document.activeElement !== ref.current) {
+      ref.current.textContent = value
+    }
+  }, [value])
+
+  return (
+    <span
+      ref={ref}
+      className={className || styles.pill}
+      contentEditable
+      suppressContentEditableWarning
+      spellCheck={false}
+      onFocus={() => {
+        prevRef.current = ref.current.textContent
+        getSelection().selectAllChildren(ref.current)
+      }}
+      onKeyDown={e => {
+        if (e.key === 'Enter') { e.preventDefault(); ref.current.blur(); window.getSelection().removeAllRanges() }
+        if (e.key === 'Escape') { ref.current.textContent = prevRef.current; ref.current.blur(); window.getSelection().removeAllRanges() }
+      }}
+      onBlur={() => onCommit(ref.current.textContent)}
+    />
+  )
+}

package/components/ui/EditablePill.module.scss

@@ -0,0 +1,26 @@
+@use '../../styles/type' as *;
+
+// Same look as SliderRow's value (Figma: Number), but editable
+.pill {
+  @include label;
+  flex-shrink: 0;
+  min-width: 40px;
+  padding: 8px;
+  border-radius: var(--radius-control);
+  background: var(--control-bg);
+  color: var(--text);
+  text-align: center;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+  cursor: text;
+  outline: none;
+
+  &:focus {
+    background: var(--control-active-bg);
+    color: var(--control-active-fg);
+  }
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .pill { padding: 10px 12px; min-width: 52px; }
+}

package/components/ui/ExportButton.jsx

@@ -0,0 +1,23 @@
+import styles from './ExportButton.module.scss'
+
+// Export action (Figma: ExportButton). `primary` is the white main export; while `rendering`,
+// a green bar fills to `progress` (0–1), or pulses when progress is null.
+export default function ExportButton({ primary, rendering, progress = null, children, className, ...props }) {
+  const pct = progress == null ? null : Math.round(Math.max(0, Math.min(1, progress)) * 100)
+  const cls = [
+    styles.btn,
+    primary && !rendering && styles.primary,
+    rendering && styles.rendering,
+    rendering && pct == null && styles.indeterminate,
+    className,
+  ].filter(Boolean).join(' ')
+
+  return (
+    <button type="button" className={cls} style={rendering ? { '--pct': `${pct ?? 100}%` } : undefined} {...props}>
+      {rendering && <span className={styles.fill} />}
+      <span className={styles.text}>{children}</span>
+      {/* The same text in black, clipped to the green bar, so it stays readable on both */}
+      {rendering && pct != null && <span className={styles.textOnFill} aria-hidden="true">{children}</span>}
+    </button>
+  )
+}

package/components/ui/ExportButton.module.scss

@@ -0,0 +1,75 @@
+@use '../../styles/type' as *;
+
+.btn {
+  @include label;
+  position: relative;
+  width: 100%;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 12px;
+  border: none;
+  border-radius: var(--radius-control);
+  overflow: hidden;
+  background: var(--control-bg);
+  color: var(--text);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background .15s, color .15s, opacity .2s;
+
+  &:not(:disabled):not(.rendering):hover {
+    background: var(--control-active-bg);
+    color: var(--control-active-fg);
+  }
+  &:disabled:not(.rendering) { opacity: 0.4; cursor: not-allowed; }
+  &:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
+}
+
+.primary {
+  background: var(--control-active-bg);
+  color: var(--control-active-fg);
+
+  &:not(:disabled):hover { opacity: 0.85; }
+}
+
+.rendering { cursor: default; }
+
+.fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  width: var(--pct);
+  background: var(--success);
+  transition: width .1s linear;
+}
+
+.text,
+.textOnFill {
+  position: relative;
+}
+
+.textOnFill {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--hty-black);
+  clip-path: inset(0 calc(100% - var(--pct)) 0 0);
+  transition: clip-path .1s linear;
+}
+
+.indeterminate .fill {
+  opacity: 0.3;
+  animation: renderPulse 1.4s ease-in-out infinite;
+}
+
+@keyframes renderPulse {
+  0%, 100% { opacity: 0.15; }
+  50% { opacity: 0.4; }
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .btn:not(:disabled):not(.rendering):hover { background: var(--control-bg); color: var(--text); }
+  .primary:not(:disabled):hover { background: var(--control-active-bg); color: var(--control-active-fg); opacity: 1; }
+}

package/components/ui/Icon.jsx

@@ -0,0 +1,13 @@
+import styles from './Icon.module.scss'
+
+// Icons from the Figma component set, drawn in the current text color.
+// `rotate` turns the arrow: 0 points right, 90 down (dropdowns), -90 up.
+export default function Icon({ name, size = 24, rotate = 0, className }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={`${styles.icon} ${styles[name] ?? ''}${className ? ` ${className}` : ''}`}
+      style={{ width: size, height: size, transform: rotate ? `rotate(${rotate}deg)` : undefined }}
+    />
+  )
+}

package/components/ui/Icon.module.scss

@@ -0,0 +1,13 @@
+// The SVG is a mask, so the icon takes `color` from its parent (white on dark, black on white)
+.icon {
+  display: inline-block;
+  flex-shrink: 0;
+  background-color: currentColor;
+  -webkit-mask: var(--icon) center / contain no-repeat;
+  mask: var(--icon) center / contain no-repeat;
+}
+
+.arrow    { --icon: url('./icons/arrow.svg'); }
+.chat     { --icon: url('./icons/chat.svg'); }
+.cross    { --icon: url('./icons/cross.svg'); }
+.settings { --icon: url('./icons/settings.svg'); }