@objectifthunes/whiteboard 0.2.7 → 0.4.0

package/dist/whiteboard.css

@@ -1,7 +1,7 @@
 /* ── CSS Custom Properties (light defaults) ──────────── */
 
 :root {
-  --wb-font-body: 'Segoe UI', sans-serif;
+  --wb-font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
   --wb-fs-2xs: 0.64rem;
   --wb-fs-xs: 0.68rem;
   --wb-fs-sm: 0.72rem;
@@ -120,6 +120,13 @@ button:disabled { cursor: not-allowed; opacity: 0.58; }
 
 input,
 textarea,
+input:not([type]),
+input[type='text'],
+input[type='number'],
+input[type='search'],
+input[type='email'],
+input[type='password'],
+input[type='url'],
 select {
   width: 100%;
   border: 1px solid var(--wb-border);
@@ -141,6 +148,13 @@ textarea { min-height: 86px; resize: vertical; }
 
 input:focus,
 textarea:focus,
+input:not([type]):focus,
+input[type='text']:focus,
+input[type='number']:focus,
+input[type='search']:focus,
+input[type='email']:focus,
+input[type='password']:focus,
+input[type='url']:focus,
 select:focus {
   outline: none;
   border-color: var(--wb-focus-border);
@@ -839,15 +853,15 @@ button.chip:hover {
   align-items: start;
 }
 
-.split-layout--element {
+.split-layout--media-content {
   grid-template-columns: 84px minmax(0, 1fr);
 }
 
-.split-layout--character {
+.split-layout--single {
   grid-template-columns: minmax(0, 1fr);
 }
 
-.split-layout--user {
+.split-layout--media-content-actions {
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: var(--wb-gap-lg);
@@ -926,13 +940,13 @@ button.chip:hover {
   font-size: var(--wb-fs-sm);
 }
 
-.asset-title {
+.card-title {
   font-size: var(--wb-fs-sm);
   font-weight: 600;
   word-break: break-word;
 }
 
-.asset-title--clamp {
+.card-title--clamp {
   display: -webkit-box;
   overflow: hidden;
   -webkit-line-clamp: 2;
@@ -940,10 +954,6 @@ button.chip:hover {
   min-height: 2.1em;
 }
 
-.story-title {
-  font-size: 0.88rem;
-}
-
 .page-title {
   font-size: 1.1rem;
   font-weight: 600;
@@ -1011,19 +1021,15 @@ button.chip:hover {
   gap: 0.4rem;
 }
 
-.picker-grid--elements {
-  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
-}
-
-.picker-grid--characters {
-  grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
-}
-
-.picker-grid--library {
-  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
-}
-
 .picker-card {
+  /* explicit layout: the button element global (inline-flex, centered,
+     nowrap) must never turn this card into a clipped row */
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  justify-content: flex-start;
+  gap: var(--wb-gap-sm);
+  white-space: normal;
   width: 100%;
   border: 1px solid var(--wb-border);
   border-radius: var(--wb-radius-md);
@@ -1319,8 +1325,277 @@ button.chip:hover {
     bottom: 4.9rem;
   }
 
-  .split-layout--element,
-  .split-layout--user {
+  .split-layout--media-content,
+  .split-layout--media-content-actions {
     grid-template-columns: 1fr;
   }
 }
+
+/* ── Surface ──────────────────────────────────────────────────────────
+   The plain floating overlay container (outside any WhiteboardShell). */
+.surface {
+  border: 1px solid var(--wb-border);
+  border-radius: var(--wb-radius-lg);
+  background: var(--wb-surface);
+  box-shadow: var(--wb-shadow-soft);
+  color: var(--wb-text);
+  padding: 0.9rem;
+}
+
+.surface--pad-sm {
+  padding: 0.55rem;
+}
+
+.surface--pad-none {
+  padding: 0;
+}
+
+/* ── Toolbar (horizontal sibling of .vertical-toolbar) ──────────────── */
+.toolbar {
+  position: fixed;
+  top: 0.72rem;
+  left: 50%;
+  z-index: 1200;
+  display: flex;
+  align-items: center;
+  gap: var(--wb-gap-sm);
+  transform: translateX(-50%);
+  padding: 0.34rem;
+  border: 1px solid var(--wb-border);
+  border-radius: var(--wb-radius-lg);
+  background: var(--wb-surface);
+  box-shadow: var(--wb-shadow-soft);
+  white-space: nowrap;
+}
+
+.toolbar--bottom {
+  top: auto;
+  bottom: 0.72rem;
+}
+
+.toolbar--static {
+  position: static;
+  transform: none;
+}
+
+.toolbar__items,
+.toolbar__end {
+  display: flex;
+  align-items: center;
+  gap: var(--wb-gap-sm);
+}
+
+.toolbar__end {
+  margin-left: var(--wb-gap-md);
+}
+
+/* ── Checkbox & Switch ───────────────────────────────────────────────── */
+.checkbox {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0.5rem;
+  width: 100%;
+  cursor: pointer;
+  font-size: var(--wb-fs-sm);
+  color: var(--wb-text);
+  white-space: normal;
+  text-align: left;
+}
+
+.checkbox__input {
+  flex: none;
+  width: 0.875rem;
+  height: 0.875rem;
+  margin: 0;
+  accent-color: var(--wb-primary);
+  cursor: pointer;
+}
+
+.checkbox__text {
+  min-width: 0;
+}
+
+.checkbox__hint {
+  color: var(--wb-text-muted);
+}
+
+.switch__input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.switch__track {
+  flex: none;
+  position: relative;
+  width: 1.9rem;
+  height: 1.05rem;
+  border-radius: var(--wb-radius-pill);
+  background: var(--wb-surface-active);
+  border: 1px solid var(--wb-border);
+  transition: background-color var(--wb-transition-fast);
+}
+
+.switch__thumb {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 0.85rem;
+  height: 0.85rem;
+  border-radius: 50%;
+  background: var(--wb-white);
+  box-shadow: var(--wb-shadow-soft);
+  transition: transform var(--wb-transition-fast);
+}
+
+.switch__input:checked + .switch__track {
+  background: var(--wb-primary);
+  border-color: var(--wb-primary);
+}
+
+.switch__input:checked + .switch__track .switch__thumb {
+  transform: translateX(0.85rem);
+}
+
+.switch__input:focus-visible + .switch__track {
+  box-shadow: 0 0 0 3px var(--wb-focus-shadow);
+}
+
+/* ── Slider ──────────────────────────────────────────────────────────── */
+.slider {
+  display: grid;
+  gap: 0.3rem;
+  width: 100%;
+}
+
+.slider__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--wb-gap-sm);
+}
+
+.slider__value {
+  font-size: var(--wb-fs-xs);
+  color: var(--wb-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.slider__input {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  height: 0.95rem;
+  margin: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.slider__input::-webkit-slider-runnable-track {
+  height: 0.25rem;
+  border-radius: var(--wb-radius-pill);
+  background: var(--wb-surface-active);
+}
+
+.slider__input::-moz-range-track {
+  height: 0.25rem;
+  border-radius: var(--wb-radius-pill);
+  background: var(--wb-surface-active);
+}
+
+.slider__input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 0.8rem;
+  height: 0.8rem;
+  margin-top: -0.28rem;
+  border-radius: 50%;
+  border: none;
+  background: var(--wb-primary);
+  box-shadow: var(--wb-shadow-soft);
+}
+
+.slider__input::-moz-range-thumb {
+  width: 0.8rem;
+  height: 0.8rem;
+  border-radius: 50%;
+  border: none;
+  background: var(--wb-primary);
+  box-shadow: var(--wb-shadow-soft);
+}
+
+.slider__input:focus-visible {
+  outline: none;
+}
+
+.slider__input:focus-visible::-webkit-slider-thumb {
+  box-shadow: 0 0 0 3px var(--wb-focus-shadow);
+}
+
+.slider__input:focus-visible::-moz-range-thumb {
+  box-shadow: 0 0 0 3px var(--wb-focus-shadow);
+}
+
+/* ── Tooltip (CSS-only, hover + keyboard focus) ──────────────────────── */
+.tooltip {
+  position: relative;
+  display: inline-flex;
+}
+
+.tooltip__bubble {
+  position: absolute;
+  bottom: calc(100% + 0.4rem);
+  left: 50%;
+  z-index: 1400;
+  transform: translateX(-50%);
+  padding: 0.22rem 0.5rem;
+  border-radius: var(--wb-radius-sm);
+  background: var(--wb-text);
+  color: var(--wb-surface);
+  font-size: var(--wb-fs-xs);
+  line-height: 1.3;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--wb-transition-fast);
+}
+
+.tooltip--bottom .tooltip__bubble {
+  bottom: auto;
+  top: calc(100% + 0.4rem);
+}
+
+.tooltip:hover .tooltip__bubble,
+.tooltip:focus-within .tooltip__bubble {
+  opacity: 1;
+}
+
+/* ── Kbd ─────────────────────────────────────────────────────────────── */
+.kbd {
+  display: inline-block;
+  padding: 0 0.32rem;
+  border: 1px solid var(--wb-border);
+  border-bottom-width: 2px;
+  border-radius: var(--wb-radius-sm);
+  background: var(--wb-surface-soft);
+  color: var(--wb-text-secondary);
+  font-family: ui-monospace, monospace;
+  font-size: var(--wb-fs-xs);
+  line-height: 1.5;
+}
+
+/* ── Divider ─────────────────────────────────────────────────────────── */
+.divider {
+  border: none;
+  margin: 0;
+  background: var(--wb-border);
+  height: 1px;
+  width: 100%;
+}
+
+.divider--vertical {
+  width: 1px;
+  height: auto;
+  align-self: stretch;
+  min-height: 1rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@objectifthunes/whiteboard",
-  "version": "0.2.7",
+  "version": "0.4.0",
   "description": "Pan/zoom whiteboard canvas with draggable panels, minimap, snap-to-grid, and zoom controls",
   "license": "MIT",
   "type": "module",
@@ -20,6 +20,12 @@
   "sideEffects": [
     "*.css"
   ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "prepack": "pnpm run build"
+  },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
@@ -34,10 +40,5 @@
     "vite": "^6.0.0",
     "vite-plugin-dts": "^4.0.0",
     "zustand": "^4.5.0"
-  },
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite build --watch",
-    "typecheck": "tsc --noEmit"
   }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 ObjectifThunes
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.