@kolkrabbi/kol-component 0.1.0

package/src/molecules/Modal.jsx

@@ -0,0 +1,124 @@
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import Button from '../atoms/Button.jsx'
+import Input from '../atoms/Input.jsx'
+
+/**
+ * Modal — promise-based prompt + confirm dialogs.
+ *
+ *   const { prompt, confirm } = useModal()
+ *   const name    = await prompt('Name this frame:', 'Untitled')
+ *   const proceed = await confirm('Discard unsaved changes?')
+ *
+ * Returned promise resolves to:
+ *   - prompt  → string (value) on submit, `null` on cancel
+ *   - confirm → boolean: `true` on confirm, `false` on cancel
+ *
+ * Mounted once at the app root (BrandLayout). Renders into `document.body`
+ * via portal, so it floats above any rail / scroll-context.
+ */
+
+const ModalCtx = createContext(null)
+
+export function ModalProvider({ children }) {
+  const [state, setState] = useState(null)
+
+  const closeWith = useCallback((value) => {
+    setState((s) => {
+      if (s) s.resolve(value)
+      return null
+    })
+  }, [])
+
+  const prompt = useCallback((title, defaultValue = '') =>
+    new Promise((resolve) => setState({ kind: 'prompt', title, defaultValue, resolve })),
+  [])
+
+  const confirm = useCallback((title) =>
+    new Promise((resolve) => setState({ kind: 'confirm', title, resolve })),
+  [])
+
+  return (
+    <ModalCtx.Provider value={{ prompt, confirm }}>
+      {children}
+      {state && typeof document !== 'undefined' && createPortal(
+        <ModalView state={state} closeWith={closeWith} />,
+        document.body,
+      )}
+    </ModalCtx.Provider>
+  )
+}
+
+function ModalView({ state, closeWith }) {
+  const [val, setVal] = useState(state.defaultValue ?? '')
+  const inputRef = useRef(null)
+
+  useEffect(() => {
+    if (state.kind === 'prompt') inputRef.current?.focus()
+    const onKey = (e) => {
+      if (e.key === 'Escape') closeWith(state.kind === 'prompt' ? null : false)
+      if (e.key === 'Enter')  closeWith(state.kind === 'prompt' ? val : true)
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [state.kind, val, closeWith])
+
+  const submit = () => closeWith(state.kind === 'prompt' ? val : true)
+  const cancel = () => closeWith(state.kind === 'prompt' ? null : false)
+
+  return (
+    <div
+      onMouseDown={cancel}
+      style={{
+        position: 'fixed', inset: 0, zIndex: 1000,
+        background: 'rgba(0,0,0,0.5)',
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+      }}
+    >
+      <div
+        onMouseDown={(e) => e.stopPropagation()}
+        className="kol-modal flex flex-col gap-4 p-5 rounded border border-fg-08"
+        style={{
+          background: 'var(--kol-surface-primary)',
+          color: 'var(--kol-surface-on-primary)',
+          minWidth: 320,
+          maxWidth: '90vw',
+        }}
+      >
+        <p className="kol-helper-12 text-emphasis">{state.title}</p>
+        {state.kind === 'prompt' && (
+          <Input
+            ref={inputRef}
+            variant="outline"
+            size="sm"
+            value={val}
+            onChange={(e) => setVal(e.target.value)}
+            className="w-full"
+          />
+        )}
+        <div className="flex gap-2 justify-end">
+          <Button variant="secondary" size="sm" onClick={cancel}>Cancel</Button>
+          <Button variant="primary"   size="sm" onClick={submit}>OK</Button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function useModal() {
+  const ctx = useContext(ModalCtx)
+  if (ctx) return ctx
+  /* No-context fallback — falls back to native prompt/confirm so callers
+   * don't need to null-check. */
+  return {
+    prompt:  async (title, def = '') => {
+      if (typeof window === 'undefined') return null
+      const v = window.prompt(title, def)
+      return v
+    },
+    confirm: async (title) => {
+      if (typeof window === 'undefined') return false
+      return window.confirm(title)
+    },
+  }
+}

package/src/molecules/Pill.jsx

@@ -0,0 +1,33 @@
+/**
+ * Pill Component
+ *
+ * Small badge/tag component for labels, categories, or status indicators
+ * Uses existing pill classes from components.css (pill-outline, pill-subtle, pill-inverse)
+ *
+ * @param {Object} props
+ * @param {string} props.children - Text content of the pill
+ * @param {string} props.variant - Visual variant: 'outline' | 'subtle' | 'inverse' (default: 'outline')
+ * @param {string} props.size - Size variant: 'sm' | 'md' | 'lg' (default: 'md')
+ * @param {string} props.className - Additional classes for customization
+ */
+const Pill = ({ children, variant = 'outline', size = 'md', className = '' }) => {
+  const variantClasses = {
+    outline: 'pill-outline',
+    subtle: 'pill-subtle',
+    inverse: 'pill-inverse'
+  }
+
+  const sizeClasses = {
+    sm: 'pill-sm',
+    md: 'pill-md',
+    lg: 'pill-lg'
+  }
+
+  return (
+    <span className={`${variantClasses[variant]} ${sizeClasses[size]} ${className}`.trim()}>
+      {children}
+    </span>
+  )
+}
+
+export default Pill

package/src/molecules/Popover.jsx

@@ -0,0 +1,208 @@
+import { useState } from 'react'
+import {
+  useFloating,
+  autoUpdate,
+  offset as offsetMw,
+  flip as flipMw,
+  shift as shiftMw,
+  size as sizeMw,
+  FloatingPortal,
+  FloatingFocusManager,
+  useClick,
+  useHover,
+  useFocus,
+  useDismiss,
+  useRole,
+  useInteractions,
+} from '@floating-ui/react'
+
+/**
+ * Popover — anchored floating-element primitive built on @floating-ui/react.
+ * Two surfaces:
+ *
+ *   1. `usePopover({ open, onOpenChange, ... })` — full hook. Returns refs +
+ *      `getReferenceProps` / `getFloatingProps` so the consumer wires the
+ *      anchor and the floater explicitly. Use when the trigger is non-trivial
+ *      (custom component, span wrapper, anchor on something other than a
+ *      button).
+ *
+ *      const popover = usePopover({ open, onOpenChange })
+ *      <button ref={popover.refs.setReference} {...popover.getReferenceProps()} />
+ *      <PopoverPanel popover={popover}>...</PopoverPanel>
+ *
+ *   2. `<PopoverPanel popover={...}>` — renders the floater into a
+ *      `FloatingPortal` (escapes overflow:hidden ancestors), wraps in
+ *      `FloatingFocusManager` (focus trap + return-focus), applies the
+ *      `.kol-popover` panel chrome.
+ *
+ * Position middleware: `offset` (gap), `flip` (auto-flip on overflow),
+ * `shift` (slide along the cross-axis to stay in viewport), optional
+ * `size` (clamp to available width/height). `autoUpdate` keeps everything
+ * synced on scroll / resize / layout shift.
+ *
+ * Interaction defaults: click toggles, outside-click + Esc dismiss, role
+ * defaults to `dialog` (use `role: 'menu' | 'listbox' | 'tooltip'` for
+ * other shapes — also drives the right ARIA attrs on the reference).
+ */
+export function usePopover({
+  open,
+  onOpenChange,
+  placement = 'bottom-start',
+  offset = 6,
+  flip = true,
+  flipPadding = 8,
+  shiftPadding = 8,
+  matchReferenceWidth = false,
+  click = true,
+  hover = false,
+  hoverDelay = { open: 400, close: 100 },
+  focus = false,
+  dismiss = true,
+  role = 'dialog',
+  referenceElement = null,
+} = {}) {
+  const middleware = [offsetMw(offset)]
+  if (flip) middleware.push(flipMw({ padding: flipPadding }))
+  middleware.push(shiftMw({ padding: shiftPadding }))
+  if (matchReferenceWidth) {
+    middleware.push(
+      sizeMw({
+        apply({ rects, elements }) {
+          Object.assign(elements.floating.style, {
+            minWidth: `${rects.reference.width}px`,
+          })
+        },
+      })
+    )
+  }
+
+  /* `elements.reference` lets the consumer anchor the popover to an
+   * external DOM node (e.g. a parent container ref) instead of wiring
+   * `setReference` onto the trigger. Used by TypeBlockToolbar to anchor
+   * to its TypeFrame parent. */
+  const data = useFloating({
+    open,
+    onOpenChange,
+    placement,
+    middleware,
+    whileElementsMounted: autoUpdate,
+    elements: referenceElement ? { reference: referenceElement } : undefined,
+  })
+
+  const interactions = useInteractions([
+    useClick(data.context, { enabled: click }),
+    useHover(data.context, { enabled: hover, delay: hoverDelay, move: false }),
+    useFocus(data.context, { enabled: focus }),
+    useDismiss(data.context, { enabled: dismiss }),
+    useRole(data.context, { role }),
+  ])
+
+  return { ...data, ...interactions, open }
+}
+
+/**
+ * Tooltip — hover-triggered popover with text content. Wraps any trigger
+ * element. Built on `usePopover` with `hover: true`, `click: false`,
+ * `role: 'tooltip'`. Includes keyboard focus trigger so tab-focused
+ * controls also reveal the tooltip.
+ *
+ *   <Tooltip label="Pattern" shortcut="P" placement="bottom">
+ *     <Button iconOnly="ptrn-checker" ... />
+ *   </Tooltip>
+ */
+export function Tooltip({
+  label,
+  shortcut,
+  placement = 'bottom',
+  offset = 6,
+  children,
+  triggerClassName = 'inline-flex',
+}) {
+  const [open, setOpen] = useState(false)
+  const popover = usePopover({
+    open,
+    onOpenChange: setOpen,
+    placement,
+    offset,
+    role: 'tooltip',
+    click: false,
+    hover: true,
+    focus: true,
+  })
+
+  return (
+    <>
+      <span
+        ref={popover.refs.setReference}
+        {...popover.getReferenceProps()}
+        className={triggerClassName}
+      >
+        {children}
+      </span>
+      <PopoverPanel
+        popover={popover}
+        focus={false}
+        panel={false}
+        className="kol-tooltip"
+      >
+        <span className="text-emphasis">{label}</span>
+        {shortcut && <span className="kol-tooltip-key">{shortcut}</span>}
+      </PopoverPanel>
+    </>
+  )
+}
+
+/**
+ * PopoverPanel — renders the floater into a portal with default panel chrome.
+ *
+ * Props:
+ *   popover         — the value returned from `usePopover`
+ *   panel           — apply default `.kol-popover` chrome (default: true)
+ *   modal           — focus modality (default: false — non-modal popover)
+ *   focus           — wrap in FloatingFocusManager (default: true)
+ *   className       — extra classes on the panel
+ *   style           — extra inline styles merged with floatingStyles
+ */
+export function PopoverPanel({
+  popover,
+  children,
+  panel = true,
+  modal = false,
+  focus = true,
+  className = '',
+  style: extraStyle,
+}) {
+  if (!popover.open) return null
+
+  const { refs, floatingStyles, context, getFloatingProps } = popover
+  const cls = [panel && 'kol-popover', className].filter(Boolean).join(' ')
+
+  /* `data-editor-keep-selection` mirrors the marker on the EditorShell
+   * root. Popovers render via FloatingPortal (mounted on <body>, outside
+   * the shell), so the editor's document-level click-away handler would
+   * otherwise treat clicks on popover content as "outside the editor"
+   * and deselect. Tagging the panel here keeps that handler happy for
+   * every popover — color picker, dropdowns, menus, tooltips. Harmless
+   * for non-editor consumers since they ignore the attr. */
+  const node = (
+    <div
+      ref={refs.setFloating}
+      style={extraStyle ? { ...floatingStyles, ...extraStyle } : floatingStyles}
+      className={cls}
+      data-editor-keep-selection
+      {...getFloatingProps()}
+    >
+      {children}
+    </div>
+  )
+
+  return (
+    <FloatingPortal>
+      {focus
+        ? <FloatingFocusManager context={context} modal={modal}>{node}</FloatingFocusManager>
+        : node}
+    </FloatingPortal>
+  )
+}
+
+export default PopoverPanel

package/src/molecules/PropertyInput.jsx

@@ -0,0 +1,32 @@
+/**
+ * PropertyInput — stacked label + input for inspector-style property panels.
+ *   type="number" → Stepper (chevron buttons)
+ *   type="text" / "color" / etc → Input (filled variant)
+ *
+ * Use in a `grid grid-cols-2 gap-4` for x/y/width/height/rotation row pairs.
+ */
+import Label from '../atoms/Label'
+import Input from '../atoms/Input.jsx'
+import Stepper from '../atoms/Stepper'
+
+export default function PropertyInput({
+  label,
+  value,
+  onChange,
+  type = 'text',
+  min,
+  max,
+  step,
+  className = '',
+}) {
+  return (
+    <div className={`flex flex-col gap-2 ${className}`}>
+      <Label className="kol-helper-10">{label}</Label>
+      {type === 'number' ? (
+        <Stepper value={value} onChange={onChange} min={min} max={max} step={step} />
+      ) : (
+        <Input type={type} value={value} onChange={onChange} className="w-full" />
+      )}
+    </div>
+  )
+}

package/src/molecules/QuantityInput.jsx

@@ -0,0 +1,174 @@
+import { useEffect, useState } from 'react'
+
+const SIZE_MAP = {
+  sm: { fontSize: 11, paddingY: 12, paddingX: 24, radius: 20, icon: 10 },
+  md: { fontSize: 12, paddingY: 14, paddingX: 24, radius: 22, icon: 12 },
+  lg: { fontSize: 14, paddingY: 16, paddingX: 24, radius: 24, icon: 14 }
+}
+
+const QuantityInput = ({
+  value = 1,
+  onChange,
+  min = 1,
+  max = 99,
+  size,
+  className = ''
+}) => {
+  const [resolvedSize, setResolvedSize] = useState('md')
+  const [componentWidth, setComponentWidth] = useState('180px')
+
+  useEffect(() => {
+    const determineSize = () => {
+      if (size) {
+        setResolvedSize(size)
+        return
+      }
+
+      if (typeof window === 'undefined') {
+        setResolvedSize('md')
+        return
+      }
+
+      if (window.innerWidth >= 1024) {
+        setResolvedSize('lg')
+      } else if (window.innerWidth >= 768) {
+        setResolvedSize('md')
+      } else {
+        setResolvedSize('sm')
+      }
+    }
+
+    determineSize()
+    window.addEventListener('resize', determineSize)
+    return () => window.removeEventListener('resize', determineSize)
+  }, [size])
+
+  useEffect(() => {
+    const updateWidth = () => {
+      if (typeof window === 'undefined') return
+
+      if (window.innerWidth >= 1024) {
+        setComponentWidth('180px')
+      } else if (window.innerWidth >= 768) {
+        setComponentWidth('140px')
+      } else {
+        setComponentWidth('100px')
+      }
+    }
+    updateWidth()
+    window.addEventListener('resize', updateWidth)
+    return () => window.removeEventListener('resize', updateWidth)
+  }, [])
+
+  const metrics = SIZE_MAP[resolvedSize] || SIZE_MAP.md
+
+  const increment = () => {
+    if (value < max) onChange?.(value + 1)
+  }
+
+  const decrement = () => {
+    if (value > min) onChange?.(value - 1)
+  }
+
+  return (
+    <div
+      className={`relative block ${className}`}
+    >
+      {/* Border wrapper - EXPLICIT 42.5px height */}
+      <div
+        className="w-full flex items-center"
+        style={{
+          position: 'relative',
+          height: '42.5px',
+          border: '1px solid var(--kol-border-default)',
+          borderRadius: `${metrics.radius}px`,
+          backgroundColor: 'var(--kol-surface-primary)',
+          color: 'var(--kol-surface-on-primary)',
+          paddingLeft: `${metrics.paddingX}px`,
+          paddingRight: `${metrics.paddingX}px`,
+          fontSize: `${metrics.fontSize}px`,
+          lineHeight: '120%',
+          fontFamily: 'var(--kol-font-family-mono)',
+          boxSizing: 'border-box'
+        }}
+      >
+        <span>{value}</span>
+
+        {/* Chevrons - absolute, OUTSIDE the padded content */}
+        <div
+          style={{
+            position: 'absolute',
+            right: `${metrics.paddingX}px`,
+            top: '50%',
+            transform: 'translateY(-50%)',
+            display: 'flex',
+            flexDirection: 'column'
+          }}
+        >
+          <button
+            type="button"
+            onClick={increment}
+            disabled={value >= max}
+            style={{
+              backgroundColor: 'transparent',
+              border: 'none',
+              padding: '0',
+              cursor: value >= max ? 'not-allowed' : 'pointer',
+              opacity: value >= max ? 0.3 : 1,
+              lineHeight: 0,
+              display: 'block'
+            }}
+            aria-label="Increase quantity"
+          >
+            <svg
+              width={metrics.icon}
+              height={metrics.icon}
+              viewBox="0 0 12 12"
+              fill="none"
+            >
+              <path
+                d="m3 7 3-3 3 3"
+                stroke="currentColor"
+                strokeWidth="1.25"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
+          <button
+            type="button"
+            onClick={decrement}
+            disabled={value <= min}
+            style={{
+              backgroundColor: 'transparent',
+              border: 'none',
+              padding: '0',
+              cursor: value <= min ? 'not-allowed' : 'pointer',
+              opacity: value <= min ? 0.3 : 1,
+              lineHeight: 0,
+              display: 'block'
+            }}
+            aria-label="Decrease quantity"
+          >
+            <svg
+              width={metrics.icon}
+              height={metrics.icon}
+              viewBox="0 0 12 12"
+              fill="none"
+            >
+              <path
+                d="m3 5 3 3 3-3"
+                stroke="currentColor"
+                strokeWidth="1.25"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default QuantityInput