Merge branch 'feat/db' into perf/lazy-load-data

.clj-kondo/config.edn

@@ -89,6 +89,7 @@
              frontend.handler.file-based.page-property file-page-property
              frontend.handler.file-based.property.util property-util
              frontend.handler.file-based.recent file-recent-handler
+             frontend.handler.file-based.repo file-repo-handler
              frontend.handler.plugin plugin-handler
              frontend.handler.plugin-config plugin-config-handler
              frontend.handler.property.file property-file

CODE_OF_CONDUCT.md

@@ -63,7 +63,7 @@ a project may be further defined and clarified by project maintainers.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by by contacting the moderators on the [Forum](https://discuss.logseq.com), [Discord](https://discord.gg/KpN4eHY) channel, Tienson Qin (@tiensonqin) on GitHub, or the official [Twitter](https://twitter.com/logseq). We will work with you to resolve the issue promptly. All
+reported by contacting the moderators on the [Forum](https://discuss.logseq.com), [Discord](https://discord.gg/KpN4eHY) channel, Tienson Qin (@tiensonqin) on GitHub, or the official [Twitter](https://twitter.com/logseq). We will work with you to resolve the issue promptly. All
 complaints will be reviewed and investigated and will result in a response that
 is deemed necessary and appropriate to the circumstances. The Logseq team
 will maintain confidentiality with regard to the reporter of an incident.

CONTRIBUTING.md

@@ -22,7 +22,7 @@ Please read and follow our [Code of Conduct][coc].
 
 There are many ways you can help. Here are some ways to help without coding:
 
-- You can be help others on [Discord][discord] or [Reddit](https://www.reddit.com/r/logseq).
+- You can help others on [Discord][discord] or [Reddit](https://www.reddit.com/r/logseq).
 - You can [contribute to the official docs](https://github.com/logseq/docs/blob/master/CONTRIBUTING.md).
 - You can confirm bugs on the [issue tracker][issue-tracker] and mention reproducible steps. It helps the core team to get more reports so we can fix the highest priority bugs.
 - You can contribute [translations][translations] with a [pull request](#submit-pr).
@@ -40,7 +40,7 @@ tasks. We also have a project board to keep track of community contributions
 [Logseq - Develop Together
 💪](https://github.com/orgs/logseq/projects/5?query=is%3Aopen+sort%3Aupdated-desc).
 Another way to help with coding is by extending Logseq with
-[plugins](https://docs.logseq.com/#/page/Plugins) and submit them to the [marketplace](https://github.com/logseq/marketplace) so that the
+[plugins](https://docs.logseq.com/#/page/Plugins) and submitting them to the [marketplace](https://github.com/logseq/marketplace) so that the
 whole community can benefit.
 
 ## <a name="question"></a> Got a Question or a Problem?
@@ -91,7 +91,7 @@ The template will ask you to include the following with each issue:
 
 Before working on your pull request, please check the following:
 
-1. Search [GitHub][search-pr] for related PRs that may effect your submission.
+1. Search [GitHub][search-pr] for related PRs that may affect your submission.
 
 2. Be sure that an issue describes the problem you're fixing or the feature
 behavior and design you'd like to add.
@@ -101,7 +101,7 @@ code without a signed CLA.
 
 After doing the above, you are ready to work on your PR! To create a PR, fork
 this repository and then create a branch for the fix. Once you push your code to
-your fork, you'll be able to open a PR to the Logseq repository. For more info
+your fork, you'll be able to open a PR to the Logseq repository. For more info,
 you can follow this [GitHub
 guide](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request-from-a-fork).
 For more github PR guides, see [these
@@ -111,7 +111,7 @@ guides](https://docs.github.com/en/pull-requests).
 
 When submitting a Pull Request (PR) or expecting a subsequent review, please follow these guidelines:
 
-1. The PR is ready for review. If you you have work you know how to do, then please keep your changes local until they are ready. If you need help with your PR, feel free to submit with questions.
+1. The PR is ready for review. If you have work you know how to do, then please keep your changes local until they are ready. If you need help with your PR, feel free to submit with questions.
 
 2. The PR checks which include tests and [lint checks](https://github.com/logseq/logseq/blob/master/docs/dev-practices.md#linting) are passing.
 
@@ -119,7 +119,7 @@ When submitting a Pull Request (PR) or expecting a subsequent review, please fol
 
 4. The PR has [test(s)](https://github.com/logseq/logseq/blob/master/docs/dev-practices.md#testing) for features or enhancements. Tests for bug fixes are also appreciated as they help prevent regressions.
 
-5. The PR has a descriptive title that a user can understand. We use these titles to generate changelogs for the user. Most titles use one these prefixes to categorize the PR e.g. `PREFIX: DESCRIPTION ...`:
+5. The PR has a descriptive title that a user can understand. We use these titles to generate changelogs for the user. Most titles use one of these prefixes to categorize the PR e.g. `PREFIX: DESCRIPTION ...`:
    * `chore` - Misc changes that aren't dev, feat or fix
    * `dev` - Developer related changes
    * `enhance` - Enhancements i.e. changes to existing features
@@ -132,12 +132,12 @@ When submitting a Pull Request (PR) or expecting a subsequent review, please fol
 7. The PR avoids the following changes that are not helpful to the core team:
    * Unrelated refactoring or heavy refactoring
    * Code or doc formatting changes including whitespace changes
-   * Dependency updates e.g. in package.json
+   * Dependency updates e.g. in `package.json`
    * Changes that contain multiple unverified resources. This is risky for our users and is a lot of work to verify. A change with one resource that can be verified is acceptable.
 
 ### PR Additional Links
 
-* To run Logseq locally, see [this doc](https://github.com/logseq/logseq/blob/master/docs/develop-logseq.md) or [this doc for windows](https://github.com/logseq/logseq/blob/master/docs/develop-logseq-on-windows.md).
+* To run Logseq locally, see [this doc](https://github.com/logseq/logseq/blob/master/docs/develop-logseq.md) or [this doc for Windows](https://github.com/logseq/logseq/blob/master/docs/develop-logseq-on-windows.md).
 * To contribute to translations, please read our [translation contribution guidelines][translations].
 * See [our development practices doc](https://github.com/logseq/logseq/blob/master/docs/dev-practices.md) to learn how we develop.
 * See [the overview doc](CODEBASE_OVERVIEW.md) to get an overview of the codebase.
@@ -150,7 +150,7 @@ changes to be accepted, the CLA must be signed. It's a quick process, we promise
 - For individuals, we have a [simple click-through form][individual-cla].
 - For corporations, please contact us.
 
-If you have more than one GitHub accounts or multiple email addresses associated with a single GitHub account, you must sign the CLA using the primary email address of the GitHub account used to author Git commits and send pull requests.
+If you have more than one GitHub account or multiple email addresses associated with a single GitHub account, you must sign the CLA using the primary email address of the GitHub account used to author Git commits and send pull requests.
 
 The following documents can help you sort out issues with GitHub accounts and multiple email addresses:
 

deps/graph-parser/src/logseq/graph_parser.cljs

@@ -8,7 +8,8 @@
             [logseq.graph-parser.extract :as extract]
             [logseq.common.util :as common-util]
             [logseq.common.config :as common-config]
-            [logseq.db :as ldb]))
+            [logseq.db :as ldb]
+            [logseq.db.frontend.content :as db-content]))
 
 (defn- retract-blocks-tx
   [blocks retain-uuids]
@@ -141,8 +142,10 @@ Options available:
             (fn [tags]
               (mapv #(-> %
                          add-missing-timestamps
+                         ;; don't use build-new-class b/c of timestamps
                          (merge {:block/journal? false
                                  :block/format :markdown
+                                 :block/type "class"
                                  :block/uuid (d/squuid)}))
                     tags)))
     block))
@@ -178,6 +181,13 @@ Options available:
                                                k)))
                               (remove-keys keyword?)))))))
         update-block-with-invalid-tags
