@kolkrabbi/kol-component 0.45.0 → 0.47.0

package/src/organisms/ContentFilters.jsx

@@ -24,6 +24,21 @@ import IconFrame from '../atoms/IconFrame.jsx'
  * @param {Array} props.mutuallyExclusiveFilters — filter keys that should be mutually exclusive
  * @param {Array} props.customFilterKeys — filter keys handled by renderItem, not by ContentFilters
  * @param {ElementType} props.iconComponent — icon seam (defaults to DS Icon; needs `filter` + `search`)
+ *
+ * Look seams — all default to the shipped values, pass nothing and nothing changes:
+ * @param {string}  props.titleClassName      — header title type/ink
+ * @param {boolean} props.titleUppercase      — cases the title (default false)
+ * @param {string}  props.labelClassName      — filter-group label type/ink
+ * @param {boolean} props.labelUppercase      — cases the group label (default true)
+ * @param {string}  props.tagVariant          — filter chip variant ('primary' grey fill)
+ * @param {string}  props.tagSize             — filter chip size
+ * @param {string}  props.tagActiveClassName  — chip ink, selected
+ * @param {string}  props.tagRestClassName    — chip ink, unselected
+ * @param {string}  props.viewClassName       — RECENT/SAVED strip type
+ * @param {string}  props.layoutClassName     — LIST/GRID strip type
+ * @param {string}  props.stripActiveClassName — strip ink, selected (both strips)
+ * @param {string}  props.stripRestClassName  — strip ink, unselected (both strips)
+ * @param {string}  props.countClassName      — the "N of N" type/ink
  */
 const ContentFilters = ({
   items,
@@ -46,6 +61,22 @@ const ContentFilters = ({
   showCountOnlyWhenFiltering = false,
   iconComponent,
   className = '',
+  /* THE LOOK SEAMS. Every one defaults to what the component shipped, so
+   * passing nothing renders exactly as before — these exist because the
+   * hardcoded values were the wrong call for every consumer but one. */
+  titleClassName = 'kol-helper-14',
+  titleUppercase = false,
+  labelClassName = 'kol-helper-12 text-fg-96',
+  labelUppercase = true,
+  tagVariant = 'primary',
+  tagSize = 'sm',
+  tagActiveClassName = 'text-fg-96',
+  tagRestClassName = 'text-fg-48',
+  viewClassName = 'kol-helper-14',
+  layoutClassName = 'kol-helper-12',
+  stripActiveClassName = 'text-fg-96',
+  stripRestClassName = 'text-fg-32 hover:text-fg-48',
+  countClassName = 'kol-helper-12 text-fg-64',
 }) => {
   /* Icon seam — consumers on a local icon shelf pass their own component
    * rather than being forced onto the DS set. Needs `filter` + `search`. */
@@ -119,13 +150,18 @@ const ContentFilters = ({
     })
   }, [items, activeFilters, customFilterKeys, searchText, searchKeys])
 
+  const showCount = !showCountOnlyWhenFiltering || isExpanded || searchOpen || activeFilters.size > 0
+
   /* THE FILTER VALUE IS A TAG — the atom's whole reason to exist ("a Tag with
    * no handler is a Pill wearing the wrong name"). Three defects lived here
    * until 2026-08-15, all of them working around the atom instead of using it:
    *
    *   variant="default"  — not a declared variant; `VARIANTS[v] ?? primary`
-   *                        silently rendered the FILLED chip. The outlined
-   *                        chip these want is `secondary`.
+   *                        silently rendered the FILLED chip — which is what
+   *                        the chip should be. `primary` is now declared, not
+   *                        fallen through to. (An outlined `secondary` shipped
+   *                        2026-08-15 and was ruled wrong the same day: the
+   *                        grey filled chip is the look.)
    *   className border-* — hand-rolled active state beside the atom's own
    *                        `active` prop, which is what drives `.is-active`.
    *   <div onClick>      — the handler on a wrapper, so Tag rendered a <span>
@@ -147,19 +183,19 @@ const ContentFilters = ({
         * never what anyone looked at. No inline letter-spacing: the helper ramp
         * carries its own, and the override the fork added was not in the
         * rendered path either. */}
