@kolkrabbi/kol-component 0.179.0 → 0.181.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.179.0",
+  "version": "0.181.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",
@@ -30,10 +30,8 @@
     "framer-motion": "^12.0.0",
     "gsap": "^3.13.0",
     "hls.js": "^1.6.0",
-    "opentype.js": "^1.3.4 || ^2.0.0",
     "react": "^18.3.0 || ^19.0.0",
-    "react-dom": "^18.3.0 || ^19.0.0",
-    "react-router-dom": "^6.0.0 || ^7.0.0"
+    "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
     "@kolkrabbi/kol-icons": "^0.25.0"
@@ -57,13 +55,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "peerDependenciesMeta": {
-    "react-router-dom": {
-      "optional": true
-    },
-    "opentype.js": {
-      "optional": true
-    }
-  }
+  "sideEffects": false
 }

package/src/atoms/SegmentedToggle.jsx

@@ -43,10 +43,18 @@
  *               mono-16, 8/20 pad). Same cell padding + mono type as the
  *               matching `.kol-btn-{sm,md,lg}`, so a segmented strip lines
  *               up with a Button of the same size.
+ *   tone      — the ground (segmented-toggle-sunken-tone, kol-client-olina 2026-09-03: the one
+ *               control ControlToneSunken skipped; kol-fxr and olina carried the same three CSS
+ *               lines to fake it). `sunken` (alias `inverse`): shell border transparent, the
+ *               selected cell on `--kol-surface-sunken` / `fg-96`, rest cells as the default paints
+ *               them; `filled` and `tonal` keep their own selected law. Through `toneClass`, so a
+ *               `kol-tone-sunken` wrapper reaches it too. Unset = inherit.
  *   ariaLabel — accessible name for the group
  *   className — additional classes on the outer shell
  */
-export default function SegmentedToggle({ value, onChange, options = [], variant = 'default', size = 'md', ariaLabel, className = '' }) {
+import { toneClass } from '../utilities/tone.js'
+
+export default function SegmentedToggle({ value, onChange, options = [], variant = 'default', size = 'md', tone = 'default', ariaLabel, className = '' }) {
   const cellType = { xs: 'kol-mono-8', sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }[size]
   const stateless = value == null
   const focusIdx = Math.max(0, options.findIndex((opt) => opt.value === value))
@@ -71,6 +79,7 @@ export default function SegmentedToggle({ value, onChange, options = [], variant
         (variant === 'filled' || variant === 'tonal') && 'kol-seg--filled',
         variant === 'tonal' && 'kol-seg--tonal',
         size !== 'md' && `kol-seg--${size}`,
+        toneClass(tone),
         className,
       ].filter(Boolean).join(' ')}
     >

package/src/utilities/ExitPreview.jsx

@@ -1,10 +1,28 @@
-import { Link, useLocation } from 'react-router-dom'
-
-export default function ExitPreview() {
-  const { pathname: _pathname } = useLocation()
+/**
+ * ExitPreview — the escape hatch out of a preview surface, worn as a fixed
+ * pill. Router-AGNOSTIC by the same seam kol-shell uses for navigation: it
+ * renders a plain `<a>` unless the consumer hands it its router's link.
+ *
+ * It used to `import { Link, useLocation } from 'react-router-dom'` at module
+ * level. react-router-dom is an OPTIONAL peer of this package, so that one line
+ * made kol-component — and every package whose barrel touches it — unbuildable
+ * for a consumer without a router (kol-client-olina, 2026-09-03). An optional
+ * peer is never statically imported.
+ *
+ * @param {string} [to='/'] - Where exiting goes.
+ * @param {React.ElementType} [linkComponent='a'] - Router link to render
+ *   instead of an anchor, e.g. react-router's `Link`. Given one, `to` is passed
+ *   as `to`; on the default anchor it is passed as `href`.
+ *
+ * @example
+ *   <ExitPreview />                                  // plain anchor, hard nav
+ *   <ExitPreview linkComponent={Link} />             // client-side nav
+ */
+export default function ExitPreview({ to = '/', linkComponent: Link = 'a' }) {
+  const target = Link === 'a' ? { href: to } : { to }
 
   return (
-    <Link to="/" className="kol-exit-preview" aria-label="Exit preview">
+    <Link {...target} className="kol-exit-preview" aria-label="Exit preview">
       <span className="kol-exit-preview-icon" aria-hidden="true">×</span>
       <span className="kol-exit-preview-label">Exit</span>
     </Link>