Merge main branch.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "em",
-  "version": "300.30.19",
+  "version": "300.30.25",
   "author": "Raine Revere <raine@cybersemics.org>",
   "description": "A beautiful, minimalistic note-taking app for personal sensemaking.",
   "license": "NoHarm-draft",
@@ -129,6 +129,7 @@
     "redux-thunk": "^2.4.2",
     "reselect": "^5.1.1",
     "text-block-parser": "^1.1.1",
+    "title-case": "^4.3.2",
     "truncate-html": "^1.1.2",
     "ts-key-enum": "^2.0.12",
     "use-onclickoutside": "^0.4.1",
@@ -209,6 +210,7 @@
     "postinstall-postinstall": "^2.1.0",
     "prettier": "^3.3.3",
     "puppeteer": "^22.12.1",
+    "puppeteer-screen-recorder": "3.0.3",
     "react-dnd-test-backend": "^16.0.1",
     "react-dnd-test-utils": "^16.0.1",
     "redux-mock-store": "^1.5.4",

panda.config.ts

@@ -1,5 +1,6 @@
 // https://panda-css.com/docs/references/config
 import { defineConfig, defineGlobalStyles, defineKeyframes } from '@pandacss/dev'
+import durationsConfig from './src/durations.config'
 import anchorButtonRecipe from './src/recipes/anchorButton'
 import bulletRecipe from './src/recipes/bullet'
 import buttonRecipe from './src/recipes/button'
@@ -22,13 +23,27 @@ import convertColorsToPandaCSS from './src/util/convertColorsToPandaCSS'
 
 const { colorTokens, colorSemanticTokens } = convertColorsToPandaCSS()
 
-/** Returns duration values with a zero duration for _test. */
-const duration = (str: string) => ({
+type DurationToken = {
   value: {
-    base: str,
-    _test: '0ms',
-  },
-})
+    base: string
+    _test: string
+  }
+}
+
+/** Returns durations formatted for the PandaCSS config. */
+const durationsReducer = (pv: Record<string, DurationToken>, [key, duration]: [string, number]) => {
+  pv[key] = {
+    value: {
+      base: `${duration}ms`,
+      _test: '0ms',
+    },
+  }
+
+  return pv
+}
+
+/** Add `ms` units to raw value. */
+const durations = Object.entries(durationsConfig).reduce(durationsReducer, {})
 
 const keyframes = defineKeyframes({
   fademostlyin: {
@@ -87,6 +102,23 @@ const keyframes = defineKeyframes({
       opacity: 0,
     },
   },
+  ellipsis: {
+    to: {
+      width: '1.25em',
+    },
+  },
+  toblack: {
+    to: {
+      color: 'black',
+      fill: 'black',
+    },
+  },
+  towhite: {
+    to: {
+      color: 'white',
+      fill: 'white',
+    },
+  },
 })
 
 const globalCss = defineGlobalStyles({
@@ -326,14 +358,7 @@ export default defineConfig({
             value: 'tomato !important',
           },
         },
-        durations: {
-          highlightPulseDuration: duration('500ms'),
-          hoverPulseDuration: duration('300ms'),
-          /** The animation duration for the slower opacity transition and horizontal shift of the LayoutTree as the depth of the cursor changes. */
-          layoutSlowShiftDuration: duration('750ms'),
-          /** The animation duration of a node in the LayoutTree component. */
-          layoutNodeAnimationDuration: duration('150ms'),
-        },
+        durations,
       },
     },
   },

src/@types/LetterCaseType.ts

@@ -0,0 +1,4 @@
+/** Set of letter case types supported for letter case picker. */
+type LetterCaseType = 'LowerCase' | 'UpperCase' | 'SentenceCase' | 'TitleCase'
+
+export default LetterCaseType

src/@types/State.ts

@@ -129,6 +129,7 @@ interface State {
   search: string | null
   searchContexts: Index<Context> | null
   searchLimit?: number
+  showLetterCase?: boolean
   showColorPicker?: boolean
   showCommandPalette: boolean
   showHiddenThoughts: boolean