@bendyline/docblocks-react 1.0.0 → 1.1.0

package/src/icons.tsx

@@ -46,6 +46,16 @@ export function RefreshIcon(props: SVGProps<SVGSVGElement>) {
   );
 }
 
+export function MoreIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg {...defaults} {...props}>
+      <circle cx="3.5" cy="8" r="1" fill="currentColor" stroke="none" />
+      <circle cx="8" cy="8" r="1" fill="currentColor" stroke="none" />
+      <circle cx="12.5" cy="8" r="1" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
 export function WorkspaceIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg {...defaults} {...props}>

package/src/index.ts

@@ -19,7 +19,7 @@ export type { DocBlocksShellProps } from './DocBlocksShell/index.js';
 
 // AppMenu
 export { AppMenu } from './AppMenu/index.js';
-export type { AppMenuProps } from './AppMenu/index.js';
+export type { AppMenuProps, ThemePreference } from './AppMenu/index.js';
 
 // Export
 export { ExportToolbarControls } from './Export/index.js';

package/src/styles/docblocks.css

@@ -8,7 +8,8 @@
   --db-bg-hover: #f3f4f6;
   --db-bg-selected: #dbeafe;
   --db-bg-selected-hover: #bfdbfe;
-  --db-border: #e5e7eb;
+  --db-border: #cbd5e1;
+  --db-border-strong: #94a3b8;
   --db-text: #1f2937;
   --db-text-secondary: #374151;
   --db-text-muted: #6b7280;
@@ -27,7 +28,8 @@
   --db-bg-hover: #334155;
   --db-bg-selected: #1e3a5f;
   --db-bg-selected-hover: #1e4a7f;
-  --db-border: #334155;
+  --db-border: #475569;
+  --db-border-strong: #64748b;
   --db-text: #e5e7eb;
   --db-text-secondary: #cbd5e1;
   --db-text-muted: #94a3b8;
@@ -47,7 +49,8 @@
     --db-bg-hover: #334155;
     --db-bg-selected: #1e3a5f;
     --db-bg-selected-hover: #1e4a7f;
-    --db-border: #334155;
+    --db-border: #475569;
+    --db-border-strong: #64748b;
     --db-text: #e5e7eb;
     --db-text-secondary: #cbd5e1;
     --db-text-muted: #94a3b8;
@@ -94,7 +97,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 6px 8px;
-  border-bottom: 1px solid var(--db-border);
+  border-bottom: 1px solid var(--db-border-strong);
   flex-shrink: 0;
 }
 
@@ -218,8 +221,11 @@
   width: 16px;
   flex-shrink: 0;
   text-align: center;
-  font-size: 10px;
-  color: var(--db-text-placeholder);
+  font-size: 14px;
+  line-height: 1;
+  font-family:
+    ui-monospace, 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
+  color: var(--db-text-secondary);
 }
 
 .db-tree-label {
@@ -239,6 +245,40 @@
   outline: none;
 }
 
+.db-tree-more {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin-right: 4px;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--db-text-secondary);
+  cursor: pointer;
+  visibility: hidden;
+}
+
+.db-tree-row:hover .db-tree-more,
+.db-tree-row:focus-within .db-tree-more,
+.db-tree-more:focus-visible,
+.db-tree-more--active {
+  visibility: visible;
+}
+
+.db-tree-more:hover {
+  background: var(--db-bg-hover);
+  color: var(--db-text);
+}
+
+.db-tree-more--active {
+  background: var(--db-bg-selected);
+  color: var(--db-text);
+}
+
 /* ── Context Menu ────────────────────────────────────────────── */
 
 .db-tree-node {
@@ -246,8 +286,8 @@
 }
 
 .db-tree-context {
-  position: absolute;
-  z-index: 50;
+  position: fixed;
+  z-index: 1000;
   background: var(--db-bg);
   border: 1px solid var(--db-border);
   border-radius: 4px;
@@ -552,7 +592,7 @@
 
 .db-shell-sidebar {
   width: 260px;
-  border-right: 1px solid var(--db-border);
+  border-right: 1px solid var(--db-border-strong);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -562,7 +602,7 @@
 .db-shell-sidebar-header {
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--db-border);
+  border-bottom: 1px solid var(--db-border-strong);
   padding: 4px;
   gap: 4px;
   flex-shrink: 0;
@@ -571,7 +611,7 @@
 
 .db-shell-sidebar-footer {
   padding: 8px 12px;
-  border-top: 1px solid var(--db-border);
+  border-top: 1px solid var(--db-border-strong);
   flex-shrink: 0;
   font-size: 11px;
 }
@@ -719,6 +759,38 @@
   color: var(--db-text-placeholder);
 }
 
+/* ── Settings Dialog ─────────────────────────────────────────── */
+
+.db-settings-fieldset {
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+
+.db-settings-legend {
+  font-size: 12px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--db-text-muted);
+  margin-bottom: 8px;
+}
+
+.db-settings-radio {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0;
+  font-size: 13px;
+  color: var(--db-text);
+  cursor: pointer;
+}
+
+.db-settings-radio input[type='radio'] {
+  margin: 0;
+  cursor: pointer;
+}
+
 /* ── Folder View ─────────────────────────────────────────────── */
 
 .db-folder-view {
@@ -737,7 +809,14 @@
 }
 
 .db-folder-view-icon {
-  font-size: 20px;
+  display: inline-flex;
+  align-items: center;
+  color: var(--db-text-secondary);
+}
+
+.db-folder-view-icon svg {
+  width: 24px;
+  height: 24px;
 }
 
 .db-folder-view-path {
@@ -773,8 +852,15 @@
 }
 
 .db-folder-view-item-icon {
-  font-size: 16px;
+  display: inline-flex;
+  align-items: center;
   flex-shrink: 0;
+  color: var(--db-text-secondary);
+}
+
+.db-folder-view-item-icon svg {
+  width: 18px;
+  height: 18px;
 }
 
 /* ── Toolbar Image Button Override ─────────────────────────── */
@@ -959,3 +1045,32 @@
   background: var(--db-accent-hover);
   border-color: var(--db-accent-hover);
 }
+
+/* ── Squisq editor chrome separators ─────────────────────────── */
+/* Strengthen the dividers so the toolbar, tabs, and editor body
+   read as three distinct zones instead of near-identical whites.  */
+
+.db-shell .squisq-editor-header {
+  border-bottom-color: var(--db-border-strong);
+}
+
+.db-shell .squisq-toolbar-view-tabs {
+  border-right-color: var(--db-border-strong);
+}
+
+.db-shell[data-theme='light'] .squisq-toolbar {
+  background: #d8dee6;
+}
+
+.db-shell[data-theme='light'] .squisq-toolbar-view-tabs {
+  background: #ffffff;
+  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.04);
+}
+
+.db-shell[data-theme='dark'] .squisq-toolbar {
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.db-shell[data-theme='dark'] .squisq-toolbar-view-tabs {
+  background: #0b1220;
+}