@kolkrabbi/kol-component 0.5.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -8,7 +8,9 @@
   "module": "./src/index.js",
   "exports": {
     ".": "./src/index.js",
-    "./foundry": "./src/organisms/foundry/index.js"
+    "./foundry": "./src/organisms/foundry/index.js",
+    "./dashboards": "./src/dashboards/index.js",
+    "./chess": "./src/chess/index.js"
   },
   "files": [
     "src",
@@ -24,7 +26,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.19",
     "embla-carousel-react": "^8.6.0",
-    "@kolkrabbi/kol-icons": "0.4.0"
+    "@kolkrabbi/kol-icons": "0.5.0"
   },
   "peerDependencies": {
     "react": "^18.3.0 || ^19.0.0",

package/src/atoms/Button.jsx

@@ -82,11 +82,15 @@ const Button = ({
 
   // Add kol-btn-animate class if animateIcon is true to disable default hover states
   const animateClass = animateIcon ? 'kol-btn-animate' : ''
-  const quietClass    = quiet && !pressed ? 'kol-btn-quiet' : ''
-  const selectedClass = selected ? 'kol-btn-selected' : ''
-  const pressedClass  = pressed ? 'kol-btn-pressed' : ''
-
-  const combinedClass = `kol-btn ${variantClass} ${sizeClass} ${animateClass} ${quietClass} ${selectedClass} ${pressedClass} ${className}`.trim().replace(/\s+/g, ' ')
+  // `selected` is a legacy alias of `pressed` — both express the aria-pressed
+  // toggle-on state and render through .kol-btn-pressed. (The old
+  // .kol-btn-selected class never had a CSS rule, so `selected` was a no-op.)
+  // Resolve to one flag so the quiet-drop and the pressed fill agree.
+  const isPressed     = pressed !== undefined ? pressed : selected
+  const quietClass    = quiet && !isPressed ? 'kol-btn-quiet' : ''
+  const pressedClass  = isPressed ? 'kol-btn-pressed' : ''
+
+  const combinedClass = `kol-btn ${variantClass} ${sizeClass} ${animateClass} ${quietClass} ${pressedClass} ${className}`.trim().replace(/\s+/g, ' ')
 
   // Render icon with optional hover state
   const renderIcon = (iconName, iconHoverName) => {

package/src/atoms/Input.jsx

@@ -3,11 +3,11 @@ import { Icon } from '@kolkrabbi/kol-icons'
 /**
  * Input — single-input atom built on the .kol-control shell.
  *
- *   variant="filled" (default) — persistent solid bg
- *   variant="ghost"            — borderless at rest, reveals on hover/focus
- *   variant="outline"          — bordered, transparent bg (also: the
- *                                forced-reveal / "is-edited" state of a
- *                                ghost field — flip variant to outline)
+ *   variant="filled" (default) — persistent solid bg (= button primary chrome)
+ *   variant="outline"          — bordered, transparent bg — THE secondary
+ *                                treatment (2026-07-08 chrome law: one
+ *                                secondary, always subordinate to filled)
+ *   variant="ghost"            — legacy alias, resolves to outline
  *
  *   size="sm" / "md" (default) / "lg" — matched padding + type class
  *
@@ -57,9 +57,12 @@ export default function Input({
   const fixedChars = typeof chars === 'number'
   const resolvedIconSize = iconSize ?? ICON_SIZE[size] ?? 14
 
+  // ghost folds into outline (2026-07-08 chrome law): one secondary treatment.
+  const resolvedVariant = variant === 'ghost' ? 'outline' : variant
+
   const shellCls = [
     'kol-control',
-    `kol-control--${variant}`,
+    `kol-control--${resolvedVariant}`,
     `kol-control-${size}`,
     SIZE_TYPE[size],
     'cursor-text',

package/src/atoms/Textarea.jsx

@@ -1,3 +1,4 @@
+
 import { Icon } from '@kolkrabbi/kol-icons'
 
 /**
@@ -11,8 +12,10 @@ import { Icon } from '@kolkrabbi/kol-icons'
  *   size="sm" / "md" (default) / "lg" — padding + type class
  *
  * Default rows = 3 (kept short — long content gets scrollbars instead of
- * dominating the panel). No native resize handle — fixed size, scrollable
- * overflow. The kol resize-corner icon in the bottom-right is decorative.
+ * dominating the panel). Resize is real (2026-07-08): native resize is
+ * OFF (Firefox's built-in grip cannot be hidden any other way) and the
+ * kol-icon-set-v1 `resize-grip` icon IS the drag handle — corner drag,
+ * both axes, min 120×40. One grip, every browser.
  *
  * Controlled OR uncontrolled:
  *   - pass `value` + `onChange` for controlled,
@@ -34,9 +37,12 @@ export default function Textarea({
   className = '',
   ...props
 }) {
+  // ghost folds into outline (2026-07-08 chrome law): one secondary treatment.
+  const resolvedVariant = variant === 'ghost' ? 'outline' : variant
+
   const wrapperCls = [
     'kol-control',
-    `kol-control--${variant}`,
+    `kol-control--${resolvedVariant}`,
     'kol-control--textarea',
     `kol-control-${size}`,
     SIZE_TYPE[size],
@@ -62,8 +68,33 @@ export default function Textarea({
         style={{ resize: 'none' }}
         {...props}
       />
-      <span aria-hidden="true" className="kol-textarea-resize-icon text-meta pointer-events-none">
-        <Icon name="resize-corner" size={12} />
+      <span
+        aria-hidden="true"
+        className="kol-textarea-resize-icon"
+        onPointerDown={(e) => {
+          // The grip IS the resize handle — corner drag, both axes
+          // (min 120×40). Width lands on the shell, height on the textarea.
+          const shell = e.currentTarget.parentElement
+          const ta = shell?.querySelector('textarea')
+          if (!shell || !ta) return
+          e.preventDefault()
+          const startX = e.clientX
+          const startY = e.clientY
+          const startW = shell.offsetWidth
+          const startH = ta.offsetHeight
+          const move = (ev) => {
+            shell.style.width = `${Math.max(startW + ev.clientX - startX, 120)}px`
+            ta.style.height = `${Math.max(startH + ev.clientY - startY, 40)}px`
+          }
+          const up = () => {
+            window.removeEventListener('pointermove', move)
+            window.removeEventListener('pointerup', up)
+          }
+          window.addEventListener('pointermove', move)
+          window.addEventListener('pointerup', up)
+        }}
+      >
+        <Icon name="resize-grip" size={12} />
       </span>
     </label>
   )

package/src/atoms/ToggleSwitch.jsx

@@ -1,11 +1,30 @@
 import React from 'react'
 
+/**
+ * ToggleSwitch — bare by default (2026-07-08 chrome law rewrite).
+ *
+ *   variant="bare" (default) — label + track, no box
+ *   variant="primary"        — filled shell (surface-secondary), button geometry
+ *   variant="outline"        — bordered shell (border-oq-16), button geometry
+ *
+ *   size="sm" / "md" (default) / "lg" — shells match button heights
+ *     (26/32/40); the track scales with size in all variants.
+ *
+ * Legacy aliases: 'plain' → bare · 'default' (the old boxed look) → outline.
+ * Type via kol-mono-{12,14,16}; no auto-uppercase — casing is authored at
+ * the call site (KOL no-auto-casing rule).
+ */
+
+const SIZE_TYPE = { sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
+const LEGACY_VARIANTS = { plain: 'bare', default: 'outline' }
+
 const ToggleSwitch = ({
   label,
   checked = false,
   onChange,
   onToggle,
-  variant = 'default',
+  variant = 'bare',
+  size = 'md',
   className = '',
   hint,
   ...props
@@ -15,12 +34,20 @@ const ToggleSwitch = ({
     if (onChange) onChange(!checked)
   }
 
-  const variantClass = variant === 'plain' ? 'toggle-switch--plain' : ''
+  const resolvedVariant = LEGACY_VARIANTS[variant] || variant
+
+  const cls = [
+    'toggle-switch',
+    `toggle-switch--${resolvedVariant}`,
+    `toggle-switch--${size}`,
+    SIZE_TYPE[size],
+    className,
+  ].filter(Boolean).join(' ')
 
   return (
     <button
       type="button"
-      className={`toggle-switch ${variantClass} ${className}`.trim()}
+      className={cls}
       data-state={checked ? 'on' : 'off'}
       onClick={handleClick}
       aria-pressed={checked}
@@ -29,7 +56,7 @@ const ToggleSwitch = ({
       <span className="toggle-switch-label">
         {label}
         {hint ? (
-          <span className="ml-2 opacity-60 normal-case tracking-normal kol-helper-10">
+          <span className="ml-2 opacity-60 kol-helper-10">
             {hint}
           </span>
         ) : null}

package/src/chess/ChessPiece.jsx

@@ -0,0 +1,191 @@
+// Load default chess vector set
+const svgModules = import.meta.glob('./assets/chess-vector-set/*.svg', {
+  eager: true,
+  query: '?raw',
+  import: 'default'
+})
+
+// Load extra chess sets (set-1, set-2, set-3)
+const extraSet1Modules = import.meta.glob('./assets/chess-extra-set/set-1/*.svg', {
+  eager: true,
+  query: '?raw',
+  import: 'default'
+})
+
+const extraSet2Modules = import.meta.glob('./assets/chess-extra-set/set-2/*.svg', {
+  eager: true,
+  query: '?raw',
+  import: 'default'
+})
+
+const extraSet3Modules = import.meta.glob('./assets/chess-extra-set/set-3/*.svg', {
+  eager: true,
+  query: '?raw',
+  import: 'default'
+})
+
+const PIECE_KEY_MAP = {
+  white: {
+    king: 'WKing',
+    queen: 'WQueen',
+    rook: 'WRook',
+    bishop: 'WBiskup',
+    knight: 'WKnight',
+    pawn: 'WPawn'
+  },
+  black: {
+    king: 'BKing',
+    queen: 'BQueen',
+    rook: 'BRook',
+    bishop: 'BBiskup',
+    knight: 'BKnight',
+    pawn: 'BPawn'
+  }
+}
+
+// Map for extra sets (use simpler naming convention)
+const EXTRA_SET_PIECE_MAP = {
+  white: {
+    king: 'king-1',
+    queen: 'queen-1',
+    rook: 'rook-1',
+    bishop: 'bishop-1',
+    knight: 'knight-1',
+    pawn: 'pawn-1'
+  },
+  black: {
+    king: 'king',
+    queen: 'queen',
+    rook: 'rook',
+    bishop: 'bishop',
+    knight: 'knight',
+    pawn: 'pawn'
+  }
+}
+
+const PIECE_CACHE = Object.entries(svgModules).reduce((acc, [path, svgContent]) => {
+  const fileName = path.split('/').pop() || ''
+  const key = fileName.replace('.svg', '')
+  acc[key] = svgContent
+  return acc
+}, {})
+
+// Cache for extra sets
+const EXTRA_SET_1_CACHE = Object.entries(extraSet1Modules).reduce((acc, [path, svgContent]) => {
+  const fileName = path.split('/').pop() || ''
+  const key = fileName.replace('.svg', '')
+  acc[key] = svgContent
+  return acc
+}, {})
+
+const EXTRA_SET_2_CACHE = Object.entries(extraSet2Modules).reduce((acc, [path, svgContent]) => {
+  const fileName = path.split('/').pop() || ''
+  const key = fileName.replace('.svg', '')
+  acc[key] = svgContent
+  return acc
+}, {})
+
+const EXTRA_SET_3_CACHE = Object.entries(extraSet3Modules).reduce((acc, [path, svgContent]) => {
+  const fileName = path.split('/').pop() || ''
+  const key = fileName.replace('.svg', '')
+  acc[key] = svgContent
+  return acc
+}, {})
+
+const normalizeSize = (value) => {
+  if (typeof value === 'number') {
+    return `${value}px`
+  }
+  if (typeof value === 'string') {
+    return value
+  }
+  return '64px'
+}
+
+const applySizeToMarkup = (markup) => {
+  let updated = markup
+  updated = updated.replace(/width="[^"]*"/i, 'width="100%"')
+  updated = updated.replace(/height="[^"]*"/i, 'height="100%"')
+  return updated
+}
+
+const ChessPieceBase = ({
+  size = 64,
+  className = '',
+  style = {},
+  children
+}) => {
+  const dimension = normalizeSize(size)
+
+  return (
+    <div
+      className={`relative inline-flex aspect-square items-center justify-center ${className}`}
+      style={{
+        width: dimension,
+        height: dimension,
+        ...style
+      }}
+    >
+      {children}
+    </div>
+  )
+}
+
+const ChessPiece = ({
+  piece,
+  color = 'white',
+  size = 64,
+  className = '',
+  style = {},
+  pieceSet = 'default'
+}) => {
+  const normalizedColor = color === 'black' ? 'black' : 'white'
+
+  let pieceKey
+  let cache
+
+  // Select piece set and cache
+  if (pieceSet === 'set-1') {
+    pieceKey = EXTRA_SET_PIECE_MAP[normalizedColor]?.[piece]
+    cache = EXTRA_SET_1_CACHE
+  } else if (pieceSet === 'set-2') {
+    pieceKey = EXTRA_SET_PIECE_MAP[normalizedColor]?.[piece]
+    cache = EXTRA_SET_2_CACHE
+  } else if (pieceSet === 'set-3') {
+    pieceKey = EXTRA_SET_PIECE_MAP[normalizedColor]?.[piece]
+    cache = EXTRA_SET_3_CACHE
+  } else {
+    // Default set
+    pieceKey = PIECE_KEY_MAP[normalizedColor]?.[piece]
+    cache = PIECE_CACHE
+  }
+
+  const markup = pieceKey ? cache[pieceKey] : null
+
+  if (!markup) {
+    console.warn(`ChessPiece: No asset found for ${normalizedColor} ${piece} in set ${pieceSet}`)
+    return null
+  }
+
+  return (
+    <ChessPieceBase
+      size={size}
+      className={`text-current ${className}`}
+      style={style}
+    >
+      <span
+        className="block h-full w-full"
+        style={{
+          display: 'inline-flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}
+        dangerouslySetInnerHTML={{ __html: applySizeToMarkup(markup) }}
+      />
+    </ChessPieceBase>
+  )
+}
+
+ChessPiece.Base = ChessPieceBase
+
+export default ChessPiece