-      <h4 className="kol-helper-12 text-fg-96" style={{ textTransform: 'uppercase' }}>
+      <h4 className={labelClassName} style={labelUppercase ? { textTransform: 'uppercase' } : undefined}>
         {group.label}
       </h4>
       <div className="flex flex-wrap gap-4">
         {group.values.map((value) => (
           <Tag
             key={value}
-            size="sm"
-            variant="secondary"
+            size={tagSize}
+            variant={tagVariant}
             hash={false}
             active={activeFilters.has(`${group.key}:${value}`)}
             onClick={() => toggleFilter(group.key, value)}
-            className={activeFilters.has(`${group.key}:${value}`) ? 'text-fg-96' : 'text-fg-48'}
+            className={activeFilters.has(`${group.key}:${value}`) ? tagActiveClassName : tagRestClassName}
           >
             {value}
           </Tag>
@@ -181,7 +217,7 @@ const ContentFilters = ({
             * states"); the span here was the same defect that promoted it. */}
           <h2 className="flex items-center gap-2">
             {titleIcon && <IconFrame name={titleIcon} variant="secondary" size="md" />}
-            <span className="kol-helper-16">{title}</span>
+            <span className={titleClassName} style={titleUppercase ? { textTransform: 'uppercase' } : undefined}>{title}</span>
           </h2>
           <Divider variant="vertical" className="self-stretch py-1" />
           <div className="flex items-center gap-1">
@@ -201,7 +237,7 @@ const ContentFilters = ({
                 width: searchOpen ? 200 : 32,
                 background: searchOpen ? 'var(--kol-surface-secondary)' : 'transparent',
                 border: 'none',
-                transition: 'width 600ms cubic-bezier(0.16, 1, 0.3, 1), background 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+                transition: 'width 600ms var(--kol-ease-house), background 400ms var(--kol-ease-house)',
                 overflow: 'hidden',
               }}
               onClick={() => {
@@ -216,7 +252,7 @@ const ContentFilters = ({
                 className="flex items-center justify-center flex-shrink-0"
                 style={{
                   opacity: searchOpen ? 0 : 1,
-                  transition: 'opacity 300ms cubic-bezier(0.16, 1, 0.3, 1)',
+                  transition: 'opacity 300ms var(--kol-ease-house)',
                   position: searchOpen ? 'absolute' : 'relative',
                 }}
               >
@@ -250,11 +286,6 @@ const ContentFilters = ({
         </div>
 
         <div className="flex items-center gap-8">
-          {(!showCountOnlyWhenFiltering || isExpanded || searchOpen || activeFilters.size > 0) && (
-            <span className="kol-helper-14 text-fg-64">
-              {filteredItems.length} of {totalCount}
-            </span>
-          )}
           {/* RECENT / SAVED is the SAME STRIP as LIST / GRID, not a ViewToggle.
             * Read off kol-monitor's original (_tmp/2026-08-15-shell-adoption/
             * ContentFilters.jsx:225-232): inline spans, `kol-helper-14`,
@@ -270,7 +301,7 @@ const ContentFilters = ({
                 <span
                   key={opt.value}
                   onClick={() => handleViewModeChange(opt.value)}
-                  className={`kol-helper-14 cursor-pointer select-none ${viewMode === opt.value ? 'text-fg-96' : 'text-fg-32 hover:text-fg-48'}`}
+                  className={`${viewClassName} cursor-pointer select-none ${viewMode === opt.value ? stripActiveClassName : stripRestClassName}`}
                   style={{ textTransform: 'uppercase', letterSpacing: 1 }}
                 >
                   {opt.label}
@@ -292,7 +323,7 @@ const ContentFilters = ({
         * the values hang beneath it. The strip previously rendered in its own
         * row AFTER this block, which is why expanding a filter group pushed it
         * down the page — the defect that started the whole ticket. */}
-      {(layoutOptions || isExpanded) && (
+      {(layoutOptions || isExpanded || showCount) && (
         <div className="flex items-start justify-between gap-16 pb-4">
           <div className="flex items-start gap-16">
             {isExpanded && filterGroups.map((group) => renderFilterGroup(group))}
@@ -307,20 +338,31 @@ const ContentFilters = ({
               </button>
             )}
           </div>
-          {layoutOptions && (
-            <div className="flex items-center gap-4 flex-shrink-0">
-              {layoutOptions.map((opt) => (
-                <span
-                  key={opt.value}
-                  onClick={() => setLayout(opt.value)}
-                  className={`kol-helper-12 cursor-pointer select-none ${layout === opt.value ? 'text-fg-96' : 'text-fg-32 hover:text-fg-48'}`}
-                  style={{ letterSpacing: 1 }}
-                >
-                  {opt.label}
-                </span>
-              ))}
-            </div>
-          )}
+          {/* The count rides the LAYOUT row, not the header (user ruling
+            * 2026-08-15) — same `kol-helper-12` + 1px tracking as LIST/GRID
+            * beside it. Ink stays `text-fg-64`: it is static information, not
+            * a toggle, so it takes neither the 96 active nor the 32 rest. */}
+          <div className="flex items-center gap-4 flex-shrink-0">
+            {showCount && (
+              <span className={countClassName} style={{ letterSpacing: 1 }}>
+                {filteredItems.length} of {totalCount}
+              </span>
+            )}
+            {layoutOptions && (
+              <div className="flex items-center gap-4">
+                {layoutOptions.map((opt) => (
+                  <span
+                    key={opt.value}
+                    onClick={() => setLayout(opt.value)}
+                    className={`${layoutClassName} cursor-pointer select-none ${layout === opt.value ? stripActiveClassName : stripRestClassName}`}
+                    style={{ letterSpacing: 1 }}
+                  >
+                    {opt.label}
+                  </span>
+                ))}
+              </div>
+            )}
+          </div>
         </div>
       )}
 

package/src/utilities/AssetPlaceholder.jsx

@@ -6,17 +6,22 @@
  * are visibly flagged rather than showing the browser's broken-image icon.
  */
 
+/* `radius` (2026-08-15 user ruling): a placeholder inside a host that already
+ * CLIPS its own corners rounds twice — the visible double-round on the card
+ * form. The host turns it off; it stays on everywhere else, so nothing that
+ * renders a bare placeholder changes. */
 export default function AssetPlaceholder({
   category,
   name,
   aspectRatio = '16 / 9',
   note = 'MISSING',
+  radius = true,
   className = '',
 }) {
   const label = [category, name].filter(Boolean).join(' · ')
   return (
     <div
-      className={`kol-asset-placeholder flex flex-col items-center justify-center gap-[6px] w-full p-6 border border-dashed border-[var(--kol-fg-24)] rounded-[var(--kol-radius-sm)] bg-[var(--kol-fg-02)] text-fg-48 font-mono text-center box-border ${className}`.trim()}
+      className={`kol-asset-placeholder flex flex-col items-center justify-center gap-[6px] w-full p-6 border border-dashed border-[var(--kol-fg-24)] ${radius ? 'rounded-[var(--kol-radius-sm)]' : ''} bg-[var(--kol-fg-02)] text-fg-48 font-mono text-center box-border ${className}`.trim()}
       style={{ aspectRatio }}
       role="img"
       aria-label={`${label || 'asset'} — ${note}`}

package/src/atoms/CopyButton.jsx

@@ -1,42 +0,0 @@
-import { useState } from 'react'
-import { Icon } from '@kolkrabbi/kol-icons'
-
-/**
- * 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
- *   className — extra classes (positioning etc.)
- */
-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), 2000)
-    } catch {
-      /* clipboard blocked — silent */
-    }
-  }
-
-  return (
-    <button
-      type="button"
-      className={`kol-copy-btn ${className}`.trim()}
-      onClick={onCopy}
-      aria-label={copied ? 'Copied' : 'Copy to clipboard'}
-      title={copied ? 'Copied' : 'Copy'}
-      {...props}
-    >
-      <Icon name={copied ? 'check' : 'copy'} size={16} />
-    </button>
-  )
-}