feat: add terminal and simple shortcut system (#16)

packages/bolt/app/styles/components/resize-handle.scss

@@ -0,0 +1,28 @@
+[data-resize-handle] {
+  position: relative;
+
+  &[data-panel-group-direction='horizontal']:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -6px;
+    right: -5px;
+    z-index: $zIndexMax;
+  }
+
+  &[data-panel-group-direction='vertical']:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: -5px;
+    bottom: -6px;
+    z-index: $zIndexMax;
+  }
+
+  &[data-resize-handle-state='hover']:after,
+  &[data-resize-handle-state='drag']:after {
+    background-color: #8882;
+  }
+}

packages/bolt/app/styles/components/terminal.scss

@@ -0,0 +1,3 @@
+.xterm {
+  height: 100%;
+}

packages/bolt/app/styles/index.scss

@@ -1,5 +1,8 @@
 @import './variables.scss';
+@import './z-index.scss';
 @import './animations.scss';
+@import './components/terminal.scss';
+@import './components/resize-handle.scss';
 
 body {
   --at-apply: bg-bolt-elements-app-backgroundColor;

packages/bolt/app/styles/variables.scss

@@ -20,12 +20,72 @@
 
   --bolt-border-primary: theme('colors.gray.200');
   --bolt-border-accent: theme('colors.accent.600');
+
+  /* Terminal Colors */
+  --bolt-terminal-background: var(--bolt-background-primary);
+  --bolt-terminal-foreground: #333333;
+  --bolt-terminal-selection-background: #00000040;
+  --bolt-terminal-black: #000000;
+  --bolt-terminal-red: #cd3131;
+  --bolt-terminal-green: #00bc00;
+  --bolt-terminal-yellow: #949800;
+  --bolt-terminal-blue: #0451a5;
+  --bolt-terminal-magenta: #bc05bc;
+  --bolt-terminal-cyan: #0598bc;
+  --bolt-terminal-white: #555555;
+  --bolt-terminal-brightBlack: #686868;
+  --bolt-terminal-brightRed: #cd3131;
+  --bolt-terminal-brightGreen: #00bc00;
+  --bolt-terminal-brightYellow: #949800;
+  --bolt-terminal-brightBlue: #0451a5;
+  --bolt-terminal-brightMagenta: #bc05bc;
+  --bolt-terminal-brightCyan: #0598bc;
+  --bolt-terminal-brightWhite: #a5a5a5;
 }
 
 /* Color Tokens Dark Theme */
 :root,
 :root[data-theme='dark'] {
-  --bolt-background-primary: theme('colors.gray.50');
+  --bolt-background-primary: theme('colors.gray.0');
+  --bolt-background-secondary: theme('colors.gray.50');
+  --bolt-background-active: theme('colors.gray.200');
+  --bolt-background-accent: theme('colors.accent.600');
+  --bolt-background-accent-secondary: theme('colors.accent.600');
+  --bolt-background-accent-active: theme('colors.accent.500');
+
+  --bolt-text-primary: theme('colors.gray.800');
+  --bolt-text-primary-inverted: theme('colors.gray.0');
+  --bolt-text-secondary: theme('colors.gray.600');
+  --bolt-text-secondary-inverted: theme('colors.gray.200');
+  --bolt-text-disabled: theme('colors.gray.400');
+  --bolt-text-accent: theme('colors.accent.600');
+  --bolt-text-positive: theme('colors.positive.700');
+  --bolt-text-warning: theme('colors.warning.600');
+  --bolt-text-negative: theme('colors.negative.600');
+
+  --bolt-border-primary: theme('colors.gray.200');
+  --bolt-border-accent: theme('colors.accent.600');
+
+  /* Terminal Colors */
+  --bolt-terminal-background: #16181d;
+  --bolt-terminal-foreground: #eff0eb;
+  --bolt-terminal-selection-background: #97979b33;
+  --bolt-terminal-black: #000000;
+  --bolt-terminal-red: #ff5c57;
+  --bolt-terminal-green: #5af78e;
+  --bolt-terminal-yellow: #f3f99d;
+  --bolt-terminal-blue: #57c7ff;
+  --bolt-terminal-magenta: #ff6ac1;
+  --bolt-terminal-cyan: #9aedfe;
+  --bolt-terminal-white: #f1f1f0;
+  --bolt-terminal-brightBlack: #686868;
+  --bolt-terminal-brightRed: #ff5c57;
+  --bolt-terminal-brightGreen: #5af78e;
+  --bolt-terminal-brightYellow: #f3f99d;
+  --bolt-terminal-brightBlue: #57c7ff;
+  --bolt-terminal-brightMagenta: #ff6ac1;
+  --bolt-terminal-brightCyan: #9aedfe;
+  --bolt-terminal-brightWhite: #f1f1f0;
 }
 
 /*
@@ -36,9 +96,33 @@
 :root {
   --header-height: 65px;
 
+  --z-index-max: 999;
+
   /* App */
   --bolt-elements-app-backgroundColor: var(--bolt-background-primary);
   --bolt-elements-app-borderColor: var(--bolt-border-primary);
   --bolt-elements-app-textColor: var(--bolt-text-primary);
   --bolt-elements-app-linkColor: var(--bolt-text-accent);
+
+  /* Terminal */
+  --bolt-elements-terminal-backgroundColor: var(--bolt-terminal-background);
+  --bolt-elements-terminal-textColor: var(--bolt-terminal-foreground);
+  --bolt-elements-terminal-cursorColor: var(--bolt-terminal-foreground);
+  --bolt-elements-terminal-selection-backgroundColor: var(--bolt-terminal-selection-background);
+  --bolt-elements-terminal-color-black: var(--bolt-terminal-black);
+  --bolt-elements-terminal-color-red: var(--bolt-terminal-red);
+  --bolt-elements-terminal-color-green: var(--bolt-terminal-green);
+  --bolt-elements-terminal-color-yellow: var(--bolt-terminal-yellow);
+  --bolt-elements-terminal-color-blue: var(--bolt-terminal-blue);
+  --bolt-elements-terminal-color-magenta: var(--bolt-terminal-magenta);
+  --bolt-elements-terminal-color-cyan: var(--bolt-terminal-cyan);
+  --bolt-elements-terminal-color-white: var(--bolt-terminal-white);
+  --bolt-elements-terminal-color-brightBlack: var(--bolt-terminal-brightBlack);
+  --bolt-elements-terminal-color-brightRed: var(--bolt-terminal-brightRed);
+  --bolt-elements-terminal-color-brightGreen: var(--bolt-terminal-brightGreen);
+  --bolt-elements-terminal-color-brightYellow: var(--bolt-terminal-brightYellow);
+  --bolt-elements-terminal-color-brightBlue: var(--bolt-terminal-brightBlue);
+  --bolt-elements-terminal-color-brightMagenta: var(--bolt-terminal-brightMagenta);
+  --bolt-elements-terminal-color-brightCyan: var(--bolt-terminal-brightCyan);
+  --bolt-elements-terminal-color-brightWhite: var(--bolt-terminal-brightWhite);
 }

packages/bolt/app/styles/z-index.scss

@@ -0,0 +1 @@
+$zIndexMax: 999;