Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5,032 changes: 3,504 additions & 1,528 deletions package-lock.json

Large diffs are not rendered by default.

40 changes: 0 additions & 40 deletions src/ui/.eslintrc.cjs

This file was deleted.

88 changes: 88 additions & 0 deletions src/ui/eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import js from "@eslint/js";
import tseslint from "@typescript-eslint/eslint-plugin";
import tsparser from "@typescript-eslint/parser";
import vueParser from "vue-eslint-parser";
import vuePlugin from "eslint-plugin-vue";
import prettierPlugin from "eslint-plugin-prettier";
import prettierConfig from "@vue/eslint-config-prettier";
import globals from "globals";

export default [
js.configs.recommended,

...vuePlugin.configs["flat/recommended"],

{
ignores: [
"**/node_modules/**",
"**/dist/**",
"**/build/**",
"**/.vite/**",
"**/custom_components_dist/**",
],
},

{
files: [
"**/*.vue",
"**/*.ts",
"**/*.js",
"**/*.jsx",
"**/*.cjs",
"**/*.mjs",
],

languageOptions: {
parser: vueParser,
parserOptions: {
parser: tsparser,
ecmaVersion: 2020,
sourceType: "module",
},
globals: {
...globals.browser,
...globals.node,
// Additional browser APIs that may not be in globals.browser
MediaStreamConstraints: "readonly",
RequestInit: "readonly",
},
},

plugins: {
"@typescript-eslint": tseslint,
vue: vuePlugin,
prettier: prettierPlugin,
},

rules: {
indent: "off",
"no-unused-vars": "off",

"@typescript-eslint/no-unused-vars": [
"warn",
{
args: "all",
argsIgnorePattern: "^_",
caughtErrors: "all",
caughtErrorsIgnorePattern: "^_",
destructuredArrayIgnorePattern: "^_",
varsIgnorePattern: "^_",
ignoreRestSiblings: true,
},
],
"@typescript-eslint/no-explicit-any": "warn",

"prettier/prettier": [
2,
{
useTabs: true,
endOfLine: "auto",
},
],

"no-console": "error",
},
},

prettierConfig,
];
16 changes: 16 additions & 0 deletions src/ui/index.html
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The color scheme changes make the scrollbar black

Image Image

Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/png" href="./static/favicon.png?2" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light" />
<title>Writer</title>
<!-- {{ meta }} -->
<!-- {{ opengraph_tags }} -->
Expand All @@ -17,8 +18,23 @@
-webkit-font-smoothing: antialiased;
}

html {
color-scheme: light;
}

body {
font-size: 13px;
background-color: #ffffff;
color: #000000;
/* Prevent layout shift during font loading */
font-family: Poppins, "Helvetica Neue", "Lucida Grande", sans-serif;
}

/* Ensure form elements don't switch to dark mode */
textarea, input {
color-scheme: light;
background-color: #ffffff;
color: #000000;
}

