🎉 first commit

app/styles/animations.scss

@@ -0,0 +1,49 @@
+.animated {
+  animation-fill-mode: both;
+  animation-duration: var(--animate-duration, 0.2s);
+  animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+
+  &.fadeInRight {
+    animation-name: fadeInRight;
+  }
+
+  &.fadeOutRight {
+    animation-name: fadeOutRight;
+  }
+}
+
+@keyframes fadeInRight {
+  from {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes fadeOutRight {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.dropdown-animation {
+  opacity: 0;
+  animation: fadeMoveDown 0.15s forwards;
+  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes fadeMoveDown {
+  to {
+    opacity: 1;
+    transform: translateY(6px);
+  }
+}

app/styles/components/code.scss

@@ -0,0 +1,9 @@
+.actions .shiki {
+  background-color: var(--upage-elements-actions-code-background) !important;
+}
+
+.shiki {
+  &:not(:has(.actions), .actions *) {
+    background-color: var(--upage-elements-messages-code-background) !important;
+  }
+}

app/styles/components/editor.scss

@@ -0,0 +1,135 @@
+:root {
+  --cm-backgroundColor: var(--upage-elements-editor-backgroundColor, var(--upage-elements-bg-depth-1));
+  --cm-textColor: var(--upage-elements-editor-textColor, var(--upage-elements-textPrimary));
+
+  /* Gutter */
+
+  --cm-gutter-backgroundColor: var(--upage-elements-editor-gutter-backgroundColor, var(--cm-backgroundColor));
+  --cm-gutter-textColor: var(--upage-elements-editor-gutter-textColor, var(--upage-elements-textSecondary));
+  --cm-gutter-activeLineTextColor: var(--upage-elements-editor-gutter-activeLineTextColor, var(--cm-gutter-textColor));
+
+  /* Fold Gutter */
+
+  --cm-foldGutter-textColor: var(--upage-elements-editor-foldGutter-textColor, var(--cm-gutter-textColor));
+  --cm-foldGutter-textColorHover: var(--upage-elements-editor-foldGutter-textColorHover, var(--cm-gutter-textColor));
+
+  /* Active Line */
+
+  --cm-activeLineBackgroundColor: var(--upage-elements-editor-activeLineBackgroundColor, rgb(224 231 235 / 30%));
+
+  /* Cursor */
+
+  --cm-cursor-width: 2px;
+  --cm-cursor-backgroundColor: var(--upage-elements-editor-cursorColor, var(--upage-elements-textSecondary));
+
+  /* Matching Brackets */
+
+  --cm-matching-bracket: var(--upage-elements-editor-matchingBracketBackgroundColor, rgb(50 140 130 / 0.3));
+
+  /* Selection */
+
+  --cm-selection-backgroundColorFocused: var(--upage-elements-editor-selection-backgroundColor, #42b4ff);
+  --cm-selection-backgroundOpacityFocused: var(--upage-elements-editor-selection-backgroundOpacity, 0.3);
+  --cm-selection-backgroundColorBlured: var(--upage-elements-editor-selection-inactiveBackgroundColor, #c9e9ff);
+  --cm-selection-backgroundOpacityBlured: var(--upage-elements-editor-selection-inactiveBackgroundOpacity, 0.3);
+
+  /* Panels */
+
+  --cm-panels-borderColor: var(--upage-elements-editor-panels-borderColor, var(--upage-elements-borderColor));
+
+  /* Search */
+
+  --cm-search-backgroundColor: var(--upage-elements-editor-search-backgroundColor, var(--cm-backgroundColor));
+  --cm-search-textColor: var(--upage-elements-editor-search-textColor, var(--upage-elements-textSecondary));
+  --cm-search-closeButton-backgroundColor: var(--upage-elements-editor-search-closeButton-backgroundColor, transparent);
+
+  --cm-search-closeButton-backgroundColorHover: var(
+    --upage-elements-editor-search-closeButton-backgroundColorHover,
+    var(--upage-elements-item-backgroundActive)
+  );
+
+  --cm-search-closeButton-textColor: var(
+    --upage-elements-editor-search-closeButton-textColor,
+    var(--upage-elements-item-contentDefault)
+  );
+
+  --cm-search-closeButton-textColorHover: var(
+    --upage-elements-editor-search-closeButton-textColorHover,
+    var(--upage-elements-item-contentActive)
+  );
+
+  --cm-search-button-backgroundColor: var(
+    --upage-elements-editor-search-button-backgroundColor,
+    var(--upage-elements-item-backgroundDefault)
+  );
+
+  --cm-search-button-backgroundColorHover: var(
+    --upage-elements-editor-search-button-backgroundColorHover,
+    var(--upage-elements-item-backgroundActive)
+  );
+
+  --cm-search-button-textColor: var(--upage-elements-editor-search-button-textColor, var(--upage-elements-textSecondary));
+
+  --cm-search-button-textColorHover: var(
+    --upage-elements-editor-search-button-textColorHover,
+    var(--upage-elements-textPrimary)
+  );
+
+  --cm-search-button-borderColor: var(--upage-elements-editor-search-button-borderColor, transparent);
+  --cm-search-button-borderColorHover: var(--upage-elements-editor-search-button-borderColorHover, transparent);
+
+  --cm-search-button-borderColorFocused: var(
+    --upage-elements-editor-search-button-borderColorFocused,
+    var(--upage-elements-borderColorActive)
+  );
+
+  --cm-search-input-backgroundColor: var(--upage-elements-editor-search-input-backgroundColor, transparent);
+  --cm-search-input-textColor: var(--upage-elements-editor-search-input-textColor, var(--upage-elements-textPrimary));
+  --cm-search-input-borderColor: var(--upage-elements-editor-search-input-borderColor, var(--upage-elements-borderColor));
+
+  --cm-search-input-borderColorFocused: var(
+    --upage-elements-editor-search-input-borderColorFocused,
+    var(--upage-elements-borderColorActive)
+  );
+
+  /* Tooltip */
+
+  --cm-tooltip-backgroundColor: var(--upage-elements-editor-tooltip-backgroundColor, var(--cm-backgroundColor));
+  --cm-tooltip-textColor: var(--upage-elements-editor-tooltip-textColor, var(--upage-elements-textPrimary));
+
+  --cm-tooltip-backgroundColorSelected: var(
+    --upage-elements-editor-tooltip-backgroundColorSelected,
+    theme('colors.alpha.accent.30')
+  );
+
+  --cm-tooltip-textColorSelected: var(
+    --upage-elements-editor-tooltip-textColorSelected,
+    var(--upage-elements-textPrimary)
+  );
+
+  --cm-tooltip-borderColor: var(--upage-elements-editor-tooltip-borderColor, var(--upage-elements-borderColor));
+
+  --cm-searchMatch-backgroundColor: var(--upage-elements-editor-searchMatch-backgroundColor, rgba(234, 92, 0, 0.33));
+}
+
+html[data-theme='light'] {
+  --upage-elements-editor-gutter-textColor: #237893;
+  --upage-elements-editor-gutter-activeLineTextColor: var(--upage-elements-textPrimary);
+  --upage-elements-editor-foldGutter-textColorHover: var(--upage-elements-textPrimary);
+  --upage-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 5%);
+  --upage-elements-editor-tooltip-backgroundColorSelected: theme('colors.alpha.accent.20');
+  --upage-elements-editor-search-button-backgroundColor: theme('colors.gray.100');
+  --upage-elements-editor-search-button-backgroundColorHover: theme('colors.alpha.gray.10');
+}
+
+html[data-theme='dark'] {
+  --cm-backgroundColor: var(--upage-elements-bg-depth-2);
+  --upage-elements-editor-gutter-textColor: var(--upage-elements-textTertiary);
+  --upage-elements-editor-gutter-activeLineTextColor: var(--upage-elements-textSecondary);
+  --upage-elements-editor-selection-inactiveBackgroundOpacity: 0.3;
+  --upage-elements-editor-activeLineBackgroundColor: rgb(50 53 63 / 50%);
+  --upage-elements-editor-foldGutter-textColorHover: var(--upage-elements-textPrimary);
+  --upage-elements-editor-matchingBracketBackgroundColor: rgba(66, 180, 255, 0.3);
+  --upage-elements-editor-search-button-backgroundColor: theme('colors.gray.800');
+  --upage-elements-editor-search-button-backgroundColorHover: theme('colors.alpha.white.10');
+}

app/styles/components/resize-handle.scss

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

app/styles/diff-view.css

@@ -0,0 +1,72 @@
+.diff-panel-content {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
+}
+
+.diff-panel-content::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.diff-panel-content::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.diff-panel-content::-webkit-scrollbar-thumb {
+  background-color: rgba(155, 155, 155, 0.5);
+  border-radius: 4px;
+  border: 2px solid transparent;
+}
+
+.diff-panel-content::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(155, 155, 155, 0.7);
+}
+
+/* Hide scrollbar for the left panel when not hovered */
+.diff-panel:not(:hover) .diff-panel-content::-webkit-scrollbar {
+  display: none;
+}
+
+.diff-panel:not(:hover) .diff-panel-content {
+  scrollbar-width: none;
+}
+
+/* Estilos para as linhas de diff */
+.diff-block-added {
+  @apply bg-green-500/20 border-l-4 border-green-500;
+}
+
+.diff-block-removed {
+  @apply bg-red-500/20 border-l-4 border-red-500;
+}
+
+/* Melhorar contraste para mudanças */
+.diff-panel-content .group:hover .diff-block-added {
+  @apply bg-green-500/30;
+}
+
+.diff-panel-content .group:hover .diff-block-removed {
+  @apply bg-red-500/30;
+}
+
+/* Estilos unificados para ambas as visualizações */
+.diff-line {
+  @apply flex group min-w-fit transition-colors duration-150;
+}
+
+.diff-line-number {
+  @apply w-12 shrink-0 pl-2 py-0.5 text-left font-mono text-upage-elements-textTertiary border-r border-upage-elements-borderColor bg-upage-elements-background-depth-1;
+}
+
+.diff-line-content {
+  @apply px-4 py-0.5 font-mono whitespace-pre flex-1 group-hover:bg-upage-elements-background-depth-2 text-upage-elements-textPrimary;
+}
+
+/* Cores específicas para adições/remoções */
+.diff-added {
+  @apply bg-green-500/20 border-l-4 border-green-500;
+}
+
+.diff-removed {
+  @apply bg-red-500/20 border-l-4 border-red-500;
+}

app/styles/index.scss

@@ -0,0 +1,23 @@
+@use 'variables.scss';
+@use 'z-index.scss';
+@use 'animations.scss';
+@use 'scrollbar.scss';
+@use 'components/resize-handle.scss';
+@use 'components/code.scss';
+@use 'components/editor.scss';
+
+html,
+body {
+  height: 100%;
+  width: 100%;
+}
+
+:root {
+  --gradient-opacity: 0.8;
+  --primary-color: rgba(158, 117, 240, var(--gradient-opacity));
+  --secondary-color: rgba(138, 43, 226, var(--gradient-opacity));
+  --accent-color: rgba(128, 59, 239, var(--gradient-opacity));
+  // --primary-color: rgba(147, 112, 219, var(--gradient-opacity));
+  // --secondary-color: rgba(138, 43, 226, var(--gradient-opacity));
+  // --accent-color: rgba(180, 170, 220, var(--gradient-opacity));
+}

app/styles/scrollbar.scss

@@ -0,0 +1,18 @@
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px
+}
+
+::-webkit-scrollbar-track {
+  background: transparent
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--upage-elements-scrollbar-thumb);
+  border-radius: 5px
+}
+
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--upage-elements-scrollbar-thumb) transparent;
+}

