@scrawl-board/board 0.1.0-beta.7 → 0.1.0-beta.9

package/dist/styles.css

@@ -7,6 +7,7 @@
   --scrawl-color-text-muted: #62625c;
   --scrawl-color-edge: #d4d4cc;
   --scrawl-color-focus: #1856a3;
+  --scrawl-color-primary: #1856a3;
   --scrawl-color-selection: #d9e8f7;
   --scrawl-color-danger: #a3302b;
   --scrawl-color-warning: #805400;
@@ -102,9 +103,10 @@
 [data-scrawl-root] .scrawl-board__actions,
 [data-scrawl-root] .scrawl-board__tools,
 [data-scrawl-root] .scrawl-board__view,
+[data-scrawl-root] .scrawl-board__more-tools,
 [data-scrawl-root] .scrawl-board__style-shelf {
   align-items: center;
-  background: var(--scrawl-color-surface-raised);
+  background: var(--scrawl-color-surface);
   border: 1px solid color-mix(in srgb, var(--scrawl-color-surface-raised), var(--scrawl-color-text) 12%);
   border-radius: var(--scrawl-radius-panel);
   display: flex;
@@ -115,25 +117,45 @@
 }
 
 [data-scrawl-root] .scrawl-board__actions { inset-block-start: 12px; inset-inline-end: 12px; }
-[data-scrawl-root] .scrawl-board__tools { inset-block-end: 12px; inset-inline-start: 50%; max-inline-size: calc(100% - 24px); transform: translateX(-50%); }
+[data-scrawl-root] .scrawl-board__tools {
+  inset-block-start: 50%;
+  inset-inline-start: 12px;
+  inline-size: 54px;
+  max-block-size: calc(100% - 144px);
+  overflow-y: auto;
+  flex-direction: column;
+  transform: translateY(-50%);
+  box-shadow: var(--scrawl-elevation-low);
+}
+[data-scrawl-root] .scrawl-board__tools > button { flex: 0 0 44px; inline-size: 44px; }
+[data-scrawl-root] .scrawl-board__tools button,
+[data-scrawl-root] .scrawl-board__more-tools button { display: flex; align-items: center; justify-content: center; }
+[data-scrawl-root] .scrawl-board__tools svg,
+[data-scrawl-root] .scrawl-board__more-tools svg { display: block; inline-size: 22px; block-size: 22px; }
+[data-scrawl-root] .scrawl-board__tools .scrawl-board__ink-sample { margin: 0; }
+[data-scrawl-root] .scrawl-board__tools :focus-visible,
+[data-scrawl-root] .scrawl-board__more-tools :focus-visible,
+[data-scrawl-root] .scrawl-board__style-shelf :focus-visible { outline-offset: -3px; }
 [data-scrawl-root] .scrawl-board__view { inset-block-end: 12px; inset-inline-end: 12px; }
+[data-scrawl-root] .scrawl-board__more-tools,
 [data-scrawl-root] .scrawl-board__style-shelf {
-  gap: 12px;
-  inset-block-end: 68px;
-  inset-inline-start: 50%;
-  max-inline-size: calc(100% - 24px);
-  overflow-x: auto;
-  transform: translateX(-50%);
+  inset-inline-start: 78px;
+  inset-block-start: 72px;
+  inline-size: 106px;
+  max-block-size: calc(100% - 84px);
+  overflow-y: auto;
+  box-shadow: var(--scrawl-elevation-low);
 }
