@kolkrabbi/kol-component 0.26.0 → 0.26.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.26.0",
+  "version": "0.26.1",
   "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/{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

@@ -3,10 +3,6 @@ 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. */
-
 /**
  * CodeBlock — REPLICATED from the elder reference
  * (kol-website/packages/ui/src/molecules/CodeBlock.jsx, 2026-07-28 user

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'
 
 /**