@kolkrabbi/kol-component 0.152.0 → 0.154.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.152.0",
+  "version": "0.154.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/index.js

@@ -148,6 +148,7 @@ export { default as PlaybackBar } from './molecules/PlaybackBar.jsx'
 export { default as AudioSheet } from './molecules/AudioSheet.jsx'
 export { default as DocPage } from './molecules/DocPage.jsx'
 export { default as DocFrontmatter } from './molecules/DocFrontmatter.jsx'
+export { default as ProfileCard } from './molecules/ProfileCard.jsx'
 export { parseFrontmatter } from './utilities/frontmatter.js'
 export { readCover } from './utilities/id3.js'
 export { kindOf, extOf, isSystemFile, KINDS, KIND_LABEL, DEFAULT_KINDS, isSegment, groupSegments, groupVariants, posterFor, partition } from './utilities/mediaKinds.js'

package/src/molecules/ProfileCard.jsx

@@ -0,0 +1,204 @@
+import { useId, useState } from 'react'
+import { Icon } from '@kolkrabbi/kol-icons'
+import IconFrame from '../atoms/IconFrame.jsx'
+import { Tooltip } from '../utilities/Popover.jsx'
+
+/* taxonomy-ok: nests kol-icons's Icon (a package import the relative-import
+ * check can't see). */
+
+/**
+ * ProfileCard — the digital namecard (ProfileCard, kol-website 2026-09-01;
+ * carried class-for-class from `apps/web/src/components/ui/ProfileCard.jsx`):
+ * a square photo with a disclosure control inset on it, and a SHELF that opens
+ * under it (vertical) or beside it (horizontal) — logo, name, mailto, a rack of
+ * socials. The shelf is `bg-surface-inverse` / `text-auto-inverse` at every
+ * theme: the inverse of the page is the design, not a bug.
+ *
+ * THE SHELF SIZES TO ITS CONTENT. The source held it in a fixed box
+ * (`h-60`/`h-44`/`h-32`/`h-24`, `overflow-hidden`) and every vertical size
+ * clipped its own socials rack on a phone — lg needed 204px inside 176, sm 140
+ * inside 96. The consumer patched a `min-h` floor under a raised `max-height`
+ * ceiling; that is two guesses at one number. Here the open state animates
+ * `grid-template-rows: 0fr → 1fr` — the browser measures, nothing is guessed,
+ * and a sixth social or a longer name never clips. Horizontal keeps the user's
+ * 2026-08-27 ruling — the CARD holds a fixed square and the PHOTO crops as the
+ * shelf comes in — as `grid-template-columns: 0px → 224px`, ONE number where
+ * the source carried three (`w-56`, `'320px'`, an inline `'224px'` — only the
+ * last was ever read).
+ *
+ * SCALE AND WIDTH ARE SEPARATE. `size` drives the ramp — logo height, mono
+ * step, glyph size, rack gap, control inset — and caps the width
+ * (`max-w-[680/480/320/200]`); the card is `w-full` inside that cap, so a
+ * caller's `className="w-full"` no longer fights a second width utility.
+ *
+ * THE DISCLOSURE IS A BUTTON, NOT A SWITCH. The source opened the shelf with
+ * `ToggleSwitch` — a form control that states a persistent setting, used for a
+ * reveal that sets nothing. Ruling applied here rather than minted as a second
+ * component: a disclosure is a button carrying `aria-expanded` +
+ * `aria-controls`, `plus` closed / `minus` open. Over MEDIA it is
+ * `IconFrame variant="secondary" radius="full"` — the glyph needs a surface
+ * (the bare `nav` glyph was measured invisible over the photo: page ink on a
+ * dark picture); on a surface the bare `nav` idiom the close X standardised
+ * on (FullscreenOverlayCloseIdiom) is the same ruling with no frame.
+ *
+ * Brand content is the CONSUMER'S: `logo` is a slot (the source baked
+ * `kol-brand`'s lockup, which this package cannot import), `name` / `email` /
+ * `socials` are props with no defaults.
+ *
+ * @param {string}    image        photo URL — square, `object-cover object-top`
+ * @param {string}    alt          the photo's alt (default: `name`)
+ * @param {ReactNode} logo         the lockup — sized by the ramp (`[&>svg]:h-full`), `text-auto-inverse`
+ * @param {string}    name         the person
+ * @param {string}    email        rendered as a `mailto:`
+ * @param {Array}     socials      `[{ icon, href, label }]` — one Icon-in-Tooltip each, external links
+ * @param {'xl'|'lg'|'md'|'sm'} size  the ramp + width cap (680 · 480 · 320 · 200); default xl
+ * @param {'vertical'|'horizontal'} orientation  shelf under the photo (card grows) or beside it (card holds its square, photo crops)
+ * @param {string}    variant      alias for the source's names — `'lg-h'` = `size="lg" orientation="horizontal"`, any other value = `size`
+ * @param {boolean}   open         controlled open state
+ * @param {boolean}   defaultOpen  uncontrolled initial state (default false)
+ * @param {Function}  onOpenChange `(open) => void`
+ * @param {string}    className    extra classes on the card
+ */
+
+const SIZES = {
+  xl: { cap: 'max-w-[680px]', pad: 'p-6', logo: 'h-20', text: 'kol-mono-16', iconSize: 24, iconBox: 'w-8 h-8', iconGap: 'gap-2', control: 'bottom-4 left-4' },
+  lg: { cap: 'max-w-[480px]', pad: 'p-5', logo: 'h-14', text: 'kol-mono-14', iconSize: 20, iconBox: 'w-7 h-7', iconGap: 'gap-1.5', control: 'bottom-3 left-3' },
+  md: { cap: 'max-w-[320px]', pad: 'p-4', logo: 'h-10', text: 'kol-mono-12', iconSize: 16, iconBox: 'w-6 h-6', iconGap: 'gap-1', control: 'bottom-3 left-3' },
+  sm: { cap: 'max-w-[200px]', pad: 'p-3', logo: 'h-7', text: 'kol-mono-10', iconSize: 12, iconBox: 'w-5 h-5', iconGap: 'gap-1', control: 'bottom-2 left-2' },
+}
+/* the source's `lg-h`: lg's ramp with a 16px glyph in a 24 box, p-4, and the
+ * one open-shelf width */
+const HORIZONTAL = { pad: 'p-4', iconSize: 16, iconBox: 'w-6 h-6', shelf: 224 }
+const SHADOW = '0 112px 192px -80px rgba(0,0,0,0.6)'
+
+export default function ProfileCard({
+  image,
+  alt,
+  logo,
+  name,
+  email,
+  socials = [],
+  size = 'xl',
+  orientation = 'vertical',
+  variant,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  className = '',
+}) {
+  /* the alias maps and gains nothing (gate R4) */
+  const horizontal = variant === 'lg-h' || (variant == null && orientation === 'horizontal')
+  const s = SIZES[variant === 'lg-h' ? 'lg' : (variant ?? size)] ?? SIZES.xl
+  const ramp = horizontal ? { ...s, ...HORIZONTAL } : s
+
+  const [localOpen, setLocalOpen] = useState(defaultOpen)
+  const isOpen = open ?? localOpen
+  const setOpen = (next) => {
+    if (open == null) setLocalOpen(next)
+    onOpenChange?.(next)
+  }
+  const shelfId = useId()
+
+  const control = (
+    <div className={`absolute ${ramp.control}`}>
+      <IconFrame
+        name={isOpen ? 'minus' : 'plus'}
+        variant="secondary"
+        size="md"
+        radius="full"
+        aria-expanded={isOpen}
+        aria-controls={shelfId}
+        aria-label={isOpen ? 'Hide contact details' : 'Show contact details'}
+        onClick={() => setOpen(!isOpen)}
+      />
+    </div>
+  )
+  const photo = (
+    <img src={image} alt={alt ?? name ?? ''} className="w-full h-full object-cover object-top" loading="lazy" />
+  )
+  const lockup = logo != null && (
+    <div className={`inline-flex ${ramp.logo} text-auto-inverse [&>svg]:h-full [&>svg]:w-auto`}>{logo}</div>
+  )
+  const contact = (
+    <div className={`flex flex-col ${horizontal ? 'gap-1.5' : 'gap-1'} antialiased`} style={{ lineHeight: 1 }}>
+      {name && <span className={`${ramp.text} text-auto-inverse`}>{name}</span>}
+      {email && (
+        <a
+          href={`mailto:${email}`}
+          className={`${ramp.text} text-auto-inverse underline decoration-2 decoration-transparent hover:decoration-current transition-all`}
+        >
+          {email}
+        </a>
+      )}
+    </div>
+  )
+  const rack = (
+    <div className={`flex ${horizontal ? 'flex-row' : 'flex-col items-start'} ${ramp.iconGap}`}>
+      {socials.map(({ icon, href, label }) => (
+        <Tooltip key={icon} label={label}>
+          <a
+            href={href}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={label}
+            className={`${ramp.iconBox} flex items-center justify-center text-auto-inverse transition-transform hover:scale-125`}
+          >
+            <Icon name={icon} size={ramp.iconSize} />
+          </a>
+        </Tooltip>
+      ))}
+    </div>
+  )
+
+  if (horizontal) {
+    return (
+      <div
+        className={`grid w-full aspect-square rounded overflow-hidden transition-[grid-template-columns] duration-300 ease-in-out ${className}`}
+        style={{ gridTemplateColumns: `${isOpen ? HORIZONTAL.shelf : 0}px minmax(0, 1fr)`, boxShadow: SHADOW }}
+      >
+        {/* Shelf — LEFT. The inner column holds the open width so the text does
+          * not reflow while the track animates. */}
+        <div id={shelfId} className="min-w-0 overflow-hidden bg-surface-inverse">
+          <div className={`h-full ${ramp.pad} flex flex-col justify-between items-start`} style={{ width: HORIZONTAL.shelf }}>
+            {lockup}
+            <div className="flex flex-col gap-8">
+              {contact}
+              {rack}
+            </div>
+          </div>
+        </div>
+        {/* Photo — RIGHT: crops as the shelf comes in, the card never moves */}
+        <div className="relative min-w-0 h-full overflow-hidden bg-surface-secondary">
+          {photo}
+          {control}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`w-full ${ramp.cap} rounded overflow-hidden ${className}`} style={{ boxShadow: SHADOW }}>
+      {/* Photo — square */}
+      <div className="relative w-full aspect-square overflow-hidden bg-surface-secondary">
+        {photo}
+        {control}
+      </div>
+      {/* Shelf — content-sized: the row track animates 0fr → 1fr and the browser
+        * measures; `min-h-0 overflow-hidden` on the item is what lets 0fr close */}
+      <div
+        className="grid transition-[grid-template-rows] duration-300 ease-in-out"
+        style={{ gridTemplateRows: isOpen ? '1fr' : '0fr' }}
+      >
+        <div id={shelfId} className="min-h-0 overflow-hidden bg-surface-inverse">
+          <div className={`${ramp.pad} flex justify-between items-end`}>
+            <div className="self-stretch flex flex-col justify-between items-start">
+              {lockup}
+              {contact}
+            </div>
+            {rack}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/molecules/ShellDrawer.jsx

@@ -12,7 +12,7 @@ const FOCUSABLE =
 
 /**
  * ShellDrawer — THE edge drawer: a portalled panel that slides in from the
- * left or right viewport edge over a dimming backdrop. Distinct from Modal
+ * left, right or BOTTOM viewport edge over a dimming backdrop. Distinct from Modal
  * (centered prompt/confirm) and FullscreenOverlay (fills the whole viewport,
  * not an edge sheet). Escape, backdrop click and the built-in close button
  * all call `onClose`; body scroll locks while open; focus moves into the
@@ -26,8 +26,16 @@ const FOCUSABLE =
  *
  * @param {boolean}       open      drawer visible (drives slide in/out)
  * @param {Function}      onClose   close request (Esc / backdrop / close button)
- * @param {string}        side      'left' | 'right' — edge the panel slides from
- * @param {number|string} width     panel width (px number or CSS length); omit for full-width sheet
+ * @param {string}        side      'left' | 'right' | 'bottom' — edge the panel slides from.
+ *                                  `bottom` (ShellDrawerBottomSide, kol-mirror 2026-09-01) is the
+ *                                  phone's sheet: full viewport width, slides up from +100% on Y,
+ *                                  takes `height` where the sides take `width`, and pads its foot by
+ *                                  `env(safe-area-inset-bottom)` so the last row clears the home bar.
+ *                                  ONE DETENT — open or closed. A collapsed bar that grows on tap is
+ *                                  a second height the consumer owns (mirror's 56px → 68dvh); this
+ *                                  sheet does not carry it, and says so rather than half-build it.
+ * @param {number|string} width     panel width (px number or CSS length); omit for full-width sheet — sides only
+ * @param {number|string} height    panel height (px number or CSS length); omit for a content-sized sheet — `bottom` only
  * @param {ReactNode}     header    header-row content beside the close button (replaces the source's baked-in wordmark)
  * @param {boolean}       backdrop  render the dimming scrim (default true); false = panel alone, no darken/blur, close via × / Esc
  * @param {ReactNode}     children  scrollable panel body
@@ -38,6 +46,7 @@ export default function ShellDrawer({
   onClose,
   side = 'left',
   width,
+  height,
   header,
   closeSide = 'end',
   backdrop = true,
@@ -130,10 +139,18 @@ export default function ShellDrawer({
 
   if (!present || typeof document === 'undefined') return null
 
-  const slideOut = side === 'right' ? 'translate-x-full' : '-translate-x-full'
+  const bottom = side === 'bottom'
+  const slideOut = bottom ? 'translate-y-full' : side === 'right' ? 'translate-x-full' : '-translate-x-full'
   const motionPanel = reduced
     ? ''
-    : `transition-transform duration-200 ease-out ${shown ? 'translate-x-0' : slideOut}`
+    : `transition-transform duration-200 ease-out ${shown ? (bottom ? 'translate-y-0' : 'translate-x-0') : slideOut}`
+  /* the sheet's edge is the top; the sides' is the inner vertical */
+  const place = bottom
+    ? `inset-x-0 bottom-0 w-full max-h-full ${edge ? 'border-t' : ''}`
+    : `inset-y-0 max-w-full ${side === 'right' ? `right-0 ${edge ? 'border-l' : ''}` : `left-0 ${edge ? 'border-r' : ''}`} ${width == null ? 'w-full' : ''}`
+  const size = bottom
+    ? { ...(height != null ? { height: typeof height === 'number' ? `${height}px` : height } : {}), paddingBottom: 'calc(1rem + env(safe-area-inset-bottom, 0px))' }
+    : width != null ? { width: typeof width === 'number' ? `${width}px` : width } : undefined
   const motionBackdrop = reduced
     ? ''
     : `transition-opacity duration-200 ease-out ${shown ? 'opacity-100' : 'opacity-0'}`
@@ -159,10 +176,8 @@ export default function ShellDrawer({
         tabIndex={-1}
         /* `edge` / `shadow` (SettingsPanelApproved, 2026-08-27): the approved settings
          * drawer has neither — the sheet meets the page flat */
-        className={`fixed inset-y-0 z-[200] flex max-w-full flex-col bg-surface-primary px-4 py-4 outline-none md:px-5 lg:px-6 ${backdrop && shadow ? 'shadow-2xl' : ''} ${
-          side === 'right' ? `right-0 ${edge ? 'border-l' : ''}` : `left-0 ${edge ? 'border-r' : ''}`
-        } border-oq-08 ${width == null ? 'w-full' : ''} ${motionPanel} ${className}`}
-        style={width != null ? { width: typeof width === 'number' ? `${width}px` : width } : undefined}
+        className={`fixed z-[200] flex flex-col bg-surface-primary px-4 py-4 outline-none md:px-5 lg:px-6 ${backdrop && shadow ? 'shadow-2xl' : ''} ${place} border-oq-08 ${motionPanel} ${className}`}
+        style={size}
       >
         {/* closeSide="start": the reference sets the × glyph ~9px deeper than
           * the label column's edge, with extra top air (both reference frames