-/* `anchor` supplied (DefaultBoardChrome's own toolbar): follow the active
-   tool button's own position (set inline as left/top) instead of centring
-   over the whole toolbar — inset-block-end must yield explicitly, since an
-   inline `top` alongside a stylesheet `bottom` would otherwise stretch the
-   box rather than let `top` alone govern its position. */
-[data-scrawl-root] .scrawl-board__style-shelf[data-anchored="true"] {
-  inset-block-end: auto;
-  transform: translate(-50%, calc(-100% - 12px));
+[data-scrawl-root] .scrawl-board__more-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
+[data-scrawl-root] .scrawl-board__style-shelf .scrawl-board__style-group {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 4px;
+  inline-size: 100%;
+  white-space: normal;
 }
+[data-scrawl-root] .scrawl-board__style-shelf .scrawl-board__style-group > span { grid-column: 1 / -1; text-align: center; }
+[data-scrawl-root] .scrawl-board__style-shelf .scrawl-board__style-group button { padding: 4px; font-size: 12px; }
 [data-scrawl-root] .scrawl-board__style-group { align-items: center; display: flex; gap: 6px; white-space: nowrap; }
 [data-scrawl-root] .scrawl-board__style-group > span:first-child { color: var(--scrawl-color-text-muted); font-size: 0.75rem; font-weight: var(--scrawl-font-weight-strong); text-transform: uppercase; }
 [data-scrawl-root] .scrawl-board__style-group button { align-items: center; display: flex; justify-content: center; padding: 6px 10px; }
@@ -221,30 +243,6 @@
 [data-scrawl-root] [data-scrawl-default-ui] button:disabled,
 [data-scrawl-root] [data-scrawl-default-ui] select:disabled { color: var(--scrawl-color-text-muted); cursor: not-allowed; }
 
-[data-scrawl-root] .scrawl-board__tool-select {
-  align-items: center;
-  display: flex;
-  min-block-size: 44px;
-}
-
-[data-scrawl-root] .scrawl-board__tool-select > span { block-size: 1px; clip: rect(0, 0, 0, 0); inline-size: 1px; overflow: hidden; position: absolute; }
-[data-scrawl-root] .scrawl-board__tool-select select {
-  -webkit-appearance: none;
-  appearance: none;
-  /* Chevron drawn from two gradient triangles rather than an embedded asset
-     reference (disallowed by this stylesheet's policy, see styles.test.ts),
-     and currentColor keeps it Theme-aware where a bitmap/SVG asset would
-     need its own colour. */
-  background-image:
-    linear-gradient(45deg, transparent 50%, currentColor 50%),
-    linear-gradient(135deg, currentColor 50%, transparent 50%);
-  background-position: right 14px center, right 9px center;
-  background-repeat: no-repeat;
-  background-size: 5px 5px, 5px 5px;
-  min-block-size: 44px;
-  padding-inline: 8px 24px;
-}
-
 [data-scrawl-root] .scrawl-board__ink-sample,
 [data-scrawl-portal] .scrawl-board__ink-options span {
   border: 1px solid color-mix(in srgb, currentColor, transparent 72%);
@@ -334,14 +332,16 @@
 }
 [data-scrawl-portal] .scrawl-board__inline-editor-actions button { min-block-size: auto; min-inline-size: auto; padding: 2px 6px; }
 
-@media (max-width: 60rem) {
-  [data-scrawl-root] .scrawl-board__actions,
-  [data-scrawl-root] .scrawl-board__tools { inline-size: calc(100% - 24px); overflow-x: auto; }
-  [data-scrawl-root] .scrawl-board__actions { justify-content: flex-end; }
-  [data-scrawl-root] .scrawl-board__tools { flex-wrap: nowrap; inset-inline-start: 12px; transform: none; }
-  [data-scrawl-root] .scrawl-board__tools :focus-visible { outline-offset: -3px; }
-  [data-scrawl-root] .scrawl-board__view { inset-block-end: 84px; }
+[data-scrawl-portal] .scrawl-board__panel[aria-label="Ink style"] {
+  inset-inline-start: 78px;
+  inset-block-start: 72px;
+  inset-block-end: auto;
+  inline-size: 156px;
+  max-block-size: calc(100% - 84px);
+  transform: none;
 }
+[data-scrawl-portal] .scrawl-board__panel[aria-label="Ink style"] .scrawl-board__panel-heading { flex-direction: column; align-items: stretch; }
+[data-scrawl-portal] .scrawl-board__ink-options { grid-template-columns: 1fr; }
 
 [data-scrawl-root] .scrawl-board__status, [data-scrawl-portal] .scrawl-board__status {
   block-size: 1px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scrawl-board/board",
-  "version": "0.1.0-beta.7",
+  "version": "0.1.0-beta.9",
   "description": "The Scrawl Board SDK: an embeddable, collaborative infinite-canvas whiteboard for React and vanilla JS/TS apps.",
   "license": "Apache-2.0",
   "repository": {
@@ -41,6 +41,10 @@
       "types": "./dist/react.d.ts",
       "import": "./dist/react.js"
     },
+    "./local": {
+      "types": "./dist/local.d.ts",
+      "import": "./dist/local.js"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "scripts": {
@@ -51,11 +55,21 @@
     "sbom": "node ./scripts/generate-sbom.mjs",
     "size": "size-limit",
     "lint:pack": "publint . && attw --pack . --exclude-entrypoints ./styles.css --profile esm-only",
-    "api-report": "node ./scripts/generate-api-docs.mjs"
+    "api-report": "node ./scripts/generate-api-docs.mjs",
+    "bench": "vitest bench run src/performance.bench.ts"
+  },
+  "dependencies": {
+    "troika-three-text": "^0.52.4"
   },
   "peerDependencies": {
     "react": ">=18 <20",
-    "react-dom": ">=18 <20"
+    "react-dom": ">=18 <20",
+    "three": ">=0.170.0"
+  },
+  "peerDependenciesMeta": {
+    "react": { "optional": true },
+    "react-dom": { "optional": true },
+    "three": { "optional": true }
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.18.5",