@kolkrabbi/kol-component 0.26.0 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.26.0",
+  "version": "0.27.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/{molecules → atoms}/ColorSwatch.jsx

@@ -34,7 +34,7 @@
  *   onClick         — if provided, renders as <button>; else <span>.
  *   title           — passes through.
  */
-import TransparentX from '../atoms/TransparentX'
+import TransparentX from './TransparentX'
 
 const SIZE_CLASSES = {
   fill:    'w-full aspect-square',

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 → atoms}/Image.jsx

@@ -6,7 +6,7 @@
  * visible at its intended size (aspect-ratio preserved).
  */
 import { useState } from 'react'
-import AssetPlaceholder from '../atoms/AssetPlaceholder'
+import AssetPlaceholder from './AssetPlaceholder'
 
 export default function Image({
   src,

package/src/index.js

@@ -25,28 +25,28 @@ export { default as Button } from './atoms/Button.jsx'
 export { default as CopyButton } from './atoms/CopyButton.jsx'
 export { default as CurveOverlay } from './atoms/CurveOverlay.jsx'
 export { default as Divider } from './atoms/Divider.jsx'
-export { default as DocsToc } from './atoms/DocsToc.jsx'
-export { default as DropdownTagFilter } from './atoms/DropdownTagFilter.jsx'
+export { default as DocsToc } from './molecules/DocsToc.jsx'
+export { default as DropdownTagFilter } from './molecules/DropdownTagFilter.jsx'
 export { default as EmptyState } from './atoms/EmptyState.jsx'
 export { default as IconFrame } from './atoms/IconFrame.jsx'
 export { default as ExitPreview } from './atoms/ExitPreview.jsx'
 export { default as Figure } from './atoms/Figure.jsx'
-export { default as FullscreenOverlay } from './atoms/FullscreenOverlay.jsx'
+export { default as FullscreenOverlay } from './molecules/FullscreenOverlay.jsx'
 export { default as HlsVideo } from './atoms/HlsVideo.jsx'
 export { default as Input } from './atoms/Input.jsx'
 export { default as Label } from './atoms/Label.jsx'
-export { default as LabeledControl } from './atoms/LabeledControl.jsx'
+export { default as LabeledControl } from './molecules/LabeledControl.jsx'
 export { default as OverlayGlassPanel } from './atoms/OverlayGlassPanel.jsx'
 export { default as Pill } from './atoms/Pill.jsx'
 export { usePopover, PopoverPanel, Tooltip } from './atoms/Popover.jsx'
 export { default as ProsePreview } from './atoms/ProsePreview.jsx'
-export { default as QuantityInput } from './atoms/QuantityInput.jsx'
+export { default as QuantityInput } from './molecules/QuantityInput.jsx'
 export { default as RotaryDial } from './atoms/RotaryDial.jsx'
-export { default as SearchInput } from './atoms/SearchInput.jsx'
-export { default as Section } from './atoms/Section.jsx'
+export { default as SearchInput } from './molecules/SearchInput.jsx'
+export { default as Section } from './molecules/Section.jsx'
 export { default as SectionLabel } from './atoms/SectionLabel.jsx'
 export { default as SegmentedToggle } from './atoms/SegmentedToggle.jsx'
-export { default as Stepper } from './atoms/Stepper.jsx'
+export { default as Stepper } from './molecules/Stepper.jsx'
 export { default as Tag } from './atoms/Tag.jsx'
 export { default as Textarea } from './atoms/Textarea.jsx'
 export { default as ToggleBracket } from './atoms/ToggleBracket.jsx'
@@ -63,30 +63,30 @@ export { default as ButtonGroup } from './molecules/ButtonGroup.jsx'
 export { default as AlignmentGrid } from './molecules/AlignmentGrid.jsx'
 export { default as ImageBlock } from './molecules/ImageBlock.jsx'
 export { default as InteractiveImage } from './atoms/InteractiveImage.jsx'
-export { default as SelectionOverlay } from './molecules/SelectionOverlay.jsx'
+export { default as SelectionOverlay } from './atoms/SelectionOverlay.jsx'
 export { default as VideoBlock, getEmbedUrl } from './molecules/VideoBlock.jsx'
 export { default as CardFeatureItem } from './molecules/CardFeatureItem.jsx'
 export { default as CodeBlock } from './molecules/CodeBlock.jsx'
 export { default as ColorInputRow } from './molecules/ColorInputRow.jsx'
 export { default as ColorRamp } from './molecules/ColorRamp.jsx'
-export { default as ColorSwatch } from './molecules/ColorSwatch.jsx'
+export { default as ColorSwatch } from './atoms/ColorSwatch.jsx'
 export { default as Dropdown } from './molecules/Dropdown.jsx'
 export { default as FieldRow, StatusChip } from './molecules/FieldRow.jsx'
-export { default as FramedMediaBand } from './molecules/FramedMediaBand.jsx'
-export { default as Image } from './molecules/Image.jsx'
+export { default as FramedMediaBand } from './organisms/FramedMediaBand.jsx'
+export { default as Image } from './atoms/Image.jsx'
 export { default as MediaCard } from './molecules/MediaCard.jsx'
 export { default as MediaRow } from './molecules/MediaRow.jsx'
 export { MenuItem, MenuDropdownItem, MenuDropdownDivider, MenuDropdownNest } from './molecules/MenuItem.jsx'
 export { MenuPopover } from './molecules/MenuPopover.jsx'
 export { ModalProvider, useModal } from './molecules/Modal.jsx'
-export { default as PaletteHarmonyWheel } from './molecules/PaletteHarmonyWheel.jsx'
+export { default as PaletteHarmonyWheel } from './atoms/PaletteHarmonyWheel.jsx'
 export { default as PropertyInput } from './molecules/PropertyInput.jsx'
 export { default as ShapeDropdown } from './molecules/ShapeDropdown.jsx'
 export { default as ShellDrawer } from './molecules/ShellDrawer.jsx'
-export { default as ShellSearchOverlay } from './molecules/ShellSearchOverlay.jsx'
+export { default as ShellSearchOverlay } from './organisms/ShellSearchOverlay.jsx'
 export { default as Slider } from './molecules/Slider.jsx'
 export { default as SpecList } from './molecules/SpecList.jsx'
-export { default as SpectrumControls, HueStrip, SBSquare, WheelTriangle } from './molecules/SpectrumControls.jsx'
+export { default as SpectrumControls, HueStrip, SBSquare, WheelTriangle } from './organisms/SpectrumControls.jsx'
 export { default as SplitToolButton } from './molecules/SplitToolButton.jsx'
 export { default as SwatchControls, SwatchStack, EyedropPick } from './molecules/SwatchControls.jsx'
 export { default as TabsRow } from './molecules/TabsRow.jsx'
@@ -98,18 +98,18 @@ export { default as TabsRow } from './molecules/TabsRow.jsx'
 export { default as Canvas, CanvasFrame, PanViewport, CANVAS_VIRTUAL_W, DEFAULT_ASPECTS, CANVAS_DEFAULTS } from './organisms/Canvas.jsx'
 export { default as EditorShell } from './organisms/EditorShell.jsx'
 export { default as GalleryCarousel } from './organisms/GalleryCarousel.jsx'
-export { default as AsciiCursor } from './organisms/AsciiCursor.jsx'
-export { default as BentoCard } from './organisms/BentoCard.jsx'
-export { default as Carousel } from './organisms/Carousel.jsx'
+export { default as AsciiCursor } from './atoms/AsciiCursor.jsx'
+export { default as BentoCard } from './molecules/BentoCard.jsx'
+export { default as Carousel } from './molecules/Carousel.jsx'
 export { default as ContentFilters } from './organisms/ContentFilters.jsx'
 export { default as CtaGlobal } from './organisms/CtaGlobal.jsx'
-export { default as ErrorBoundary } from './organisms/ErrorBoundary.jsx'
+export { default as ErrorBoundary } from './molecules/ErrorBoundary.jsx'
 export { default as FeatureSplit } from './organisms/FeatureSplit.jsx'
 export { default as FeaturedCarousel } from './organisms/FeaturedCarousel.jsx'
 export { default as FeaturesCardSection } from './organisms/FeaturesCardSection.jsx'
 export { default as FoundryCTA } from './organisms/FoundryCTA.jsx'
 export { default as FullBleedHero } from './organisms/FullBleedHero.jsx'
-export { default as LoaderOverlay } from './organisms/LoaderOverlay.jsx'
+export { default as LoaderOverlay } from './molecules/LoaderOverlay.jsx'
 export { default as MediaLibrary, MediaLibraryProvider, useMediaLibrary, MediaPicker, MediaBrowser } from './organisms/MediaLibrary.jsx'
 export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'
 export { default as MediaViewer } from './organisms/MediaViewer.jsx'

package/src/molecules/Accordion.jsx

@@ -1,9 +1,6 @@
 /**
  * Accordion — collapsible panel group.
  *
- * taxonomy-ok: molecule — Accordion nests AccordionPanel in this same file,
- * which the import-based validator can't see.
- *
  * Composition-based: <Accordion> wraps <AccordionPanel> children. Each panel
  * owns its open/closed state independently (additive — multiple can be open).
  * For single-open behavior, manage state from the parent and pass controlled

package/src/{organisms → molecules}/BentoCard.jsx

@@ -3,7 +3,7 @@ import { motion } from 'framer-motion'
 import HlsVideo from '../atoms/HlsVideo.jsx'
 import AssetPlaceholder from '../atoms/AssetPlaceholder.jsx'
 import Button from '../atoms/Button.jsx'
-import Image from '../molecules/Image.jsx'
+import Image from '../atoms/Image.jsx'
 import useTilt from '../hooks/useTilt.js'
 import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
 

package/src/molecules/ButtonGroup.jsx

@@ -1,5 +1,3 @@
-/* taxonomy-ok: composes consumer-passed Buttons via children — nesting happens at the call site */
-
 /**
  * ButtonGroup — responsive layout wrapper for a group of Buttons: stacked
  * full-width on mobile, horizontal row from `sm` up, aligned left / center /

package/src/molecules/CodeBlock.jsx

@@ -1,19 +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'
-
-/* taxonomy-ok: molecule — nests <Icon> from @kolkrabbi/kol-icons (the copy
- * affordance). The gate only counts kol-component nesting, so a molecule whose
- * only KOL child lives in a sibling package reads as an atom to it. */
+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 }}`
@@ -29,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-"]': {
@@ -80,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' : ''}`}>
@@ -128,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/ColorInputRow.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import ColorSwatch from './ColorSwatch'
+import ColorSwatch from '../atoms/ColorSwatch'
 import Input from '../atoms/Input'
 import { usePopover, PopoverPanel } from '../atoms/Popover'
 

