fix: tsup should pass process.env for prod

tldraw/apps/tldraw-logseq/src/components/StatusBar/StatusBar.tsx

@@ -7,6 +7,12 @@ import type { Shape } from '~lib'
 
 export const StatusBar = observer(function StatusBar() {
   const app = useApp<Shape>()
+  React.useEffect(() => {
+    const canvas = document.querySelector<HTMLElement>('.logseq-tldraw-wrapper .tl-canvas')
+    if (canvas) {
+      canvas.style.height = 'calc(100% - 32px)'
+    }
+  }, [])
   return (
     <div className="statusbar">
       {app.selectedTool.id} | {app.selectedTool.currentState.id}

tldraw/apps/tldraw-logseq/src/styles.css

@@ -16,6 +16,8 @@
   width: 100%;
   height: 100%;
   position: relative;
+  display: flex;
+  flex-direction: column;
 }
 
 .logseq-tldraw label {
@@ -79,6 +81,8 @@
   user-select: none;
   background: white;
   border-top: 1px solid black;
+  flex-shrink: 0;
+  height: 32px;
 }
 
 .logseq-tldraw .input {
@@ -136,7 +140,7 @@
   background-color: var(--color-panel);
   height: 32px;
   width: 32px;
-  border-radius: 50%;
+  border-radius: 4px;
   box-shadow: var(--shadow-medium);
   overflow: hidden;
 }
@@ -144,14 +148,14 @@
 .logseq-tldraw .primary-tools .floating-panel {
   display: flex;
   flex-flow: column;
-  border-radius: 128px;
+  border-radius: 8px;
   overflow: hidden;
   padding: 4px;
   gap: 4px;
 }
 
 .logseq-tldraw .floating-panel > button {
-  border-radius: 20px;
+  border-radius: 4px;
 }
 
 .logseq-tldraw .primary-tools .button {
@@ -358,7 +362,7 @@
   width: 400px;
   top: 16px;
   left: 16px;
-  position: fixed;
+  position: absolute;
   border: 1px solid black;
   background-color: #fff;
   pointer-events: all;
@@ -367,7 +371,7 @@
 .logseq-tldraw .preview-minimap-toggle {
   position: absolute;
   top: 24px;
-  left: 24px;
+  right: 40px;
   z-index: 1;
   width: 32px;
   height: 32px;

tldraw/apps/tldraw-logseq/tsup.config.ts

@@ -9,4 +9,7 @@ export default defineConfig({
   loader: {
     '.png': 'base64',
   },
+  env: {
+    NODE_ENV: 'production'
+  }
 })

tldraw/cljs-demo/public/styles.css

@@ -1,279 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
-
-:root {
-  --color-panel: #ffffff;
-  --color-text: #000000;
-  --color-hover: #00000011;
-  --color-selectedStroke: rgb(42, 123, 253);
-  --color-selectedFill: rgba(66, 133, 244);
-  --color-selectedContrast: #ffffff;
-  --shadow-medium: 0px 0px 16px -1px rgba(0, 0, 0, 0.05), 0px 0px 16px -8px rgba(0, 0, 0, 0.09),
-    0px 0px 16px -12px rgba(0, 0, 0, 0.2);
-}
-
-.logseq-tldraw-wrapper {
-  width: 100%;
-  height: 100%;
-  position: relative;
-}
-
-.logseq-tldraw label {
-  font-family: 'Inter', Arial, Helvetica, sans-serif;
-}
-
-.logseq-tldraw button {
-  font-size: 13px;
-  font-family: 'Inter', Arial, Helvetica, sans-serif;
-  background: none;
-  border: none;
-  cursor: pointer;
-  border-radius: 2px;
-  padding: 4px 8px;
-}
-
-.logseq-tldraw .toolbar {
-  position: absolute;
-  top: 0;
-  width: 100%;
-  grid-row: 1;
-  display: flex;
-  align-items: center;
-  padding: 8px;
-  color: black;
-  z-index: 100000;
-  user-select: none;
-  background: white;
-  border-bottom: 1px solid black;
-  font-size: inherit;
-}
-
-.logseq-tldraw .contextbar {
-  pointer-events: all;
-  position: relative;
-  background-color: var(--color-panel);
-  padding: 8px 12px;
-  border-radius: 8px;
-  white-space: nowrap;
-  display: flex;
-  gap: 4px;
-  align-items: center;
-  font-size: 14px;
-  will-change: transform, contents;
-  box-shadow: var(--shadow-medium);
-  z-index: 1000;
-}
-
-.logseq-tldraw .statusbar {
-  position: absolute;
-  bottom: 0;
-  grid-row: 3;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 8px;
-  color: black;
-  z-index: 100000;
-  user-select: none;
-  background: white;
-  border-top: 1px solid black;
-}
-
-.logseq-tldraw .input {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.logseq-tldraw .number-input {
-  width: 44px;
-  height: 24px;
-  padding: 2px;
-}
-
-.logseq-tldraw .color-input {
-  height: 24px;
-  padding: 0 2px;
-  background: none;
-  border-radius: 2px;
-}
-
-.logseq-tldraw .text-input {
-  height: 24px;
-  padding: 4px;
-  background: none;
-  border: 1px solid black;
-  border-radius: 2px;
-}
-
-.logseq-tldraw .input > label {
-  font-size: 10px;
-}
-
-.logseq-tldraw .primary-tools {
-  display: flex;
-  position: absolute;
-  bottom: 48px;
-  width: 100%;
-  height: 64px;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  gap: 8px;
-  z-index: 10000;
-}
-
-.logseq-tldraw .panel {
-  background-color: var(--color-panel);
-  box-shadow: var(--shadow-medium);
-  pointer-events: all;
-}
-
-.floating-button {
-  background-color: var(--color-panel);
-  height: 32px;
-  width: 32px;
-  border-radius: 50%;
-  box-shadow: var(--shadow-medium);
-  overflow: hidden;
-}
-
-.logseq-tldraw .primary-tools .floating-panel {
-  display: flex;
-  border-radius: 128px;
-  overflow: hidden;
-  padding: 4px;
-}
-
-.logseq-tldraw .floating-panel > :nth-child(1) {
-  border-top-left-radius: 20px;
-  border-bottom-left-radius: 20px;
-}
-
-.logseq-tldraw .floating-panel > :nth-last-child(1) {
-  border-top-right-radius: 20px;
-  border-bottom-right-radius: 20px;
-}
-
-.logseq-tldraw .primary-tools .button {
-  position: relative;
-  height: 40px;
-  width: 40px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 13px;
-  font-family: 'Inter', Arial, Helvetica, sans-serif;
-  background: none;
-  border: none;
-  cursor: pointer;
-}
-
-.logseq-tldraw .primary-tools .button:hover {
-  background-color: var(--color-hover);
-}
-
-.logseq-tldraw .primary-tools .button[data-selected='true'] {
-  background-color: var(--color-selectedFill);
-  color: var(--color-selectedContrast);
-}
-
-.logseq-tldraw .floating-panel[data-tool-locked='true'] > .button[data-selected='true']::after {
-  content: '';
-  display: block;
-  height: 6px;
-  width: 6px;
-  border: 2px solid var(--color-selectedContrast);
-  background-color: var(--color-selectedFill);
-  position: absolute;
-  bottom: -4px;
-  left: calc(50% - 5px);
-  border-radius: 100%;
-}
-
-.logseq-tldraw .text-shape-wrapper {
-  position: absolute;
-  white-space: pre-wrap;
-  overflow-wrap: break-word;
-  width: auto;
-  border: 1px solid transparent;
-  margin: 0px;
-  padding: 0px;
-  z-index: 9999;
-  user-select: none;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  min-height: 1;
-  min-width: 1;
-  line-height: 1;
-  outline: 0;
-  backface-visibility: hidden;
-  user-select: none;
-  pointer-events: all;
-  vertical-align: baseline;
-  -webkit-user-drag: none;
-  -webkit-user-select: none;
-  -webkit-touch-callout: none;
-}
-
-.logseq-tldraw .text-shape-content {
-  z-index: 1;
-  width: fit-content;
-  height: fit-content;
-  border: none;
-  resize: none;
-  margin: 0;
-  padding: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  font-variant: inherit;
-  text-align: inherit;
-  min-height: inherit;
-  min-width: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  outline: 0;
-  white-space: inherit;
-  overflow-wrap: inherit;
-  font-weight: inherit;
-  overflow: hidden;
-  backface-visibility: hidden;
-  display: inline-block;
-  user-select: none;
-  -webkit-user-select: none;
-}
-
-.logseq-tldraw .text-shape-content[data-isediting='true'] {
-  visibility: hidden;
-  pointer-events: none;
-}
-
-.logseq-tldraw .text-shape-input {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  border: none;
-  resize: none;
-  padding: inherit;
-  font-family: inherit;
-  font-size: inherit;
-  font-variant: inherit;
-  text-align: inherit;
-  min-height: inherit;
-  min-width: inherit;
-  line-height: inherit;
-  letter-spacing: inherit;
-  outline: 0;
-  white-space: inherit;
-  overflow-wrap: inherit;
-  font-weight: inherit;
-  overflow: hidden;
-  backface-visibility: hidden;
-  display: inline-block;
-  pointer-events: all;
-  user-select: text;
-  -webkit-user-select: text;
-}