@kolkrabbi/kol-component 0.26.1 → 0.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.26.1",
+  "version": "0.28.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/atoms/CopyButton.jsx

@@ -1,25 +1,27 @@
 import { useState } from 'react'
+import { Icon } from '@kolkrabbi/kol-icons'
 
 /**
- * CopyButton — copy-to-clipboard chip. Clipboard icon + Copy/Copied label
- * swap with a 1.8s reset; silent when the clipboard is blocked. Chrome
- * comes from .kol-copy-btn (kol-theme); parents add their own positioning
- * class (e.g. CodeBlock's .kol-codeblock-copy).
+ * CopyButton — THE copy-to-clipboard control (2026-08-09 user ruling): the
+ * 32×32 icon button — `copy` glyph flipping to `check` for 2s on copied,
+ * no text label. This is the button CodeBlock carried privately since the
+ * 2026-07-28 elder replication, promoted to the one shared atom; the old
+ * Copy/Copied label chip (one-off SVGs outside the icon set) is retired.
+ * Chrome comes from .kol-copy-btn (kol-theme); parents add their own
+ * positioning class (e.g. CodeBlock's .kol-codeblock-copy).
  *
  * Props:
  *   text      — string (or () => string) written to the clipboard
- *   label     — show the Copy/Copied text next to the icon (default true;
- *               false = icon-only for tight spots)
  *   className — extra classes (positioning etc.)
  */