package/src/molecules/ColorRamp.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import ColorSwatch from './ColorSwatch.jsx'
+import ColorSwatch from '../atoms/ColorSwatch.jsx'
 import { resolveCssVar, isLight } from '../hooks/cssVar.js'
 
 /**

package/src/{atoms → molecules}/DocsToc.jsx

@@ -1,9 +1,5 @@
 import useScrollSpy from '../hooks/useScrollSpy.js'
 
-/* taxonomy-ok: atoms despite being interactive — it composes only the
- * useScrollSpy hook, and hooks don't count as nesting; no KOL component
- * is rendered (nav + anchors only). */
-
 /**
  * DocsToc — on-page table of contents for long docs pages: a flat list of
  * anchor links that highlights the heading currently in view. The scroll

package/src/{atoms → molecules}/FullscreenOverlay.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react'
-import Button from './Button.jsx'
+import Button from '../atoms/Button.jsx'
 
 /**
  * FullscreenOverlay — the scrim + centred sheet every overlay in the repo

package/src/molecules/ImageBlock.jsx

@@ -1,5 +1,5 @@
 import Figure from '../atoms/Figure.jsx'
-import Image from './Image.jsx'
+import Image from '../atoms/Image.jsx'
 
 /**
  * ImageBlock — a captioned prose image: the DS Figure shell (optional label,

package/src/{organisms → molecules}/LoaderOverlay.jsx

@@ -1,4 +1,4 @@
-import FullscreenOverlay from '../atoms/FullscreenOverlay.jsx'
+import FullscreenOverlay from './FullscreenOverlay.jsx'
 
 /**
  * LoaderOverlay — mounts a loading curtain over everything, dead center. A thin

package/src/molecules/PropertyInput.jsx

@@ -7,7 +7,7 @@
  */
 import Label from '../atoms/Label'
 import Input from '../atoms/Input.jsx'
