@tldraw/tldraw 4.3.0 → 4.4.0-canary.0791272556f5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -6,7 +6,7 @@ This package is kept around for legacy purposes. It just tracks the normal `tldr
6
6
 
7
7
  This project is part of the tldraw SDK. It is provided under the [tldraw SDK license](https://github.com/tldraw/tldraw/blob/main/LICENSE.md).
8
8
 
9
- You can use the tldraw SDK in commercial or non-commercial projects so long as you preserve the "Made with tldraw" watermark on the canvas. To remove the watermark, you can purchase a [business license](https://tldraw.dev#pricing). Visit [tldraw.dev](https://tldraw.dev) to learn more.
9
+ You can use the tldraw SDK in commercial or non-commercial projects so long as you preserve the "Made with tldraw" watermark on the canvas. To remove the watermark, you can purchase a [business license](https://tldraw.dev/pricing). Visit [tldraw.dev](https://tldraw.dev) to learn more.
10
10
 
11
11
  ## Trademarks
12
12
 
package/dist-cjs/index.js CHANGED
@@ -19,7 +19,7 @@ var import_tldraw = require("tldraw");
19
19
  __reExport(index_exports, require("tldraw"), module.exports);
20
20
  (0, import_tldraw.registerTldrawLibraryVersion)(
21
21
  "@tldraw/tldraw",
22
- "4.3.0",
22
+ "4.4.0-canary.0791272556f5",
23
23
  "cjs"
24
24
  );
25
25
  //# sourceMappingURL=index.js.map
@@ -2,7 +2,7 @@ import { registerTldrawLibraryVersion } from "tldraw";
2
2
  export * from "tldraw";
3
3
  registerTldrawLibraryVersion(
4
4
  "@tldraw/tldraw",
5
- "4.3.0",
5
+ "4.4.0-canary.0791272556f5",
6
6
  "esm"
7
7
  );
8
8
  //# sourceMappingURL=index.mjs.map
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tldraw/tldraw",
3
3
  "description": "A tiny little drawing editor.",
4
- "version": "4.3.0",
4
+ "version": "4.4.0-canary.0791272556f5",
5
5
  "author": {
6
6
  "name": "tldraw Inc.",
7
7
  "email": "hello@tldraw.com"
@@ -48,7 +48,7 @@
48
48
  "src"
49
49
  ],
50
50
  "dependencies": {
51
- "tldraw": "4.3.0"
51
+ "tldraw": "4.4.0-canary.0791272556f5"
52
52
  },
53
53
  "peerDependencies": {
54
54
  "react": "^18.2.0 || ^19.2.1",
package/tldraw.css CHANGED
@@ -64,6 +64,7 @@
64
64
 
65
65
  /* Misc */
66
66
  --tl-zoom: 1;
67
+ --tl-tab-size: 2;
67
68
 
68
69
  /* Cursor SVGs */
69
70
  --tl-cursor-none: none;
@@ -899,6 +900,10 @@ input,
899
900
  /* white-space: break-spaces; */
900
901
  }
901
902
 
903
+ .tl-rich-text {
904
+ tab-size: var(--tl-tab-size, 2);
905
+ }
906
+
902
907
  .tl-rich-text p {
903
908
  margin: 0;
904
909
  /* Depending on the extensions, <p> tags can be empty, without a <br />. */
@@ -1166,6 +1171,12 @@ input,
1166
1171
  contain: size layout;
1167
1172
  }
1168
1173
 
1174
+ .tl-canvas-indicators {
1175
+ position: absolute;
1176
+ inset: 0;
1177
+ pointer-events: none;
1178
+ }
1179
+
1169
1180
  /* ---------------------- Shape --------------------- */
1170
1181
 
1171
1182
  .tl-shape {
@@ -1540,15 +1551,6 @@ input,
1540
1551
  cursor: var(--tl-cursor-text);
1541
1552
  }
1542
1553
 
1543
- /* If mobile use 16px as font size */
1544
- /* On iOS, font size under 16px in an input will make the page zoom into the input 🤦‍♂️ */
1545
- /* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */
1546
- @media (max-width: 600px) {
1547
- .tl-frame-heading {
1548
- font-size: 16px;
1549
- }
1550
- }
1551
-
1552
1554
  /* ------------------- Embed Shape ------------------ */
1553
1555
 
1554
1556
  .tl-embed {
@@ -1840,13 +1842,15 @@ it from receiving any pointer events or affecting the cursor. */
1840
1842
  z-index: 0;
1841
1843
  }
1842
1844
 
1843
- .tlui-button:disabled {
1845
+ .tlui-button:disabled,
1846
+ .tlui-button[data-disabled] {
1844
1847
  color: var(--tl-color-text-3);
1845
1848
  text-shadow: none;
1846
1849
  cursor: default;
1847
1850
  }
1848
1851
 
1849
- .tlui-button:disabled .tlui-kbd {
1852
+ .tlui-button:disabled .tlui-kbd,
1853
+ .tlui-button[data-disabled] .tlui-kbd {
1850
1854
  color: var(--tl-color-text-3);
1851
1855
  }
1852
1856
 
@@ -1895,7 +1899,7 @@ it from receiving any pointer events or affecting the cursor. */
1895
1899
  }
1896
1900
 
1897
1901
  .tlui-button[data-isactive='true']::after,
1898
- .tlui-button[data-isactive='true']:not(:disabled, :focus-visible):active:after {
1902
+ .tlui-button[data-isactive='true']:not(:disabled, [data-disabled], :focus-visible):active:after {
1899
1903
  background: var(--tl-color-hint);
1900
1904
  opacity: 1;
1901
1905
  }
@@ -1911,11 +1915,11 @@ it from receiving any pointer events or affecting the cursor. */
1911
1915
  opacity: 1;
1912
1916
  }
1913
1917
 
1914
- .tlui-button:not(:disabled):hover {
1918
+ .tlui-button:not(:disabled, [data-disabled]):hover {
1915
1919
  z-index: 1;
1916
1920
  }
1917
1921
 
1918
- .tlui-button:not(:disabled):hover::after {
1922
+ .tlui-button:not(:disabled, [data-disabled]):hover::after {
1919
1923
  opacity: 1;
1920
1924
  }
1921
1925
  }
@@ -1954,11 +1958,11 @@ it from receiving any pointer events or affecting the cursor. */
1954
1958
  }
1955
1959
 
1956
1960
  @media (hover: hover) {
1957
- .tlui-button__primary:not(:disabled, :focus-visible):hover {
1961
+ .tlui-button__primary:not(:disabled, [data-disabled], :focus-visible):hover {
1958
1962
  color: var(--tl-color-primary);
1959
1963
  }
1960
1964
 
1961
- .tlui-button__danger:not(:disabled, :focus-visible):hover {
1965
+ .tlui-button__danger:not(:disabled, [data-disabled], :focus-visible):hover {
1962
1966
  color: var(--tl-color-danger);
1963
1967
  text-shadow: none;
1964
1968
  }
@@ -2046,11 +2050,11 @@ it from receiving any pointer events or affecting the cursor. */
2046
2050
  color: var(--tl-color-selected-contrast);
2047
2051
  }
2048
2052
 
2049
- .tlui-button__tool[aria-pressed='true']:not(:disabled, :focus-visible):active {
2053
+ .tlui-button__tool[aria-pressed='true']:not(:disabled, [data-disabled], :focus-visible):active {
2050
2054
  color: var(--tl-color-selected-contrast);
2051
2055
  }
2052
2056
 
2053
- .tlui-button__tool[aria-pressed='true']:not(:disabled)::after {
2057
+ .tlui-button__tool[aria-pressed='true']:not(:disabled, [data-disabled])::after {
2054
2058
  background: var(--tl-color-selected);
2055
2059
  opacity: 1;
2056
2060
  }
@@ -2324,6 +2328,52 @@ it from receiving any pointer events or affecting the cursor. */
2324
2328
  }
2325
2329
  }
2326
2330
 
2331
+ /* --------------------- Select --------------------- */
2332
+
2333
+ /* Trigger extends .tlui-button with space-between layout */
2334
+ .tlui-select__trigger {
2335
+ justify-content: space-between;
2336
+ gap: var(--tl-space-3);
2337
+ }
2338
+
2339
+ .tlui-select__trigger[data-state='open']::after {
2340
+ opacity: 1;
2341
+ }
2342
+
2343
+ .tlui-select__value {
2344
+ display: flex;
2345
+ align-items: center;
2346
+ gap: var(--tl-space-2);
2347
+ }
2348
+
2349
+ .tlui-select__chevron {
2350
+ flex-shrink: 0;
2351
+ color: var(--tl-color-text-2);
2352
+ }
2353
+
2354
+ /* Content extends .tlui-menu with Radix-aware sizing */
2355
+ .tlui-select__content {
2356
+ min-width: var(--radix-select-trigger-width);
2357
+ max-height: var(--radix-select-content-available-height);
2358
+ }
2359
+
2360
+ .tlui-select__viewport {
2361
+ padding: 4px 0;
2362
+ }
2363
+
2364
+ /* Item extends .tlui-button__checkbox with left-aligned text */
2365
+ .tlui-select__item {
2366
+ justify-content: flex-start;
2367
+ }
2368
+
2369
+ .tlui-select__item-indicator {
2370
+ visibility: hidden;
2371
+ }
2372
+
2373
+ .tlui-select__item[data-state='checked'] .tlui-select__item-indicator {
2374
+ visibility: visible;
2375
+ }
2376
+
2327
2377
  /* ----------------------- Kbd ---------------------- */
2328
2378
 
2329
2379
  .tlui-kbd {
@@ -3529,6 +3579,12 @@ tldraw? probably.
3529
3579
 
3530
3580
  /* Terrible fix to allow firefox users to scroll the dialog */
3531
3581
  overflow-x: auto;
3582
+
3583
+ scrollbar-width: none;
3584
+ }
3585
+
3586
+ .tlui-shortcuts-dialog__body::-webkit-scrollbar {
3587
+ display: none;
3532
3588
  }
3533
3589
 
3534
3590
  .tlui-shortcuts-dialog__body__tablet {