@objectifthunes/whiteboard 0.2.6 → 0.3.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;
@@ -514,77 +514,48 @@ select:focus {
   to { transform: rotate(360deg); }
 }
 
-/* ── Button ─────────────────────────────────────────── */
+/* ── Button extras ──────────────────────────────────── */
 
-.panel-close-btn {
-  align-self: flex-start;
-  color: var(--wb-text-secondary);
-  border-color: var(--wb-border);
-  background: var(--wb-white);
-}
-
-.panel-close-btn:hover:not(:disabled) {
-  background: var(--wb-bg-hover);
-}
-
-.secondary-btn {
-  color: var(--wb-text-secondary);
-  border-color: var(--wb-border);
-  background: var(--wb-white);
-}
-
-.secondary-btn:hover:not(:disabled) {
-  background: var(--wb-bg-hover);
-}
-
-.danger-btn {
-  background: var(--wb-primary);
-}
-
-.danger-btn:hover:not(:disabled) {
-  background: var(--wb-primary-pressed);
-}
-
-.full-width-btn {
+.wb-btn--full-width {
   width: 100%;
 }
 
-.icon-only-btn {
-  min-width: 1.64rem;
-  min-height: 1.64rem;
-  padding: 0.2rem;
+.panel-close-btn {
+  align-self: flex-start;
 }
 
 /* ── Alert ──────────────────────────────────────────── */
 
-.status-error {
-  border: 1px solid #fecaca;
-  border-radius: var(--wb-radius-sm);
-  padding: 0.42rem 0.54rem;
-  font-size: var(--wb-fs-md);
-  color: #991b1b;
-  background: #fef2f2;
-}
-
-.ui-alert {
-  border: 1px solid var(--wb-border);
-  border-radius: var(--wb-radius-sm);
-  padding: 0.42rem 0.54rem;
-  font-size: var(--wb-fs-md);
-}
-
-.ui-alert--info {
+.wb-alert--info {
   color: #1e3a8a;
   background: #eff6ff;
   border-color: #bfdbfe;
 }
 
-.ui-alert--success {
+[data-theme="dark"] .wb-alert--info {
+  color: #bfdbfe;
+  background: #1e3a8a;
+  border-color: #1e40af;
+}
+
+.wb-alert--success {
   color: #166534;
   background: #ecfdf5;
   border-color: #bbf7d0;
 }
 
+[data-theme="dark"] .wb-alert--success {
+  color: #bbf7d0;
+  background: #14532d;
+  border-color: #15803d;
+}
+
+.wb-alert--muted {
+  color: var(--wb-text-muted);
+  background: var(--wb-surface-muted);
+  border-color: var(--wb-border);
+}
+
 /* ── Field ──────────────────────────────────────────── */
 
 .field-error {
@@ -608,13 +579,13 @@ select:focus {
 }
 
 .pill.success {
-  color: #1d4ed8;
-  background: #eff6ff;
+  color: #166534;
+  background: #ecfdf5;
 }
 
 .pill.warning {
-  color: var(--wb-text-tertiary);
-  background: var(--wb-surface-muted);
+  color: #92400e;
+  background: #fffbeb;
 }
 
 .pill.danger {
@@ -622,6 +593,21 @@ select:focus {
   background: #fef2f2;
 }
 
+[data-theme="dark"] .pill.success {
+  color: #bbf7d0;
+  background: #14532d;
+}
+
+[data-theme="dark"] .pill.warning {
+  color: #fde68a;
+  background: #78350f;
+}
+
+[data-theme="dark"] .pill.danger {
+  color: #fca5a5;
+  background: #7f1d1d;
+}
+
 /* ── Chip ───────────────────────────────────────────── */
 
 .chip {
@@ -642,13 +628,6 @@ button.chip:hover {
   background: var(--wb-bg-hover);
 }
 
-.chip--active {
-  border-color: #94a3b8;
-  background: var(--wb-surface-muted);
-  color: #1e293b;
-  font-weight: 600;
-}
-
 /* ── GeneratingOverlay ──────────────────────────────── */
 
 .generating-overlay-wrap {
@@ -707,10 +686,6 @@ button.chip:hover {
   gap: 0.38rem;
 }
 
-.panel-scroll {
-  display: block;
-}
-
 .inline-row {
   display: flex;
   align-items: center;
@@ -864,15 +839,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);
@@ -939,13 +914,6 @@ button.chip:hover {
 
 /* ── Typography ─────────────────────────────────────── */
 
-.text-truncate {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-}
-
 .text-muted {
   color: var(--wb-text-muted);
 }
@@ -958,13 +926,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;
@@ -972,10 +940,6 @@ button.chip:hover {
   min-height: 2.1em;
 }
 
-.story-title {
-  font-size: 0.88rem;
-}
-
 .page-title {
   font-size: 1.1rem;
   font-weight: 600;
@@ -1038,28 +1002,11 @@ button.chip:hover {
 
 /* ── PickerGrid / PickerCard ────────────────────────── */
 
-.picker-search {
-  display: grid;
-  gap: var(--wb-gap-lg);
-}
-
 .picker-grid {
   display: grid;
   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 {
   width: 100%;
   border: 1px solid var(--wb-border);
@@ -1079,16 +1026,6 @@ button.chip:hover {
   cursor: default;
 }
 
-.picker-card-content {
-  min-width: 0;
-  align-content: start;
-}
-
-.picker-card-thumb {
-  width: 100%;
-  aspect-ratio: 1 / 1;
-}
-
 /* ── Skeleton ───────────────────────────────────────── */
 
 .skeleton {
@@ -1131,33 +1068,6 @@ button.chip:hover {
   border-radius: var(--wb-radius-sm);
 }
 
-.skeleton-btn--short {
-  width: 42%;
-}
-
-.skeleton-btn--back {
-  width: 36%;
-}
-
-.skeleton-btn--header-back {
-  width: 100%;
-}
-
-.skeleton-btn--tiny {
-  width: 78px;
-  height: 22px;
-}
-
-.skeleton-btn--story-action {
-  width: 82px;
-  height: 24px;
-  flex: 0 0 auto;
-}
-
-.skeleton-choice {
-  height: 36px;
-}
-
 .skeleton-chip {
   width: 58px;
   height: 16px;
@@ -1178,14 +1088,6 @@ button.chip:hover {
   margin-inline: auto;
 }
 
-.skeleton-header-title {
-  width: 86%;
-}
-
-.skeleton-header-title--short {
-  width: 58%;
-}
-
 .skeleton-line {
   width: 100%;
   height: 10px;
@@ -1216,51 +1118,12 @@ button.chip:hover {
   height: 1.9rem;
 }
 
-.skeleton-style-preview {
-  width: 100%;
-  max-width: none;
-  aspect-ratio: 1 / 1;
-}
-
 .skeleton-canvas {
   width: 100%;
   height: 100%;
   border-radius: 0;
 }
 
-.skeleton-field {
-  height: 32px;
-}
-
-.skeleton-coord {
-  height: 26px;
-}
-
-.skeleton-meta-line {
-  width: 92%;
-}
-
-.skeleton-meta-item {
-  width: 62px;
-  height: 10px;
-}
-
-.skeleton-meta-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: var(--wb-radius-pill);
-}
-
-.skeleton-meta-item--short {
-  width: 38px;
-  height: 10px;
-}
-
-.skeleton-page-tab-line {
-  width: 74%;
-  margin-inline: auto;
-}
-
 @keyframes skeleton-shimmer {
   100% {
     transform: translateX(100%);
@@ -1387,17 +1250,17 @@ button.chip:hover {
   min-width: 1.72rem;
   min-height: 1.72rem;
   padding: 0;
-  border: 1px solid color-mix(in srgb, #0f172a 14%, #ffffff);
+  border: 1px solid var(--wb-border);
   border-radius: var(--wb-radius-pill);
   color: var(--wb-text-primary);
-  background: color-mix(in srgb, #ffffff 88%, #dbe7f5);
-  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16);
+  background: color-mix(in srgb, var(--wb-surface) 88%, var(--wb-surface-muted));
+  box-shadow: var(--wb-shadow-soft);
   backdrop-filter: blur(5px);
   cursor: pointer;
 }
 
 .overlay-icon-btn:hover:not(:disabled) {
-  background: color-mix(in srgb, #ffffff 82%, #d5e4f4);
+  background: color-mix(in srgb, var(--wb-surface) 82%, var(--wb-surface-muted));
   transform: none;
 }
 
@@ -1405,17 +1268,6 @@ button.chip:hover {
   opacity: 0.55;
 }
 
-[data-theme="dark"] .overlay-icon-btn {
-  color: var(--wb-text-primary);
-  background: color-mix(in srgb, var(--wb-surface) 90%, var(--wb-surface-soft));
-  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
-  border-color: var(--wb-border);
-}
-
-[data-theme="dark"] .overlay-icon-btn:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--wb-surface-soft) 80%, var(--wb-surface));
-}
-
 .overlay-icon-btn--top-right {
   top: 0.5rem;
   right: 0.5rem;
@@ -1451,8 +1303,8 @@ 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;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@objectifthunes/whiteboard",
-  "version": "0.2.6",
+  "version": "0.3.0",
   "description": "Pan/zoom whiteboard canvas with draggable panels, minimap, snap-to-grid, and zoom controls",
   "license": "MIT",
   "type": "module",
@@ -20,12 +20,6 @@
   "sideEffects": [
     "*.css"
   ],
-  "scripts": {
-    "build": "vite build",
-    "dev": "vite build --watch",
-    "typecheck": "tsc --noEmit",
-    "prepack": "pnpm run build"
-  },
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
@@ -40,5 +34,10 @@
     "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"
   }
-}
+}