-import Stepper from '../atoms/Stepper'
+import Stepper from './Stepper'
 
 export default function PropertyInput({
   label,

package/src/molecules/SwatchControls.jsx

@@ -1,11 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import ColorSwatch from './ColorSwatch.jsx'
-
-/* taxonomy-ok: the default composed control nests the same-file SwatchStack
- * and EyedropPick (KOL named exports the relative-import check can't see);
- * both collapse the source's internal FramedSwatch onto the sibling molecule
- * ColorSwatch (a same-tier relative import). */
+import ColorSwatch from '../atoms/ColorSwatch.jsx'
 
 /*
  * SwatchControls — the Photoshop-style top row of the colour panel, in two

package/src/organisms/FeaturedCarousel.jsx

@@ -1,6 +1,6 @@
 import { isValidElement, useCallback, useEffect, useState } from 'react'
 import useEmblaCarousel from 'embla-carousel-react'
-import Image from '../molecules/Image.jsx'
+import Image from '../atoms/Image.jsx'
 import HlsVideo from '../atoms/HlsVideo.jsx'
 import OverlayGlassPanel from '../atoms/OverlayGlassPanel.jsx'
 

package/src/{molecules → organisms}/FramedMediaBand.jsx

@@ -1,4 +1,4 @@
-import Image from './Image'
+import Image from '../atoms/Image'
 
 /**
  * FramedMediaBand — full-width media breather band: a centered, aspect-locked

package/src/organisms/FullBleedHero.jsx

@@ -1,6 +1,6 @@
 import { isValidElement } from 'react'
 import HlsVideo from '../atoms/HlsVideo.jsx'
-import Image from '../molecules/Image.jsx'
+import Image from '../atoms/Image.jsx'
 
 /** Height presets; anything else is passed through as a class string. */
 const HEIGHTS = {

package/src/organisms/GalleryCarousel.jsx

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react'
-import Carousel from './Carousel.jsx'
+import Carousel from '../molecules/Carousel.jsx'
 import MediaViewer from './MediaViewer.jsx'
 
 /* Drag-vs-click guard: DS Carousel owns Embla's drag physics but does NOT

package/src/organisms/MediaLibrary.jsx

@@ -2,7 +2,7 @@ import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button.jsx'
 import SegmentedToggle from '../atoms/SegmentedToggle.jsx'
-import FullscreenOverlay from '../atoms/FullscreenOverlay.jsx'
+import FullscreenOverlay from '../molecules/FullscreenOverlay.jsx'
 import MediaCard from '../molecules/MediaCard.jsx'
 import MediaRow from '../molecules/MediaRow.jsx'
 import ContentFilters from './ContentFilters.jsx'

package/src/organisms/MediaViewer.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import useEmblaCarousel from 'embla-carousel-react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import FullscreenOverlay from '../atoms/FullscreenOverlay.jsx'
+import FullscreenOverlay from '../molecules/FullscreenOverlay.jsx'
 
 /**
  * MediaViewer — THE fullscreen paged media viewer. One viewer for every

package/src/organisms/RecordManager.jsx

@@ -2,7 +2,7 @@ import { useMemo, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button'
-import SearchInput from '../atoms/SearchInput'
+import SearchInput from '../molecules/SearchInput'
 import ToggleCheckbox from '../atoms/ToggleCheckbox'
 import ShellDrawer from '../molecules/ShellDrawer'
 import Dropdown from '../molecules/Dropdown'

package/src/{molecules → organisms}/ShellSearchOverlay.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useId, useRef, useState } from 'react'
-import SearchInput from '../atoms/SearchInput.jsx'
+import SearchInput from '../molecules/SearchInput.jsx'
 import Tag from '../atoms/Tag.jsx'
 
 /**

package/src/organisms/SpectrumGrid.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import ColorSwatch from '../molecules/ColorSwatch.jsx'
+import ColorSwatch from '../atoms/ColorSwatch.jsx'
 import { resolveCssVar, resolveCssColor, isLight } from '../hooks/cssVar.js'
 
 /**