-export default function CopyButton({ text, label = true, className = '', ...props }) {
+export default function CopyButton({ text, className = '', ...props }) {
   const [copied, setCopied] = useState(false)
 
   const onCopy = async () => {
     try {
       await navigator.clipboard.writeText(typeof text === 'function' ? text() : String(text ?? ''))
       setCopied(true)
-      setTimeout(() => setCopied(false), 1800)
+      setTimeout(() => setCopied(false), 2000)
     } catch {
       /* clipboard blocked — silent */
     }
@@ -34,17 +36,7 @@ export default function CopyButton({ text, label = true, className = '', ...prop
       title={copied ? 'Copied' : 'Copy'}
       {...props}
     >
-      {copied ? (
-        <svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true">
-          <path d="M5 10 L9 14 L15 6" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
-        </svg>
-      ) : (
-        <svg viewBox="0 0 20 20" width="14" height="14" aria-hidden="true">
-          <rect x="6" y="3" width="10" height="12" rx="1" fill="none" stroke="currentColor" strokeWidth="1.4" />
-          <rect x="4" y="6" width="10" height="12" rx="1" fill="none" stroke="currentColor" strokeWidth="1.4" />
-        </svg>
-      )}
-      {label && <span>{copied ? 'Copied' : 'Copy'}</span>}
+      <Icon name={copied ? 'check' : 'copy'} size={16} />
     </button>
   )
 }

package/src/molecules/CodeBlock.jsx

@@ -1,15 +1,14 @@
-import { useState } from 'react'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism'
-import { Icon } from '@kolkrabbi/kol-icons'
+import CopyButton from '../atoms/CopyButton.jsx'
 
 /**
  * CodeBlock — REPLICATED from the elder reference
  * (kol-website/packages/ui/src/molecules/CodeBlock.jsx, 2026-07-28 user
  * mandate): react-syntax-highlighter (Prism) with the oneDark theme flattened
  * onto KOL chrome — transparent bg, 14px/1.6 mono, no text-shadow — a single
- * filename-or-language chip, and a 32×32 icon copy button (`copy` glyph →
- * check on copied). Chrome lives in kol-theme (kol-components-molecules.css).
+ * filename-or-language chip, and the CopyButton atom positioned in-frame
+ * (.kol-codeblock-copy). Chrome lives in kol-theme (kol-components-molecules.css).
  *
  * Input shapes (first match wins per field):
  *   • Portable Text: `value={{ code, language, filename }}`
@@ -25,12 +24,6 @@ import { Icon } from '@kolkrabbi/kol-icons'
  * @param {boolean} [bare]      drop the FRAME; the host owns it. Not a size.
  */
 
-const CheckMarkIcon = () => (
-  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M19.4697 6.41987C19.7626 6.12697 20.2373 6.12697 20.5302 6.41987C20.8231 6.71276 20.8231 7.18752 20.5302 7.48041L10.9443 17.0663C9.87038 18.1401 8.12951 18.1401 7.05561 17.0663L3.46967 13.4804C3.17678 13.1875 3.17678 12.7128 3.46967 12.4199C3.76256 12.127 4.23732 12.127 4.53022 12.4199L8.11615 16.0058C8.60427 16.4938 9.39561 16.4938 9.88373 16.0058L19.4697 6.41987Z" fill="currentColor"/>
-  </svg>
-)
-
 const syntaxTheme = (foregroundToken = 80) => ({
   ...oneDark,
   'pre[class*="language-"]': {
@@ -76,22 +69,10 @@ const syntaxTheme = (foregroundToken = 80) => ({
  * on both axes. Size is INDEPENDENT of `bare`: bare removes the frame, size
  * sets the box, and a bare block still has one. */
 export default function CodeBlock({ children, code: codeProp, language: languageProp, filename: filenameProp, value, bare = false, size = 'md' }) {
-  const [copied, setCopied] = useState(false)
-
   const code = String(value?.code ?? codeProp ?? children ?? '')
   const language = value?.language ?? languageProp ?? 'text'
   const filename = value?.filename ?? filenameProp
 
-  const handleCopy = async () => {
-    try {
-      await navigator.clipboard.writeText(code)
-      setCopied(true)
-      setTimeout(() => setCopied(false), 2000)
-    } catch {
-      /* clipboard blocked — silent */
-    }
-  }
-
   return (
     <div className={bare ? '' : 'kol-codeblock-wrapper'}>
       <div className={`kol-codeblock kol-codeblock--${size}${bare ? ' kol-codeblock--bare' : ''}`}>
@@ -124,15 +105,7 @@ export default function CodeBlock({ children, code: codeProp, language: language
         >
           {code}
         </SyntaxHighlighter>
-        <button
-          type="button"
-          className="kol-codeblock-copy"
-          onClick={handleCopy}
-          aria-label={copied ? 'Code copied!' : 'Copy code'}
-          title={copied ? 'Code copied!' : 'Copy code'}
-        >
-          {copied ? <CheckMarkIcon /> : <Icon name="copy" size={16} />}
-        </button>
+        <CopyButton text={code} className="kol-codeblock-copy" />
       </div>
     </div>
   )

package/src/molecules/FieldRow.jsx

@@ -1,8 +1,10 @@
 import { useState } from 'react'
+import { Icon } from '@kolkrabbi/kol-icons'
 import Input from '../atoms/Input'
 import Tag from '../atoms/Tag'
 import Button from '../atoms/Button'
 import { usePopover, PopoverPanel } from '../atoms/Popover'
+import { INDICATOR } from '../hooks/glyphLadders.js'
 import Dropdown from './Dropdown'
 
 /**
@@ -23,11 +25,19 @@ import Dropdown from './Dropdown'
  * object back through onChange untouched.
  */
 
-/* StatusChip — the interactive status control ("Live ▾" in the reference).
+/* StatusChip — the interactive status control ("Live ▾" in the reference,
+ * rebuilt to it 2026-08-09 after the user's screenshots: the chip carries a
+ * TONE tint + a trailing caret at the INDICATOR rung, and the open panel is
+ * the reference's grammar — current chip on top, hairline, then option rows
+ * with a leading check column).
  * Chip taxonomy (Tag source, 2026-07-30): interactive → Tag, never Pill. The
  * menu is usePopover/PopoverPanel — the same primitive Dropdown builds on —
  * with click handled by the Tag itself (click: false here) so the chip stays
- * the only trigger. Shared by FieldRow and RecordManager's status column. */
+ * the only trigger. Shared by FieldRow and RecordManager's status column.
+ *
+ * Options: strings, or { value, label, tone } — tone ∈ success|warning|error|
+ * info maps onto the --ui-* ladder (.kol-status-chip--* in kol-theme); the
+ * chip wears the ACTIVE option's tone. No tone → the plain Tag look. */
 export function StatusChip({ value, options = [], onChange, size = 'sm' }) {
   const [open, setOpen] = useState(false)
   const popover = usePopover({
@@ -37,30 +47,58 @@ export function StatusChip({ value, options = [], onChange, size = 'sm' }) {
     click: false,
     role: 'listbox',
   })
+  const norm = options.map((opt) => (typeof opt === 'object' ? opt : { value: opt, label: opt }))
+  const activeOpt = norm.find((o) => o.value === value)
+  const toneCls = activeOpt?.tone ? ` kol-status-chip--${activeOpt.tone}` : ''
+  const chip = (interactive) => (
+    <Tag
+      variant="primary"
+      size={size}
+      hash={false}
+      active={interactive && open}
+      className={`kol-status-chip${toneCls}`}
+      onClick={interactive ? () => setOpen((o) => !o) : undefined}
+    >
+      {activeOpt?.label ?? value}
+      {interactive && (
+        <Icon
+          name="chevron-down"
+          size={INDICATOR[size] ?? INDICATOR.sm}
+          className={`transition-transform duration-150${open ? ' rotate-180' : ''}`}
+          aria-hidden="true"
+        />
+      )}
+    </Tag>
+  )
   return (
     <>
       <span ref={popover.refs.setReference} {...popover.getReferenceProps()} className="inline-flex">
-        <Tag variant="primary" size={size} hash={false} active={open} onClick={() => setOpen((o) => !o)}>
-          {value}
-        </Tag>
+        {chip(true)}
       </span>
       <PopoverPanel popover={popover}>
+        {/* the reference panel: current value as its chip, a hairline, then
+          * the option rows — check column always reserved so labels align */}
+        <div className="px-2 pt-2">{chip(false)}</div>
+        <div className="mt-2 border-t border-fg-08" />
         <ul className="flex flex-col p-1 m-0 list-none">
-          {options.map((opt) => {
-            const label = typeof opt === 'object' ? opt.label : opt
-            const val = typeof opt === 'object' ? opt.value : opt
+          {norm.map(({ value: val, label }) => {
             return (
               <li key={val}>
                 <button
                   type="button"
                   role="option"
                   aria-selected={val === value}
-                  className={`kol-helper-12 w-full text-left px-3 py-2 bg-transparent border-0 cursor-pointer rounded-sm hover:bg-fg-08 ${val === value ? 'text-emphasis' : 'text-body'}`}
+                  className={`kol-helper-12 w-full text-left pr-3 py-2 bg-transparent border-0 cursor-pointer rounded-sm hover:bg-fg-08 inline-flex items-center ${val === value ? 'text-emphasis' : 'text-body'}`}
                   onClick={() => {
                     onChange?.(val)
                     setOpen(false)
                   }}
                 >
+                  {/* check column always reserved — labels align whether or
+                    * not a row carries the mark (reference grammar) */}
+                  <span className="inline-flex w-7 shrink-0 justify-center" aria-hidden="true">
+                    {val === value && <Icon name="check" size={12} />}
+                  </span>
                   {label}
                 </button>
               </li>
@@ -96,7 +134,10 @@ export default function FieldRow({
   let control = null
   if (type === 'text') {
     control = (
+      /* sm — record rows are compact chrome (the reference's density); md
+       * read as a form field ("input is large? why?", 2026-08-09). */
       <Input
+        size="sm"
         value={value ?? ''}
         onChange={(e) => onChange?.(e?.target ? e.target.value : e)}
         placeholder={placeholder}

package/src/organisms/RecordManager.jsx

@@ -184,10 +184,13 @@ export default function RecordManager({
         render: (row) => {
           const i = rows.indexOf(row)
           return (
+            {/* REST-VISIBLE (2026-08-09 — "Im looking for this handle"): the
+              * reference draws the grip dim at rest; hover-only hid the whole
+              * reorder affordance. */}
             <button
               type="button"
               aria-label={reorderLabel(i + 1)}
-              className="cursor-grab touch-none bg-transparent border-0 p-0 text-meta hover:text-emphasis opacity-0 group-hover:opacity-100 focus-visible:opacity-100"
+              className="cursor-grab touch-none bg-transparent border-0 p-0 text-meta hover:text-emphasis"
               onPointerDown={(e) => startDrag(e, i)}
             >
               <Icon name="resize-grip" size={14} />
@@ -243,6 +246,11 @@ export default function RecordManager({
               className="ml-2"
             />
           )}
+          {/* trailing overflow — the reference toolbar's far-right … (surface
+            * scope: called with null, vs the drawer header's per-record call) */}
+          {onOverflow && (
+            <Button variant="nav" size="md" iconOnly="more" iconSize={14} className="ml-auto" onClick={() => onOverflow(null)} aria-label="More" />
+          )}
         </div>
       )}