clauderipple 0.9.4 → 0.10.0

package/dist/mod/hooks/ui/alerts.tsx

@@ -12,7 +12,8 @@ import { t } from '../i18n'
 import type { RenderNode } from 'claude-code'
 
 import type { HandoffKind, Settings } from '../../types'
-import { CELL_PX, MUTE, ROW_PX, SUB, TONE, pillArt } from './art'
+import { CELL_PX, ROW_PX } from './art'
+import { lookOf } from './look'
 import type { Sea, Tone } from './art'
 import { capsule, closeButton, pill, ripple, segmented as drawnSegmented, well } from './kit'
 import type { SegmentOption } from './kit'
@@ -26,7 +27,7 @@ import { compactNumber, isRich, limitName, resetsLabel } from './view'
 
 type Choice = { key: string; label: string; hotkey: string; onPress: () => void }
 
-type Card = {
+export type Card = {
   key: string
   /** 리플이's face; on the terminal its tone colours the title's mark. */
   face: Face
@@ -44,7 +45,7 @@ type Card = {
 
 const JUDGE_NAME = { haiku: 'settings.haiku', jev: 'settings.jev', model: 'alerts.routerModel' } as const
 
-function cardOf(frame: Frame, alert: AlertView, a: AlertActions): Card {
+export function cardOf(frame: Frame, alert: AlertView, a: AlertActions): Card {
   const L = frame.lang
   const notNow: Choice = { key: 'dismiss', label: t(L, 'alerts.notNow'), hotkey: 'n', onPress: a.dismiss }
   const cancel: Choice = { key: 'dismiss', label: t(L, 'alerts.cancel'), hotkey: 'x', onPress: a.dismiss }
@@ -249,6 +250,7 @@ const CARD_FACE = 34
 
 function drawnExtras(el: Els, frame: Frame, alert: AlertView, a: AlertActions, tone: Tone): RenderNode[] {
   const { Box, Text } = el
+  const k = lookOf(frame)
   if (alert.kind === 'compactNote' && 'Input' in el) {
     const Field = el.Input
     const name = t(frame.lang, 'alerts.keep').trim()
@@ -257,8 +259,8 @@ function drawnExtras(el: Els, frame: Frame, alert: AlertView, a: AlertActions, t
     const cells = Math.max(20, frame.columns - Math.ceil(CARD_FACE / CELL_PX) - Math.ceil(chOf(name)) - 10)
     return [
       <Box key="note-row" flexDirection="row" alignItems="center" columnGap={2} width="100%" minWidth={0}>
-        <Text color={SUB}>{name}</Text>
-        {well(el, 'note', cells, (
+        <Text {...k.sub}>{name}</Text>
+        {well(el, frame, 'note', cells, (
           <Field
             key="note"
             placeholder={placeholder}
@@ -287,29 +289,30 @@ function drawnExtras(el: Els, frame: Frame, alert: AlertView, a: AlertActions, t
   const line = (key: string, name: string, control: RenderNode) => (
     <Box key={key} flexDirection="row" alignItems="center" columnGap={2}>
       <Box width={nameCells} flexShrink={0}>
-        <Text color={MUTE}>{name}</Text>
+        <Text {...k.mute}>{name}</Text>
       </Box>
       {control}
     </Box>
   )
   return [
     <Box key="choices" flexDirection="column" rowGap={1}>
-      {line('kind', names[0]!, drawnSegmented(el, 'kind', kinds, alert.handoffKind, k => a.setHandoffKind(k), tone))}
-      {line('after', names[1]!, drawnSegmented(el, 'after', afters, alert.after, k => a.setHandoffAfter(k), tone))}
+      {line('kind', names[0]!, drawnSegmented(el, frame, 'kind', kinds, alert.handoffKind, kind => a.setHandoffKind(kind), tone))}
+      {line('after', names[1]!, drawnSegmented(el, frame, 'after', afters, alert.after, after => a.setHandoffAfter(after), tone))}
       <Box paddingLeft={nameCells + 2}>
-        <Text color={MUTE} wrap="wrap">{afterHint(frame, alert.after)}</Text>
+        <Text {...k.mute} wrap="wrap">{afterHint(frame, alert.after)}</Text>
       </Box>
     </Box>,
   ]
 }
 
 /** What the chosen "then" does, in a line: the names alone were read the wrong way (2026-10-13). */
-function afterHint(frame: Frame, after: Settings['handoffAfter']): string {
+export function afterHint(frame: Frame, after: Settings['handoffAfter']): string {
   return t(frame.lang, after === 'continue' ? 'alerts.continueHint' : after === 'confirm' ? 'alerts.confirmHint' : 'alerts.copyHint')
 }
 
 function drawnAlert(el: Els, frame: Frame, alert: AlertView, a: AlertActions): RenderNode {
   const { Box, Text } = el
+  const k = lookOf(frame)
   const card = cardOf(frame, alert, a)
   const sea = seaOf(card, alert)
   const tone = sea.tone
@@ -319,7 +322,7 @@ function drawnAlert(el: Els, frame: Frame, alert: AlertView, a: AlertActions): R
   const main = card.main && !fieldSubmits ? card.main : undefined
   const more = drawnExtras(el, frame, alert, a, tone)
   // The actions' cells, as drawn (each pill its own whole cells, a cell between, the way out last).
-  const actionCells = quiet.reduce((n, c) => n + pillArt(c.label, 'ghost', tone).cells + 1, 0) + (main ? pillArt(main.label, 'primary', tone).cells + 1 : 0) + (card.close ? 4 : 0)
+  const actionCells = quiet.reduce((n, c) => n + k.art.pill(c.label, 'ghost', tone).cells + 1, 0) + (main ? k.art.pill(main.label, 'primary', tone).cells + 1 : 0) + (card.close ? 4 : 0)
   const faceCells = Math.ceil(CARD_FACE / CELL_PX) + 2
   const room = frame.columns - 4
   const oneRow = !more.length && faceCells + chOf(card.title) * 1.12 + 2 + chOf(card.body) + 2 + actionCells <= room
@@ -330,14 +333,14 @@ function drawnAlert(el: Els, frame: Frame, alert: AlertView, a: AlertActions): R
   // where a way out is looked for.
   const buttons = (
     <Box key="actions" flexDirection="row" alignItems="center" alignSelf={more.length ? 'flex-start' : 'center'} columnGap={1} flexShrink={0} flexWrap="wrap" rowGap={1}>
-      {quiet.map(c => pill(el, c.key, c.label, 'ghost', c.onPress, tone))}
-      {main ? pill(el, main.key, main.label, 'primary', main.onPress, tone) : null}
-      {card.close ? closeButton(el, card.close.key, card.close.label, card.close.onPress) : null}
+      {quiet.map(c => pill(el, frame, c.key, c.label, 'ghost', c.onPress, tone))}
+      {main ? pill(el, frame, main.key, main.label, 'primary', main.onPress, tone) : null}
+      {card.close ? closeButton(el, frame, card.close.key, card.close.label, card.close.onPress) : null}
     </Box>
   )
-  const face = ripple(el, card.key, card.face, card.title, CARD_FACE, card.percent)
-  const title = <Text key="title" bold color={TONE[tone].text} wrap="wrap">{card.title}</Text>
-  const body = <Text key="body" color={SUB} wrap="wrap">{card.body}</Text>
+  const face = ripple(el, frame, card.key, card.face, card.title, CARD_FACE, card.percent)
+  const title = <Text key="title" bold color={k.tone(tone)} wrap="wrap">{card.title}</Text>
+  const body = <Text key="body" {...k.sub} wrap="wrap">{card.body}</Text>
   const top = oneRow ? (
     <Box key="top" flexDirection="row" alignItems="center" columnGap={2} width="100%" minWidth={0}>
       {face}

package/dist/mod/hooks/ui/art.ts

@@ -13,7 +13,8 @@
 // - The desktop sets text at 13 px with 19 px lines; a cell is 1ch, 7.917 px. Controls are sized in
 //   whole cells so a picture and the presses laid over it share one grid.
 
-import { chOf } from './theme'
+import type { Skin } from '../../types/index.d.ts'
+import { chOf } from './theme.ts'
 
 /** One desktop cell (1ch of the host's 13 px sans), px. */
 export const CELL_PX = 7.917
@@ -58,7 +59,7 @@ export const DEPTH = ['#67e8f9', '#7dd3fc', '#a5b4fc', '#a78bfa', '#c084fc'] as
 
 const FONT = "-apple-system,BlinkMacSystemFont,'SF Pro Text','Apple SD Gothic Neo','Segoe UI',system-ui,sans-serif"
 
-const r = (x: number): string => String(Math.round(x * 100) / 100)
+export const r = (x: number): string => String(Math.round(x * 100) / 100)
 
 /** One SVG document, `width` × `height` px; nothing in it moves when less motion is asked for. */
 export function svg(width: number, height: number, body: string, css = '', extra = ''): string {
@@ -66,7 +67,7 @@ export function svg(width: number, height: number, body: string, css = '', extra
   return '<svg xmlns="http://www.w3.org/2000/svg" width="' + r(width) + '" height="' + r(height) + '" viewBox="0 0 ' + r(width) + ' ' + r(height) + '"' + extra + '><style>' + base + css + '</style>' + body + '</svg>'
 }
 
-function esc(text: string): string {
+export function esc(text: string): string {
   return text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
 }
 
@@ -320,7 +321,7 @@ export type PillLook = 'primary' | 'ghost'
 /** Glyphs a button may lead with, drawn on a 12 px square. */
 export type Glyph = 'open' | 'close' | 'gear' | 'back' | 'next' | 'copy' | 'save' | 'compact' | 'handoff'
 
-const GLYPH: Record<Glyph, string> = {
+export const GLYPH: Record<Glyph, string> = {
   open: '<path d="M7 2.2h2.8V5M9.8 2.2L5.6 6.4M8.8 7.4v2.4H2.2V3.2h2.4"/>',
   close: '<path d="M3 3l6 6M9 3L3 9"/>',
   gear: '<circle cx="6" cy="6" r="1.7"/><path d="M6 1.3v1.3M6 9.4v1.3M1.3 6h1.3M9.4 6h1.3M2.7 2.7l.9.9M8.4 8.4l.9.9M2.7 9.3l.9-.9M8.4 3.6l.9-.9"/><circle cx="6" cy="6" r="3.5"/>',
@@ -555,14 +556,30 @@ export function gaugeArt(kind: string): string {
   return svg(16, 16, arc + '<path d="' + needle + '" fill="none" stroke="' + stroke + '" stroke-width="1.4" stroke-linecap="round"/><circle cx="8" cy="11.4" r="1.2" fill="' + stroke + '"/>')
 }
 
+/** A limit window's share as a small horizontal bar, 36 × 6 px with round ends: the track white at
+ * low strength, the fill the ring's own teal-to-violet while all is well, amber, then red. Whole
+ * percents only, like the ring: the same figure is the same picture. */
+export function barArt(percent: number, tone: Tone | 'ink'): string {
+  const W = 36
+  const H = 6
+  // Rounded to the integer: neighbouring readings draw byte-identical pictures.
+  const share = Math.max(0, Math.min(1, Math.round(percent) / 100))
+  const fill = tone === 'ink' ? 'url(#g)' : TONE[tone].hi
+  return svg(W, H,
+    '<defs><linearGradient id="g" x1="0" x2="1" y1="0" y2="0"><stop offset="0" stop-color="#67e8f9"/><stop offset="1" stop-color="#a78bfa"/></linearGradient>' +
+    '<clipPath id="c"><rect x="0" y="0" width="' + W + '" height="' + H + '" rx="3"/></clipPath></defs>' +
+    '<rect x="0" y="0" width="' + W + '" height="' + H + '" rx="3" fill="#fff" fill-opacity=".14"/>' +
+    '<g clip-path="url(#c)"><rect x="0" y="0" width="' + r(W * share) + '" height="' + H + '" fill="' + fill + '"/></g>')
+}
+
 export const ICON_PX = 16
 
 /** Line icons of the band's controls, 16 px. */
 export type Icon = 'flame' | 'gear' | 'agents' | 'log' | 'compact' | 'clear'
 
-const FLAME = 'M8.1 14.3c2.8 0 4.5-1.9 4.5-4.4 0-2.8-2.4-4.2-2.8-7.2-1.7 1.1-2.6 2.8-2.5 4.3-1-.4-1.5-1.4-1.6-2.3-1.4 1.3-2 2.9-2 5.2 0 2.5 1.6 4.4 4.4 4.4z'
+export const FLAME = 'M8.1 14.3c2.8 0 4.5-1.9 4.5-4.4 0-2.8-2.4-4.2-2.8-7.2-1.7 1.1-2.6 2.8-2.5 4.3-1-.4-1.5-1.4-1.6-2.3-1.4 1.3-2 2.9-2 5.2 0 2.5 1.6 4.4 4.4 4.4z'
 
-const ICON: Record<Icon, string> = {
+export const ICON: Record<Icon, string> = {
   flame: '<path d="' + FLAME + '"/>',
   gear: '<circle cx="8" cy="8" r="2.3"/><path d="M8 1.7v1.8M8 12.5v1.8M1.7 8h1.8M12.5 8h1.8M3.5 3.5l1.3 1.3M11.2 11.2l1.3 1.3M3.5 12.5l1.3-1.3M11.2 4.8l1.3-1.3"/><circle cx="8" cy="8" r="4.8"/>',
   agents: '<circle cx="4.8" cy="5" r="2.1"/><circle cx="11.4" cy="5" r="2.1"/><path d="M1.6 13.4c.4-2.4 1.7-3.6 3.2-3.6s2.8 1.2 3.2 3.6M8.2 13.4c.4-2.4 1.7-3.6 3.2-3.6s2.8 1.2 3.2 3.6"/>',
@@ -617,11 +634,12 @@ export type TileArt =
   | { kind: 'judge'; judge: 'haiku' | 'jev' | 'model' }
   | { kind: 'mode'; on: boolean }
   | { kind: 'warm'; on: boolean }
+  | { kind: 'skin'; skin: Skin }
 
 /**
  * A tile's picture, 44 px: a rounded square of its own colour with the setting drawn as it stands
  * (rising bars sounding by themselves for automatic effort, the judge's letter, a stack of worker
- * cards, a flame or a snowflake for keep-warm), alive while it is on.
+ * cards, a flame or a snowflake for keep-warm, a small panel for the skin), alive while it is on.
  */
 export function tileArt(art: TileArt): string {
   const s = TILE_PX
@@ -662,6 +680,14 @@ export function tileArt(art: TileArt): string {
     return svg(s, s, square('#4a3410', '#24180a', '#fbbf24') + card(28, 0.18) + card(21.5, 0.32) + '<g class="fl">' + card(15, 0.95) + '<circle cx="15.5" cy="19.5" r="1.4" fill="#3a2604"/><rect x="19" y="18.6" width="10" height="1.8" rx=".9" fill="#3a2604" fill-opacity=".7"/></g>',
       '.fl{animation:fl 4.4s ease-in-out infinite}@keyframes fl{0%,100%{transform:none}50%{transform:translateY(-1.2px)}}')
   }
+  if (art.kind === 'skin') {
+    // A small panel in lavender: its head's dot, a title line, two lines of words.
+    const ink = '#c4b5fd'
+    return svg(s, s, square('#33227a', '#191146', '#a78bfa') +
+      '<rect x="10.5" y="12.5" width="23" height="19" rx="3.5" fill="' + ink + '" fill-opacity=".12" stroke="' + ink + '" stroke-width="1.6"/>' +
+      '<circle cx="16" cy="18.5" r="2" fill="' + ink + '"/>' +
+      '<path d="M20.5 18.5h8M15 24h12M15 27.5h8" fill="none" stroke="' + ink + '" stroke-width="1.6" stroke-linecap="round"/>')
+  }
   if (art.on) {
     const flame = 'M22 35.5c6.4 0 10-4.2 10-9.6 0-6-5.2-9-6.1-15.4-3.6 2.4-5.6 6-5.4 9.3-2.2-.9-3.3-3-3.5-4.9-3 2.9-4.4 6.4-4.4 11.3 0 5.4 3.6 9.3 9.4 9.3z'
     return svg(s, s,