app/styles/variables.scss

@@ -0,0 +1,191 @@
+/* Color Tokens Light Theme */
+:root,
+:root[data-theme='light'] {
+  --upage-elements-borderColor: #E2E8F0;
+  --upage-elements-borderColorActive: theme('colors.accent.600');
+
+  --upage-elements-bg-depth-1: theme('colors.white');
+  --upage-elements-bg-depth-2: #F8FAFC;
+  --upage-elements-bg-depth-3: #F1F5F9;
+  --upage-elements-bg-depth-4: theme('colors.alpha.gray.5');
+
+  --upage-elements-textPrimary: #0F172A;
+  --upage-elements-textSecondary: #334155;
+  --upage-elements-textTertiary: #64748B;
+  --upage-elements-textSuccess: theme('colors.green.500');
+  --upage-elements-textWarning: theme('colors.yellow.500');
+  --upage-elements-textError: theme('colors.red.500');
+
+  --upage-elements-code-background: theme('colors.gray.100');
+  --upage-elements-code-text: theme('colors.gray.950');
+
+  --upage-elements-button-primary-background: theme('colors.accent.500');
+  --upage-elements-button-primary-backgroundHover: theme('colors.accent.600');
+  --upage-elements-button-primary-text: theme('colors.white');
+
+  --upage-elements-button-secondary-background: #F1F5F9;
+  --upage-elements-button-secondary-backgroundHover: #E2E8F0;
+  --upage-elements-button-secondary-text: #334155;
+
+  --upage-elements-button-danger-background: theme('colors.red.500');
+  --upage-elements-button-danger-backgroundHover: theme('colors.red.600');
+  --upage-elements-button-danger-text: theme('colors.white');
+
+  --upage-elements-item-contentDefault: var(--upage-elements-textPrimary);
+  --upage-elements-item-contentActive: theme('colors.gray.950');
+  --upage-elements-item-contentAccent: theme('colors.accent.700');
+  --upage-elements-item-contentDanger: theme('colors.red.500');
+  --upage-elements-item-backgroundDefault: rgba(0, 0, 0, 0);
+  --upage-elements-item-backgroundActive: theme('colors.alpha.gray.5');
+  --upage-elements-item-backgroundAccent: theme('colors.alpha.accent.10');
+  --upage-elements-item-backgroundDanger: theme('colors.alpha.red.10');
+
+  --upage-elements-loader-background: theme('colors.alpha.gray.10');
+  --upage-elements-loader-progress: theme('colors.accent.500');
+
+  --upage-elements-artifacts-background: theme('colors.white');
+  --upage-elements-artifacts-backgroundHover: theme('colors.alpha.gray.2');
+  --upage-elements-artifacts-borderColor: var(--upage-elements-borderColor);
+  --upage-elements-artifacts-inlineCode-background: #F1F5F9;
+  --upage-elements-artifacts-inlineCode-text: var(--upage-elements-textPrimary);
+
+  --upage-elements-actions-background: theme('colors.white');
+  --upage-elements-actions-code-background: #1E293B;
+
+  --upage-elements-messages-background: #F8FAFC;
+  --upage-elements-messages-linkColor: theme('colors.accent.600');
+  --upage-elements-messages-code-background: #1E293B;
+  --upage-elements-messages-inlineCode-background: #F1F5F9;
+  --upage-elements-messages-inlineCode-text: #0F172A;
+
+  --upage-elements-icon-success: theme('colors.green.500');
+  --upage-elements-icon-error: theme('colors.red.500');
+  --upage-elements-icon-primary: theme('colors.gray.950');
+  --upage-elements-icon-secondary: theme('colors.gray.600');
+  --upage-elements-icon-tertiary: theme('colors.gray.500');
+
+  --upage-elements-dividerColor: theme('colors.gray.100');
+
+  --upage-elements-prompt-background: theme('colors.alpha.white.80');
+
+  --upage-elements-sidebar-dropdownShadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  --upage-elements-sidebar-buttonBackgroundDefault: theme('colors.accent.500');
+  --upage-elements-sidebar-buttonBackgroundHover: theme('colors.accent.600');
+  --upage-elements-sidebar-buttonText: theme('colors.white');
+
+  --upage-elements-preview-addressBar-background: theme('colors.gray.100');
+  --upage-elements-preview-addressBar-backgroundHover: theme('colors.alpha.gray.5');
+  --upage-elements-preview-addressBar-backgroundActive: theme('colors.white');
+  --upage-elements-preview-addressBar-text: var(--upage-elements-textSecondary);
+  --upage-elements-preview-addressBar-textActive: var(--upage-elements-textPrimary);
+
+  --upage-elements-cta-background: theme('colors.gray.100');
+  --upage-elements-cta-text: theme('colors.gray.950');
+
+  --upage-elements-scrollbar-thumb: theme('colors.gray.500');
+}
+
+/* Color Tokens Dark Theme */
+:root,
+:root[data-theme='dark'] {
+  --upage-elements-borderColor: #334155;
+  --upage-elements-borderColorActive: theme('colors.accent.500');
+
+  --upage-elements-bg-depth-1: #0F172A;
+  --upage-elements-bg-depth-2: #1E293B;
+  --upage-elements-bg-depth-3: #334155;
+  --upage-elements-bg-depth-4: theme('colors.alpha.white.5');
+
+  --upage-elements-textPrimary: theme('colors.white');
+  --upage-elements-textSecondary: theme('colors.gray.300');
+  --upage-elements-textTertiary: theme('colors.gray.400');
+  --upage-elements-textSuccess: theme('colors.green.500');
+  --upage-elements-textWarning: theme('colors.yellow.500');
+  --upage-elements-textError: theme('colors.red.500');
+
+  --upage-elements-code-background: theme('colors.gray.800');
+  --upage-elements-code-text: theme('colors.white');
+
+  --upage-elements-button-primary-background: theme('colors.accent.500');
+  --upage-elements-button-primary-backgroundHover: theme('colors.accent.600');
+  --upage-elements-button-primary-text: theme('colors.white');
+
+  --upage-elements-button-secondary-background: #334155;
+  --upage-elements-button-secondary-backgroundHover: #475569;
+  --upage-elements-button-secondary-text: theme('colors.white');
+
+  --upage-elements-button-danger-background: theme('colors.red.500');
+  --upage-elements-button-danger-backgroundHover: theme('colors.red.600');
+  --upage-elements-button-danger-text: theme('colors.white');
+
+  --upage-elements-item-contentDefault: theme('colors.alpha.white.50');
+  --upage-elements-item-contentActive: theme('colors.white');
+  --upage-elements-item-contentAccent: theme('colors.accent.500');
+  --upage-elements-item-contentDanger: theme('colors.red.500');
+  --upage-elements-item-backgroundDefault: rgba(255, 255, 255, 0);
+  --upage-elements-item-backgroundActive: theme('colors.alpha.white.10');
+  --upage-elements-item-backgroundAccent: theme('colors.alpha.accent.10');
+  --upage-elements-item-backgroundDanger: theme('colors.alpha.red.10');
+
+  --upage-elements-loader-background: theme('colors.alpha.gray.10');
+  --upage-elements-loader-progress: theme('colors.accent.500');
+
+  --upage-elements-artifacts-background: #1E293B;
+  --upage-elements-artifacts-backgroundHover: theme('colors.alpha.white.5');
+  --upage-elements-artifacts-borderColor: var(--upage-elements-borderColor);
+  --upage-elements-artifacts-inlineCode-background: #334155;
+  --upage-elements-artifacts-inlineCode-text: theme('colors.white');
+
+  --upage-elements-actions-background: #1E293B;
+  --upage-elements-actions-code-background: #0F172A;
+
+  --upage-elements-messages-background: #1E293B;
+  --upage-elements-messages-linkColor: theme('colors.accent.400');
+  --upage-elements-messages-code-background: #0F172A;
+  --upage-elements-messages-inlineCode-background: #334155;
+  --upage-elements-messages-inlineCode-text: var(--upage-elements-textPrimary);
+
+  --upage-elements-icon-success: theme('colors.green.400');
+  --upage-elements-icon-error: theme('colors.red.400');
+  --upage-elements-icon-primary: theme('colors.gray.950');
+  --upage-elements-icon-secondary: theme('colors.gray.600');
+  --upage-elements-icon-tertiary: theme('colors.gray.500');
+
+  --upage-elements-dividerColor: theme('colors.gray.100');
+
+  --upage-elements-prompt-background: rgba(15, 23, 42, 0.8);
+
+  --upage-elements-sidebar-dropdownShadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
+  --upage-elements-sidebar-buttonBackgroundDefault: theme('colors.accent.500');
+  --upage-elements-sidebar-buttonBackgroundHover: theme('colors.accent.600');
+  --upage-elements-sidebar-buttonText: theme('colors.white');
+
+  --upage-elements-preview-addressBar-background: var(--upage-elements-bg-depth-1);
+  --upage-elements-preview-addressBar-backgroundHover: theme('colors.alpha.white.5');
+  --upage-elements-preview-addressBar-backgroundActive: var(--upage-elements-bg-depth-1);
+  --upage-elements-preview-addressBar-text: var(--upage-elements-textSecondary);
+  --upage-elements-preview-addressBar-textActive: var(--upage-elements-textPrimary);
+
+  --upage-elements-cta-background: theme('colors.alpha.white.10');
+  --upage-elements-cta-text: theme('colors.white');
+
+  --upage-elements-scrollbar-thumb: theme('colors.gray.300');
+}
+
+/*
+ * Element Tokens
+ *
+ * Hierarchy: Element Token -> (Element Token | Color Tokens) -> Primitives
+ */
+:root {
+  --header-height: 54px;
+  --chat-max-width: 48rem;
+  --chat-width: 30rem;
+  --workbench-width: min(calc(100% - var(--chat-width)), 2536px);
+  --workbench-inner-width: var(--workbench-width);
+  --workbench-left: calc(100% - var(--workbench-width));
+
+  /* Toasts */
+  --toastify-color-progress-success: var(--upage-elements-icon-success);
+  --toastify-color-progress-error: var(--upage-elements-icon-error);
+}

app/styles/z-index.scss

@@ -0,0 +1,33 @@
+$zIndexMax: 999;
+
+.z-logo {
+  z-index: $zIndexMax - 1;
+}
+
+.z-sidebar {
+  z-index: $zIndexMax - 2;
+}
+
+.z-port-dropdown {
+  z-index: $zIndexMax - 3;
+}
+
+.z-iframe-overlay {
+  z-index: $zIndexMax - 4;
+}
+
+.z-prompt {
+  z-index: 2;
+}
+
+.z-workbench {
+  z-index: 3;
+}
+
+.z-file-tree-breadcrumb {
+  z-index: $zIndexMax - 1;
+}
+
+.z-max {
+  z-index: $zIndexMax;
+}