+        ((fn [block']
+           (if (seq (:block/tags block'))
+             (update block :block/content
+                     db-content/content-without-tags
+                     (map :block/original-name (:block/tags block')))
+             block)))
+
         ((fn [block']
            (if (seq (:block/refs block'))
              (update block' :block/refs
@@ -199,9 +209,7 @@ Options available:
 
 (defn import-file-to-db-graph
   "Parse file and save parsed data to the given db graph."
-  [conn file content {:keys [delete-blocks-fn extract-options skip-db-transact?]
-                      :or {delete-blocks-fn (constantly [])
-                           skip-db-transact? false}
+  [conn file content {:keys [extract-options]
                       :as options}]
   (let [format (common-util/get-format file)
         {:keys [tx ast]}
@@ -222,11 +230,11 @@ Options available:
                     (common-config/whiteboard? file)
                     (extract/extract-whiteboard-edn file content extract-options')
 
-                    :else nil)
+                    :else
+                    (println "Skipped file since its format is not supported:" file))
               ;; remove file path relative
               pages (map #(dissoc % :block/file :block/properties) pages)
               block-ids (map (fn [block] {:block/uuid (:block/uuid block)}) blocks)
-              delete-blocks (delete-blocks-fn @conn (first pages) file block-ids)
               block-refs-ids (->> (mapcat :block/refs blocks)
                                   (filter (fn [ref] (and (vector? ref)
                                                          (= :block/uuid (first ref)))))
@@ -262,12 +270,10 @@ Options available:
               blocks (map #(update-imported-block conn %) blocks)
               pages-index (map #(select-keys % [:block/name]) pages)]
 
-          {:tx (concat refs whiteboard-pages pages-index delete-blocks pages block-ids blocks)
+          {:tx (concat refs whiteboard-pages pages-index pages block-ids blocks)
            :ast ast})
         tx' (common-util/fast-remove-nils tx)
-        result (if skip-db-transact?
-                 tx'
-                 (d/transact! conn tx' (select-keys options [:new-graph? :from-disk?])))]
+        result (d/transact! conn tx' (select-keys options [:new-graph? :from-disk?]))]
     {:tx-report result
      :ast ast}))
 

fastlane/metadata/android/en-US/full_description.txt

@@ -0,0 +1,5 @@
+Logseq is a knowledge management and collaboration platform. It focuses on privacy, longevity, and user control. Logseq offers a range of powerful tools for knowledge management, collaboration, PDF annotation, and task management with support for multiple file formats, including Markdown and Org-mode, and various features for organizing and structuring your notes.
+
+Logseq's Whiteboard feature lets you organize your knowledge and ideas using a spatial canvas with shapes, drawings, website embeds, and connectors. You can visually group and link your notes and external media (such as videos and images), enabling visual thinkers to compose, remix, annotate, and connect content from their knowledge base and emerging thoughts in a new way.
+
+In addition to its core features, Logseq has a growing ecosystem of plugins and themes that enable a wide range of workflows and customization options. Mobile apps are also available, providing access to most of the features of the desktop application. Whether you're a student, a professional, or anyone who values a clear and organized approach to managing your ideas and notes, Logseq is an excellent choice for anyone looking to improve their productivity and streamline their workflow.

fastlane/metadata/android/en-US/short_description.txt

@@ -0,0 +1 @@
+A privacy-first, open-source platform for knowledge management and collaboration

gulpfile.js

@@ -65,6 +65,7 @@ const common = {
         'node_modules/@highlightjs/cdn-assets/highlight.min.js',
         'node_modules/@isomorphic-git/lightning-fs/dist/lightning-fs.min.js',
         'packages/amplify/dist/amplify.js',
+        'packages/ui/dist/ui.js',
         'node_modules/@logseq/sqlite-wasm/sqlite-wasm/jswasm/sqlite3.wasm',
       ]).pipe(gulp.dest(path.join(outputPath, 'js'))),
       () => gulp.src([

ios/App/App.xcodeproj/project.pbxproj

@@ -519,7 +519,7 @@
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 0.10.5;
+				MARKETING_VERSION = 0.10.6;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = com.logseq.logseq;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -546,7 +546,7 @@
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				MARKETING_VERSION = 0.10.5;
+				MARKETING_VERSION = 0.10.6;
 				PRODUCT_BUNDLE_IDENTIFIER = com.logseq.logseq;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";
@@ -571,7 +571,7 @@
 				INFOPLIST_KEY_NSHumanReadableCopyright = "";
 				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @executable_path/../../Frameworks";
-				MARKETING_VERSION = 0.10.5;
+				MARKETING_VERSION = 0.10.6;
 				MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = com.logseq.logseq.ShareViewController;
@@ -598,7 +598,7 @@
 				INFOPLIST_KEY_NSHumanReadableCopyright = "";
 				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @executable_path/../../Frameworks";
-				MARKETING_VERSION = 0.10.5;
+				MARKETING_VERSION = 0.10.6;
 				MTL_FAST_MATH = YES;
 				PRODUCT_BUNDLE_IDENTIFIER = com.logseq.logseq.ShareViewController;
 				PRODUCT_NAME = "$(TARGET_NAME)";

package.json

@@ -74,9 +74,10 @@
         "cljs:lint": "clojure -M:clj-kondo --parallel --lint src --cache false",
         "ios:dev": "cross-env PLATFORM=ios gulp cap",
         "android:dev": "cross-env PLATFORM=android gulp cap",
-        "tldraw:build": "yarn --cwd tldraw install",
+        "tldraw:build": "yarn --cwd packages/tldraw install",
         "amplify:build": "yarn --cwd packages/amplify install",
-        "postinstall": "yarn tldraw:build && yarn amplify:build "
+        "ui:build": "yarn --cwd packages/ui install",
+        "postinstall": "yarn tldraw:build && yarn amplify:build && yarn ui:build"
     },
     "dependencies": {
         "@capacitor/android": "^5.0.0",

tldraw/apps/tldraw-logseq/build.mjs → packages/tldraw/apps/tldraw-logseq/build.mjs

@@ -23,7 +23,7 @@ Object.assign(glob, {
 
 fs.writeFileSync('dist/package.json', JSON.stringify(glob, null, 2))
 
-const dest = path.join(__dirname, '/../../../src/main/frontend/tldraw-logseq.js')
+const dest = path.join(__dirname, '/../../../../src/main/frontend/tldraw-logseq.js')
 
 if (fs.existsSync(dest)) fs.unlinkSync(dest)
 fs.linkSync(path.join(__dirname, '/dist/index.js'), dest)

tldraw/apps/tldraw-logseq/package.json → packages/tldraw/apps/tldraw-logseq/package.json

@@ -11,15 +11,6 @@
   },
   "devDependencies": {
     "@radix-ui/react-context-menu": "^2.1.0",
-    "@radix-ui/react-dropdown-menu": "^2.0.1",
-    "@radix-ui/react-popover": "^1.0.0",
-    "@radix-ui/react-select": "^1.2.1",
-    "@radix-ui/react-separator": "^1.0.1",
-    "@radix-ui/react-slider": "^1.1.0",
-    "@radix-ui/react-switch": "^1.0.1",
-    "@radix-ui/react-toggle": "^1.0.1",
-    "@radix-ui/react-toggle-group": "^1.0.1",
-    "@radix-ui/react-tooltip": "^1.0.2",
     "@tldraw/core": "2.0.0-alpha.1",
     "@tldraw/react": "2.0.0-alpha.1",
     "@tldraw/vec": "2.0.0-alpha.1",
@@ -34,6 +25,7 @@
     "perfect-freehand": "^1.2.0",
     "polished": "^4.0.0",
     "postcss": "^8.4.19",
+    "lucide-react": "^0.292.0",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-virtuoso": "^3.1.3",

tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx → packages/tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx

@@ -8,9 +8,11 @@ import { TablerIcon } from '../icons'
 import { Button } from '../Button'
 import { ToggleInput } from '../inputs/ToggleInput'
 import { ZoomMenu } from '../ZoomMenu'
-import * as Separator from '@radix-ui/react-separator'
 import { LogseqContext } from '../../lib/logseq-context'
 
+// @ts-ignore
+const LSUI = window.LSUI
+
 export const ActionBar = observer(function ActionBar(): JSX.Element {
   const app = useApp<Shape>()
   const {
@@ -65,7 +67,7 @@ export const ActionBar = observer(function ActionBar(): JSX.Element {
         <Button tooltip={t('whiteboard/zoom-out')} onClick={zoomOut} id="tl-zoom-out">
           <TablerIcon name="minus" />
         </Button>
-        <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
+        <LSUI.Separator orientation="vertical" />
         <ZoomMenu />
       </div>
 

tldraw/apps/tldraw-logseq/src/components/ContextBar/ContextBar.tsx → packages/tldraw/apps/tldraw-logseq/src/components/ContextBar/ContextBar.tsx

@@ -1,4 +1,3 @@
-import * as Separator from '@radix-ui/react-separator'
 import {
   getContextBarTranslation,
   HTMLContainer,
@@ -11,6 +10,9 @@ import * as React from 'react'
 import type { Shape } from '../../lib'
 import { getContextBarActionsForShapes } from './contextBarActionFactory'
 
+// @ts-ignore
+const LSUI = window.LSUI
+
 const _ContextBar: TLContextBarComponent<Shape> = ({ shapes, offsets, hidden }) => {
   const app = useApp()
   const rSize = React.useRef<[number, number] | null>(null)
@@ -52,7 +54,7 @@ const _ContextBar: TLContextBarComponent<Shape> = ({ shapes, offsets, hidden })
             <React.Fragment key={idx}>
               <Action />
               {idx < Actions.length - 1 && (
-                <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
+                <LSUI.Separator orientation="vertical" />
               )}
             </React.Fragment>
           ))}

tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx → packages/tldraw/apps/tldraw-logseq/src/components/ContextMenu/ContextMenu.tsx

@@ -8,9 +8,11 @@ import { KeyboardShortcut } from '../KeyboardShortcut'
 import * as React from 'react'
 
 import * as ReactContextMenu from '@radix-ui/react-context-menu'
-import * as Separator from '@radix-ui/react-separator'
 import { toJS } from 'mobx'
 
+// @ts-ignore
+const LSUI = window.LSUI
+
 interface ContextMenuProps {
   children: React.ReactNode
   collisionRef: React.RefObject<HTMLDivElement>
@@ -82,7 +84,7 @@ export const ContextMenu = observer(function ContextMenu({
                     >
                       <TablerIcon name="layout-align-right" />
                     </Button>
-                    <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
+                    <LSUI.Separator orientation="vertical" />
                     <Button
                       tooltip={t('whiteboard/distribute-horizontally')}
                       onClick={() =>
@@ -111,7 +113,7 @@ export const ContextMenu = observer(function ContextMenu({
                     >
                       <TablerIcon name="layout-align-bottom" />
                     </Button>
-                    <Separator.Root className="tl-toolbar-separator" orientation="vertical" />
+                    <LSUI.Separator orientation="vertical" />
                     <Button
                       tooltip={t('whiteboard/distribute-vertically')}
                       onClick={() =>
@@ -202,11 +204,7 @@ export const ContextMenu = observer(function ContextMenu({
             >
               <TablerIcon className="tl-menu-icon" name="clipboard" />
               {t('whiteboard/paste')}
-              <div className="tl-menu-right-slot">
-                <span className="keyboard-shortcut">
-                  <code>{MOD_KEY}+v</code>
-                </span>
-              </div>
+              <KeyboardShortcut sequence={MOD_KEY+"+v"} />
             </ReactContextMenu.Item>
           )}
           {app.selectedShapes?.size === 1 && !app.readOnly && (
@@ -215,11 +213,7 @@ export const ContextMenu = observer(function ContextMenu({
               onClick={() => runAndTransition(() => app.paste(undefined, true))}
             >
               {t('whiteboard/paste-as-link')}
-              <div className="tl-menu-right-slot">
-                <span className="keyboard-shortcut">
-                  <code>{MOD_KEY}+⇧+v</code>
-                </span>
-              </div>
+              <KeyboardShortcut sequence={MOD_KEY+"+⇧+v"} />
             </ReactContextMenu.Item>
           )}
           {app.selectedShapes?.size > 0 && (

tldraw/apps/tldraw-logseq/src/components/GeometryTools/GeometryTools.tsx → packages/tldraw/apps/tldraw-logseq/src/components/GeometryTools/GeometryTools.tsx

@@ -1,11 +1,13 @@
 import { observer } from 'mobx-react-lite'
 import type { Side } from '@radix-ui/react-popper'
 import { ToolButton } from '../ToolButton'
-import * as Popover from '@radix-ui/react-popover'
 import { TablerIcon } from '../icons'
 import React from 'react'
 import { LogseqContext } from '../../lib/logseq-context'
 
+// @ts-ignore
+const LSUI = window.LSUI
+
 interface GeometryToolsProps extends React.HTMLAttributes<HTMLElement> {
   popoverSide?: Side
   activeGeometry?: string
@@ -51,8 +53,8 @@ export const GeometryTools = observer(function GeometryTools({
   const activeTool = activeGeometry ? geometries.find(geo => geo.id === activeGeometry) : shapes
 
   return (
-    <Popover.Root>
-      <Popover.Trigger asChild>
+    <LSUI.Popover>
+      <LSUI.PopoverTrigger asChild>
         <div {...rest} className="tl-geometry-tools-pane-anchor">
           <ToolButton {...activeTool} tooltipSide={popoverSide} />
           {chevron && (
@@ -63,9 +65,13 @@ export const GeometryTools = observer(function GeometryTools({
             />
           )}
         </div>
-      </Popover.Trigger>
+      </LSUI.PopoverTrigger>
 
-      <Popover.Content className="tl-popover-content" side={popoverSide} sideOffset={15}>
+      <LSUI.PopoverContent
+        className="p-0 w-auto"
+        side={popoverSide}
+        sideOffset={15}
+        collisionBoundary={document.querySelector('.logseq-tldraw')}>
         <div
           className={`tl-toolbar tl-geometry-toolbar ${
             ['left', 'right'].includes(popoverSide) ? 'flex-col' : 'flex-row'
@@ -76,15 +82,12 @@ export const GeometryTools = observer(function GeometryTools({
               key={props.id}
               id={props.id}
               icon={props.icon}
-              tooltip={activeGeometry ? props.tooltip : ''}
               handleClick={setGeometry}
               tooltipSide={popoverSide}
             />
           ))}
         </div>
-
-        <Popover.Arrow className="tl-popover-arrow" />
-      </Popover.Content>
-    </Popover.Root>
+      </LSUI.PopoverContent>
+    </LSUI.Popover>
   )
 })

tldraw/apps/tldraw-logseq/src/components/KeyboardShortcut/KeyboardShortcut.tsx → packages/tldraw/apps/tldraw-logseq/src/components/KeyboardShortcut/KeyboardShortcut.tsx

@@ -3,14 +3,14 @@ import * as React from 'react'
 
 export const KeyboardShortcut = ({
   action,
-  ...props
-}: { action: string } & React.HTMLAttributes<HTMLElement>) => {
+  sequence
+}: { action?: string, sequence?: string | string[] } & React.HTMLAttributes<HTMLElement>) => {
   const { renderers } = React.useContext(LogseqContext)
   const Shortcut = renderers?.KeyboardShortcut
 
   return (
-    <div className="tl-menu-right-slot" {...props}>
-      <Shortcut action={action} />
+    <div className="tl-menu-right-slot">
+      <Shortcut action={action} sequence={sequence} />
     </div>
   )
 }

packages/tldraw/apps/tldraw-logseq/src/components/PopoverButton/PopoverButton.tsx

@@ -0,0 +1,39 @@
+import type { Side, Align } from '@radix-ui/react-popper'
+
+// @ts-ignore
+const LSUI = window.LSUI
+
+interface PopoverButton extends React.HTMLAttributes<HTMLButtonElement> {
+  side: Side // default side
+  align?: Align
+  alignOffset?: number
+  label: React.ReactNode
+  children: React.ReactNode
+  border?: boolean
+}
+
+export function PopoverButton({ side, align, alignOffset, label, children, border, ...rest }: PopoverButton) {
+  return (
+    <LSUI.Popover>
+      <LSUI.PopoverTrigger
+        {...rest}
+        data-border={border}
+        className="tl-button tl-popover-trigger-button"
+      >
+        {label}
+      </LSUI.PopoverTrigger>
+
+      <LSUI.PopoverContent
+        className="w-auto p-1"
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={15}
+        collisionBoundary={document.querySelector('.logseq-tldraw')}
+      >
+        {children}
+        <LSUI.PopoverArrow className="popper-arrow" />
+      </LSUI.PopoverContent>
+    </LSUI.Popover>
+  )
+}

tldraw/apps/tldraw-logseq/src/components/PrimaryTools/PrimaryTools.tsx → packages/tldraw/apps/tldraw-logseq/src/components/PrimaryTools/PrimaryTools.tsx

@@ -6,9 +6,11 @@ import { ToolButton } from '../ToolButton'
 import { GeometryTools } from '../GeometryTools'
 import { ColorInput } from '../inputs/ColorInput'
 import { ScaleInput } from '../inputs/ScaleInput'
-import * as Separator from '@radix-ui/react-separator'
 import { LogseqContext } from '../../lib/logseq-context'
 
+// @ts-ignore
+const LSUI = window.LSUI
+
 export const PrimaryTools = observer(function PrimaryTools() {
   const app = useApp()
   const {
@@ -51,7 +53,7 @@ export const PrimaryTools = observer(function PrimaryTools() {
           id="move"
           icon={app.isIn('move.panning') ? 'hand-grab' : 'hand-stop'}
         />
-        <Separator.Root className="tl-toolbar-separator" orientation="horizontal" />
+        <LSUI.Separator orientation="horizontal" />
         <ToolButton
           handleClick={() => app.selectTool('logseq-portal')}
           tooltip={t('whiteboard/add-block-or-page')}
@@ -89,8 +91,7 @@ export const PrimaryTools = observer(function PrimaryTools() {
           icon="text"
         />
         <GeometryTools activeGeometry={activeGeomId} setGeometry={handleToolClick} />
-        <Separator.Root
-          className="tl-toolbar-separator"
+        <LSUI.Separator
           orientation="horizontal"
           style={{ margin: '0 -4px' }}
         />

packages/tldraw/apps/tldraw-logseq/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,31 @@
+import type { Side } from '@radix-ui/react-popper'
+
+// @ts-ignore
+const LSUI = window.LSUI
+
+export interface TooltipProps {
+  children: React.ReactNode
+  side?: Side
+  sideOffset?: number
+  content?: React.ReactNode
+}
+
+export function Tooltip({ side, content, sideOffset = 10, ...rest }: TooltipProps) {
+  return content ? (
+    <LSUI.TooltipProvider delayDuration={300}>
+      <LSUI.Tooltip>
+        <LSUI.TooltipTrigger asChild>{rest.children}</LSUI.TooltipTrigger>
+          <LSUI.TooltipContent
+            sideOffset={sideOffset}
+            side={side}
+            {...rest}
+          >
+            {content}
+            <LSUI.TooltipArrow className="popper-arrow" />
+          </LSUI.TooltipContent>
+      </LSUI.Tooltip>
+    </LSUI.TooltipProvider>
+  ) : (
+    <>{rest.children}</>
+  )
+}

tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx → packages/tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx

@@ -1,9 +1,9 @@
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { useApp } from '@tldraw/react'
 import { KeyboardShortcut } from '../KeyboardShortcut'
-import { MOD_KEY } from '@tldraw/core'
 import { observer } from 'mobx-react-lite'
-import * as React from 'react'
+
+// @ts-ignore
+const LSUI = window.LSUI
 
 export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
   const app = useApp()
@@ -12,59 +12,53 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
   }
 
   return (
-    <DropdownMenuPrimitive.Root>
-      <DropdownMenuPrimitive.Trigger className="tl-button text-sm px-2 important" id="tl-zoom">
+    <LSUI.DropdownMenu>
+      <LSUI.DropdownMenuTrigger className="tl-button text-sm px-2 important" id="tl-zoom">
         {(app.viewport.camera.zoom * 100).toFixed(0) + '%'}
-      </DropdownMenuPrimitive.Trigger>
-      <DropdownMenuPrimitive.Content
+      </LSUI.DropdownMenuTrigger>
+      <LSUI.DropdownMenuContent
         onCloseAutoFocus={e => e.preventDefault()}
-        className="tl-menu"
         id="zoomPopup"
         sideOffset={12}
       >
-        <DropdownMenuPrimitive.Item
-          className="tl-menu-item"
+        <LSUI.DropdownMenuItem
           onSelect={preventEvent}
           onClick={app.api.zoomToFit}
         >
           Zoom to drawing
           <KeyboardShortcut action="whiteboard/zoom-to-fit" />
-        </DropdownMenuPrimitive.Item>
-        <DropdownMenuPrimitive.Item
-          className="tl-menu-item"
+        </LSUI.DropdownMenuItem>
+        <LSUI.DropdownMenuItem
           onSelect={preventEvent}
           onClick={app.api.zoomToSelection}
           disabled={app.selectedShapesArray.length === 0}
         >
           Zoom to fit selection
           <KeyboardShortcut action="whiteboard/zoom-to-selection" />
-        </DropdownMenuPrimitive.Item>
-        <DropdownMenuPrimitive.Item
-          className="tl-menu-item"
+        </LSUI.DropdownMenuItem>
+        <LSUI.DropdownMenuItem
           onSelect={preventEvent}
           onClick={app.api.zoomIn}
         >
           Zoom in
           <KeyboardShortcut action="whiteboard/zoom-in" />
-        </DropdownMenuPrimitive.Item>
-        <DropdownMenuPrimitive.Item
-          className="tl-menu-item"
+        </LSUI.DropdownMenuItem>
+        <LSUI.DropdownMenuItem
           onSelect={preventEvent}
           onClick={app.api.zoomOut}
         >
           Zoom out
           <KeyboardShortcut action="whiteboard/zoom-out" />
-        </DropdownMenuPrimitive.Item>
-        <DropdownMenuPrimitive.Item
-          className="tl-menu-item"
+        </LSUI.DropdownMenuItem>
+        <LSUI.DropdownMenuItem
           onSelect={preventEvent}
           onClick={app.api.resetZoom}
         >
           Reset zoom
           <KeyboardShortcut action="whiteboard/reset-zoom" />
-        </DropdownMenuPrimitive.Item>
-      </DropdownMenuPrimitive.Content>
-    </DropdownMenuPrimitive.Root>
+        </LSUI.DropdownMenuItem>
+      </LSUI.DropdownMenuContent>
+    </LSUI.DropdownMenu>
   )
 })
 

tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx → packages/tldraw/apps/tldraw-logseq/src/components/inputs/ColorInput.tsx

@@ -1,11 +1,12 @@
 import type { Side } from '@radix-ui/react-popper'
-import * as Slider from '@radix-ui/react-slider'
 import { Color, isBuiltInColor, debounce } from '@tldraw/core'
 import { TablerIcon } from '../icons'
 import { PopoverButton } from '../PopoverButton'
 import { Tooltip } from '../Tooltip'
 import React from 'react'
 import { LogseqContext } from '../../lib/logseq-context'
+// @ts-ignore
+const LSUI = window.LSUI
 
 interface ColorInputProps extends React.HTMLAttributes<HTMLButtonElement> {
   color?: string
@@ -59,7 +60,6 @@ export function ColorInput({
     <PopoverButton
       {...rest}
       border
-      arrow
       side={popoverSide}
       label={
         <Tooltip content={t('whiteboard/color')} side={popoverSide} sideOffset={14}>
@@ -94,14 +94,14 @@ export function ColorInput({
               />
             </div>
           </div>
-          <label htmlFor="tl-custom-color-input" className="cursor-pointer">
+          <label htmlFor="tl-custom-color-input" className="text-xs cursor-pointer">
             {t('whiteboard/select-custom-color')}
           </label>
         </div>
 
         {setOpacity && (
           <div className="mx-1 my-2">
-            <Slider.Root
+            <LSUI.Slider
               defaultValue={[opacity ?? 0]}
               onValueCommit={value => setOpacity(value[0])}
               max={1}
@@ -109,11 +109,11 @@ export function ColorInput({
               aria-label={t('whiteboard/opacity')}
               className="tl-slider-root"
             >
-              <Slider.Track className="tl-slider-track">
-                <Slider.Range className="tl-slider-range" />
-              </Slider.Track>
-              <Slider.Thumb className="tl-slider-thumb" />
-            </Slider.Root>
+              <LSUI.SliderTrack className="tl-slider-track">
+                <LSUI.SliderRange className="tl-slider-range" />
+              </LSUI.SliderTrack>
+              <LSUI.SliderThumb className="tl-slider-thumb" />
+            </LSUI.Slider>
           </div>
         )}
       </div>

tldraw/apps/tldraw-logseq/src/components/inputs/ScaleInput.tsx → packages/tldraw/apps/tldraw-logseq/src/components/inputs/ScaleInput.tsx

@@ -50,7 +50,7 @@ export function ScaleInput({ scaleLevel, compact, popoverSide, ...rest }: ScaleI
       options={sizeOptions}
       value={scaleLevel}
       popoverSide={popoverSide}
-      chevron={!compact}
+      compact={compact}
       onValueChange={v => {
         app.api.setScaleLevel(v)
       }}

packages/tldraw/apps/tldraw-logseq/src/components/inputs/SelectInput.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import { Tooltip } from '../Tooltip'
+import { ChevronDown } from 'lucide-react'
+import type { Side } from '@radix-ui/react-popper'
+
+// @ts-ignore
+const LSUI = window.LSUI
+
+export interface SelectOption {
+  value: string
+  label: React.ReactNode
+}
+
+interface SelectInputProps extends React.HTMLAttributes<HTMLElement> {
+  options: SelectOption[]
+  value: string
+  tooltip?: React.ReactNode
+  popoverSide?: Side
+  compact?: boolean
+  onValueChange: (value: string) => void
+}
+
+export function SelectInput({
+  options,
+  tooltip,
+  popoverSide,
+  compact = false,
+  value,
+  onValueChange,
+  ...rest
+}: SelectInputProps) {
+  const [isOpen, setIsOpen] = React.useState(false)
+  return (
+    <div {...rest}>
+      <LSUI.Select
+        open={isOpen}
+        onOpenChange={setIsOpen}
+        value={value}
+        onValueChange={onValueChange}
+      >
+        <Tooltip content={tooltip} side={popoverSide}>
+          <LSUI.SelectTrigger
+            className={`tl-select-trigger ${compact ? "compact" : ""}`}>
+            <LSUI.SelectValue />
+            {!compact && (
+              <LSUI.SelectIcon asChild>
+                <ChevronDown className="h-4 w-4 opacity-50"/>
+              </LSUI.SelectIcon>
+            )}
+          </LSUI.SelectTrigger>
+        </Tooltip>
+
+        <LSUI.SelectContent
+          className="min-w-min"
+          side={popoverSide}
+          position="popper"
+          sideOffset={14}
+          align="center"
+          onKeyDown={e => e.stopPropagation()}
+        >
+          {options.map(option => {
+            return (
+              <LSUI.SelectItem
+                key={option.value}
+                value={option.value}
+              >
+                {option.label}
+              </LSUI.SelectItem>
+            )
+          })}
+        </LSUI.SelectContent>
+      </LSUI.Select>
+    </div>
+  )
+}

tldraw/apps/tldraw-logseq/src/components/inputs/ToggleGroupInput.tsx → packages/tldraw/apps/tldraw-logseq/src/components/inputs/ToggleGroupInput.tsx

@@ -1,7 +1,9 @@
-import * as ToggleGroup from '@radix-ui/react-toggle-group'
 import { TablerIcon } from '../icons'
 import { Tooltip } from '../Tooltip'
 
+// @ts-ignore
+const LSUI = window.LSUI
+
 export interface ToggleGroupInputOption {
   value: string
   icon: string
@@ -22,8 +24,7 @@ interface ToggleGroupMultipleInputProps extends React.HTMLAttributes<HTMLElement
 
 export function ToggleGroupInput({ options, value, onValueChange }: ToggleGroupInputProps) {
   return (
-    <ToggleGroup.Root
-      className="tl-toggle-group-input"
+    <LSUI.ToggleGroup
       type="single"
       value={value}
       onValueChange={onValueChange}
@@ -31,19 +32,19 @@ export function ToggleGroupInput({ options, value, onValueChange }: ToggleGroupI
       {options.map(option => {
         return (
           <Tooltip content={option.tooltip} key={option.value}>
-            <div className="inline-block">
-              <ToggleGroup.Item
-                className="tl-toggle-group-input-button"
+            <div className="inline-flex">
+              <LSUI.ToggleGroupItem
+                className="tl-button"
                 value={option.value}
                 disabled={option.value === value}
               >
                 <TablerIcon name={option.icon} />
-              </ToggleGroup.Item>
+              </LSUI.ToggleGroupItem>
             </div>
           </Tooltip>
         )
       })}
-    </ToggleGroup.Root>
+    </LSUI.ToggleGroup>
   )
 }
 
@@ -53,23 +54,23 @@ export function ToggleGroupMultipleInput({
   onValueChange,
 }: ToggleGroupMultipleInputProps) {
   return (
-    <ToggleGroup.Root
-      className="tl-toggle-group-input"
+    <LSUI.ToggleGroup
+      className="inline-flex"
       type="multiple"
       value={value}
       onValueChange={onValueChange}
     >
       {options.map(option => {
         return (
-          <ToggleGroup.Item
-            className="tl-toggle-group-input-button"
+          <LSUI.ToggleGroupItem
+            className="tl-button"
             key={option.value}
             value={option.value}
           >
             <TablerIcon name={option.icon} />
-          </ToggleGroup.Item>
+          </LSUI.ToggleGroupItem>
         )
       })}
-    </ToggleGroup.Root>
+    </LSUI.ToggleGroup>
   )
 }

tldraw/apps/tldraw-logseq/src/components/inputs/ToggleInput.tsx → packages/tldraw/apps/tldraw-logseq/src/components/inputs/ToggleInput.tsx

@@ -1,5 +1,7 @@
 import { Tooltip } from '../Tooltip'
-import * as Toggle from '@radix-ui/react-toggle'
+
+// @ts-ignore
+const LSUI = window.LSUI
 
 interface ToggleInputProps extends React.HTMLAttributes<HTMLElement> {
   toggle?: boolean
@@ -18,14 +20,14 @@ export function ToggleInput({
 }: ToggleInputProps) {
   return (
     <Tooltip content={tooltip}>
-      <div className="inline-block">
-        <Toggle.Root
+      <div className="inline-flex">
+        <LSUI.Toggle
           {...rest}
           data-toggle={toggle}
-          className={'tl-toggle-input' + (className ? ' ' + className : '')}
+          className={'tl-button' + (className ? ' ' + className : '')}
           pressed={pressed}
           onPressedChange={onPressedChange}
-        ></Toggle.Root>
+        />
       </div>
     </Tooltip>
   )

tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts → packages/tldraw/apps/tldraw-logseq/src/lib/logseq-context.ts

@@ -38,7 +38,8 @@ export interface LogseqContextValue {
       }
     }>
     KeyboardShortcut: React.FC<{
-      action: string
+      action?: string
+      sequence?: string | string[]
     }>
   }
   handlers: {