@objectifthunes/whiteboard 0.2.3 → 0.2.5

package/dist/whiteboard.css

@@ -46,6 +46,9 @@
 
   --wb-shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.08);
   --wb-transition-fast: 120ms ease;
+
+  --wb-btn-text: #ffffff;
+  --wb-focus-shadow: rgba(147, 197, 253, 0.38);
 }
 
 /* ── Dark theme ──────────────────────────────────────── */
@@ -73,6 +76,9 @@
   --wb-focus-ring: #3b82f6;
   --wb-focus-border: #2563eb;
   --wb-shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.3);
+
+  --wb-btn-text: var(--wb-bg);
+  --wb-focus-shadow: rgba(59, 130, 246, 0.38);
 }
 
 /* ── Base element styles ─────────────────────────────── */
@@ -97,7 +103,7 @@ button {
   line-height: 1;
   font-weight: 500;
   white-space: nowrap;
-  color: var(--wb-surface-hover);
+  color: var(--wb-btn-text);
   background: var(--wb-primary);
   cursor: pointer;
   transition: background-color var(--wb-transition-fast), transform var(--wb-transition-fast);
@@ -121,9 +127,16 @@ select {
   padding: 0.45rem 0.56rem;
   font-size: var(--wb-fs-base);
   line-height: 1.3;
+  color: var(--wb-text);
   background: var(--wb-surface);
 }
 
+input::placeholder,
+textarea::placeholder {
+  color: var(--wb-text-muted);
+  opacity: 1;
+}
+
 textarea { min-height: 86px; resize: vertical; }
 
 input:focus,
@@ -131,7 +144,7 @@ textarea:focus,
 select:focus {
   outline: none;
   border-color: var(--wb-focus-border);
-  box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.38);
+  box-shadow: 0 0 0 3px var(--wb-focus-shadow);
 }
 
 /* ── Whiteboard Shell ────────────────────────────────── */
@@ -416,6 +429,12 @@ select:focus {
   cursor: pointer;
   transition: background-color var(--wb-transition-fast), border-color var(--wb-transition-fast);
   line-height: 1;
+  color: var(--wb-btn-text);
+  background: var(--wb-primary);
+}
+
+.wb-btn:hover:not(:disabled) {
+  background: var(--wb-primary-pressed);
 }
 
 .wb-btn:disabled {
@@ -1248,6 +1267,170 @@ button.chip:hover {
   }
 }
 
+/* ── VerticalToolbar ─────────────────────────────────── */
+
+.vertical-toolbar {
+  position: fixed;
+  top: 50%;
+  left: 0.72rem;
+  z-index: 1200;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--wb-gap-sm);
+  transform: translateY(-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);
+}
+
+.vertical-toolbar--right {
+  left: auto;
+  right: 0.72rem;
+}
+
+.vertical-toolbar--static {
+  position: static;
+  transform: none;
+}
+
+.vertical-toolbar__links {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--wb-gap-sm);
+}
+
+.vertical-toolbar__icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.08rem;
+  height: 2.08rem;
+  min-width: 2.08rem;
+  min-height: 2.08rem;
+  padding: 0;
+  border: 1px solid var(--wb-border);
+  border-radius: var(--wb-radius-md);
+  font-size: var(--wb-fs-base);
+  color: var(--wb-text-tertiary);
+  background: var(--wb-white);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.vertical-toolbar__icon-btn:hover:not([disabled]) {
+  background: var(--wb-bg-hover);
+  transform: none;
+}
+
+.vertical-toolbar__icon-btn.is-active {
+  color: var(--wb-btn-text);
+  border-color: var(--wb-primary);
+  background: var(--wb-primary);
+}
+
+/* ── AvatarBadge ─────────────────────────────────────── */
+
+.avatar-badge {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  width: 1.9rem;
+  height: 1.9rem;
+  border-radius: var(--wb-radius-pill);
+  font-size: var(--wb-fs-sm);
+  font-weight: 600;
+  color: var(--wb-text-primary);
+  background: var(--wb-border);
+}
+
+/* ── CanvasStage ─────────────────────────────────────── */
+
+.canvas-wrap {
+  width: 100%;
+  user-select: none;
+}
+
+.canvas-stage {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid var(--wb-border);
+  border-radius: var(--wb-radius-lg);
+  aspect-ratio: 16 / 9;
+  background: var(--wb-surface-muted);
+}
+
+.canvas-hint {
+  position: absolute;
+  left: 0.5rem;
+  bottom: 0.5rem;
+  margin: 0;
+  padding: 0.2rem 0.42rem;
+  border-radius: var(--wb-radius-sm);
+  font-size: var(--wb-fs-xs);
+  color: var(--wb-text-muted);
+  background: color-mix(in srgb, var(--wb-surface-soft) 88%, transparent);
+  pointer-events: none;
+}
+
+/* ── OverlayIconButton ───────────────────────────────── */
+
+.overlay-icon-btn {
+  position: absolute;
+  z-index: 3;
+  width: 1.72rem;
+  height: 1.72rem;
+  min-width: 1.72rem;
+  min-height: 1.72rem;
+  padding: 0;
+  border: 1px solid color-mix(in srgb, #0f172a 14%, #ffffff);
+  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);
+  backdrop-filter: blur(5px);
+  cursor: pointer;
+}
+
+.overlay-icon-btn:hover:not(:disabled) {
+  background: color-mix(in srgb, #ffffff 82%, #d5e4f4);
+  transform: none;
+}
+
+.overlay-icon-btn:disabled {
+  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;
+}
+
+.overlay-icon-btn--bottom-left {
+  bottom: 0.5rem;
+  left: 0.5rem;
+}
+
+.overlay-icon-btn--bottom-right {
+  bottom: 0.5rem;
+  right: 0.5rem;
+}
+
 /* ── Responsive ─────────────────────────────────────── */
 
 @media (max-width: 768px) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@objectifthunes/whiteboard",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "Pan/zoom whiteboard canvas with draggable panels, minimap, snap-to-grid, and zoom controls",
   "license": "MIT",
   "type": "module",