#app {
Expand Down
93 changes: 47 additions & 46 deletions src/ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 5050",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path ../../.gitignore --ignore-path .gitignore",
"lint.ci": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --ignore-path ../../.gitignore --ignore-path .gitignore",
"lint": "eslint . --fix",
"lint.ci": "eslint .",
"codegen": "node tools/generator.mjs",
"custom.dev": "vite --config vite.config.custom.ts",
"custom.build": "vite build --config vite.config.custom.ts",
Expand All @@ -16,59 +16,60 @@
"test.watch": "vitest dev"
},
"dependencies": {
"@apache-arrow/ts": "^15.0.2",
"@chamaeleonidae/chmln": "^1.0.1",
"@floating-ui/vue": "^1.1.5",
"@fontsource/poppins": "^5.0.14",
"@floating-ui/vue": "^1.1.9",
"@fontsource/poppins": "^5.2.7",
"@fullstory/browser": "^2.0.6",
"@googlemaps/js-api-loader": "^1.16.6",
"@monaco-editor/loader": "^1.3.3",
"@tato30/vue-pdf": "^1.11.3",
"@tiptap/extension-document": "^3.0.7",
"@tiptap/extension-hard-break": "^3.0.7",
"@tiptap/extension-paragraph": "^3.0.7",
"@tiptap/extension-text": "^3.0.7",
"@tiptap/extensions": "^3.0.7",
"@tiptap/vue-3": "^3.0.7",
"@vueuse/core": "^13.6.0",
"@googlemaps/js-api-loader": "^2.0.2",
"@launchdarkly/observability": "^0.5.0",
"@launchdarkly/session-replay": "^0.5.0",
"@monaco-editor/loader": "^1.7.0",
"@tato30/vue-pdf": "^1.11.5",
"@tiptap/extension-document": "^3.14.0",
"@tiptap/extension-hard-break": "^3.14.0",
"@tiptap/extension-paragraph": "^3.14.0",
"@tiptap/extension-text": "^3.14.0",
"@tiptap/extensions": "^3.14.0",
"@tiptap/vue-3": "^3.14.0",
"@vueuse/core": "^14.1.0",
"ajv": "^8.17.1",
"ajv-errors": "^3.0.0",
"arquero": "^5.2.0",
"apache-arrow": "^21.1.0",
"arquero": "^8.0.3",
"attr-accept": "^2.2.5",
"chroma-js": "^2.4.2",
"@launchdarkly/observability": "^0.4.0",
"@launchdarkly/session-replay": "^0.4.5",
"launchdarkly-js-client-sdk": "^3.8.1",
"lucide": "^0.525.0",
"mapbox-gl": "^3.2.0",
"marked": "^12.0.1",
"monaco-editor": "^0.47.0",
"plotly.js-dist-min": "^2.35.2",
"pretty-bytes": "^6.1.1",
"typescript": "^5.4.3",
"vega": "^5.22.1",
"vega-embed": "^6.22.1",
"vega-lite": "^5.7.1",
"vue": "^3.5.0",
"vue-dompurify-html": "^5.0.1"
"chroma-js": "^3.2.0",
"launchdarkly-js-client-sdk": "^3.9.0",
"lucide": "^0.562.0",
"mapbox-gl": "^3.17.0",
"marked": "^17.0.1",
"monaco-editor": "^0.55.1",
"plotly.js-dist-min": "^3.3.1",
"pretty-bytes": "^7.1.0",
"vega": "^6.2.0",
"vega-embed": "^7.1.0",
"vega-lite": "^6.4.1",
"vue": "^3.5.26",
"vue-dompurify-html": "^5.3.0"
},
"devDependencies": {
"@types/google.maps": "3.55.5",
"@types/mapbox-gl": "3.1.0",
"@types/google.maps": "3.58.1",
"@types/mapbox-gl": "3.4.1",
"@types/marked": "^6.0.0",
"@typescript-eslint/eslint-plugin": "7.18.0",
"@vitejs/plugin-vue": "^5.0.4",
"@vue/eslint-config-prettier": "^9.0.0",
"@typescript-eslint/eslint-plugin": "8.50.1",
"@vitejs/plugin-vue": "^6.0.3",
"@vue/eslint-config-prettier": "^10.2.0",
"@vue/test-utils": "^2.4.6",
"eslint": "^8.39.0",
"eslint-plugin-prettier": "5.1.3",
"eslint-plugin-vue": "^9.28.0",
"jsdom": "^25.0.1",
"postcss": "^8.4.49",
"eslint": "^9.39.2",
"eslint-plugin-prettier": "5.5.4",
"eslint-plugin-vue": "^10.6.2",
"globals": "^16.5.0",
"jsdom": "^27.4.0",
"postcss": "^8.5.6",
"postcss-assign-layer": "^0.4.0",
"prettier": "3.2.5",
"vite": "^5.2.7",
"vitest": "^3.1.0",
"volar-service-vetur": "*"
"prettier": "3.7.4",
"typescript": "^5.9.3",
"vite": "^7.3.0",
"vitest": "^4.0.16",
"volar-service-vetur": "^0.0.64"
}
}
35 changes: 25 additions & 10 deletions src/ui/src/builder/BuilderApp.vue
Original file line number Diff line number Diff line change
Expand Up @@ -536,9 +536,10 @@ onUnmounted(() => {
.mainGrid {
width: 100vw;
height: 100vh;
grid-template-columns: auto 1fr;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: var(--builderTopBarHeight) minmax(0, 1fr);
display: grid;
overflow: hidden;
}

.builderHeader {
Expand All @@ -549,9 +550,18 @@ onUnmounted(() => {

.sidebar {
grid-column: 1 / 2;
grid-row: 2 / 5;
grid-row: 2 / 3;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Previously, is this one set incorrectly?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, grid-row: 2 / 5 was incorrect. The grid has 3 rows, and the sidebar should only span row 2 (the main content area), not rows 2-4. The fix to grid-row: 2 / 3 is correct and ensures the sidebar is properly constrained to the main content area.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@as-flow is this something needed for shared blueprints?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think so @bybash

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess that break preview mode & Vault UI

Image Image

min-height: 0;
border-right: 1px solid var(--builderAreaSeparatorColor);
min-width: 48px;
max-width: 288px;
width: fit-content;
padding: 0;
border-radius: 0;
border-left: none;
border-top: none;
border-bottom: none;
Comment on lines +559 to +562
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we need these ones?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

after upgrade I found that we need changes there and avoid UI issues so I've added some fixes and implements.

border-right: 1px solid var(--builderIntenseSeparatorColor);
overflow: hidden;
}

.builderMain {
Expand All @@ -561,8 +571,18 @@ onUnmounted(() => {
height: 100%;
}

.mainGrid--fullWidth {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we use this one, will this be covered by this builderMainWrapper--fullWidth ?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch! The code actually uses mainGrid--fullWidth on the ShareResizeVertical component, not builderMainWrapper--fullWidth.

grid-column: 1 / -1;
.builderMainWrapper {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where do we use this new class?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The .builderMainWrapper class is not currently used in the template.

grid-column: 2 / 3;
grid-row: 2 / 3;
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

.builderMainWrapper--fullWidth {
grid-column: 1 / -1 !important;
}

.rendererWrapper {
Expand Down Expand Up @@ -593,11 +613,6 @@ onUnmounted(() => {
--notificationsDisplacement: calc(var(--builderSettingsWidth) + 24px);
}

.panelSwitcher {
grid-column: 2 / 3;
grid-row: 3;
}

.collaborationTracker,
.insertionLabelTracker {
z-index: 3;
Expand Down
25 changes: 13 additions & 12 deletions src/ui/src/builder/builderEditorWorker.ts
Original file line number Diff line number Diff line change
@@ -1,27 +1,28 @@
import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
import * as monaco from "monaco-editor";
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";

// @ts-ignore
self.MonacoEnvironment = {
getWorker(_: any, label: string) {
if (label === 'json') {
getWorker(_: unknown, label: string) {
if (label === "json") {
return new jsonWorker();
}
if (label === 'css' || label === 'scss' || label === 'less') {
if (label === "css" || label === "scss" || label === "less") {
return new cssWorker();
}
if (label === 'html' || label === 'handlebars' || label === 'razor') {
if (label === "html" || label === "handlebars" || label === "razor") {
return new htmlWorker();
}
if (label === 'typescript' || label === 'javascript') {
if (label === "typescript" || label === "javascript") {
return new tsWorker();
}
return new editorWorker();
}
},
};

// @ts-expect-error - Monaco TypeScript API may have changed in TypeScript 5.9
monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);
Loading
Loading