@bagelink/vue 1.15.51 → 1.15.53

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.51",
+  "version": "1.15.53",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/Loading.vue

@@ -24,7 +24,7 @@ const computedBorder = computed(() => {
 })
 
 const computedColor = computed(() => {
-	if (!color) return 'var(--bgl-black)'
+	if (!color) return 'var(--bgl-text-color)'
 	if (color.startsWith('#') || color.startsWith('rgb') || color.startsWith('var(')) {
 		return color // Custom color string
 	}

package/src/components/form/inputs/CodeEditor/Index.vue

@@ -13,6 +13,7 @@ const props = defineProps({
 	autodetect: { type: Boolean, default: true },
 	ignoreIllegals: { type: Boolean, default: true },
 	label: { type: String, default: '' },
+	placeholder: { type: String, default: '' },
 	height: { type: String, default: '240px' },
 	disabled: { type: Boolean, default: false },
 	theme: { type: String as PropType<HighlightTheme>, default: 'dark' },
@@ -146,6 +147,7 @@ watch(() => props.modelValue, () => {
 		<div v-if="loaded" ref="editorRef" class="code-editor-grandpa hljs">
 			<div class="editor-content-papa relative">
 				<pre class="code-display" wrap><code v-html="formattedCode" /></pre>
+				<pre v-if="placeholder && !hasCodeValue" class="code-placeholder" wrap>{{ placeholder }}</pre>
 				<textarea
 					v-if="!readonly && !disabled" :value="code" class="code-input" spellcheck="false"
 					autocomplete="off" autocorrect="off" autocapitalize="off" @input="handleInput"
@@ -212,6 +214,22 @@ pointer-events: none;
 z-index: 1;
 }
 
+.code-placeholder {
+position: absolute;
+inset: 0;
+margin: 0;
+padding: 0;
+width: 100%;
+height: 100%;
+font-family: monospace;
+font-size: 1em;
+line-height: 1.5;
+text-align: left;
+pointer-events: none;
+opacity: 0.4;
+z-index: 1;
+}
+
 .code-display code {
 display: block;
 background: transparent !important;

package/src/components/form/inputs/CodeEditor/useHighlight.ts

@@ -1,5 +1,5 @@
 import type { HighlightJS, HighlightTheme } from './CodeTypes'
-import { appendStyle, appendScript } from '@bagelink/vue'
+import { appendStyle, appendScript, awaitGlobal } from '@bagelink/vue'
 import { ref } from 'vue'
 
 // Extend the Window interface
@@ -21,46 +21,56 @@ export function useHighlight(theme: HighlightTheme = 'dark') {
 
 	const getThemeCssUrl = (t: HighlightTheme) => `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/styles/${t}.min.css`
 
-	const removeExistingThemeLinks = () => {
+	// Remove highlight.js theme links EXCEPT the one we're about to keep.
+	// Removing a <link> that is still loading prevents its onload from ever
+	// firing, which would leave `appendStyle` hanging forever. When multiple
+	// editors mount at once this caused one editor to get stuck on `loaded=false`.
+	const removeOtherThemeLinks = (keepUrl: string) => {
 		document.querySelectorAll('link[rel="stylesheet"]').forEach((link) => {
-			if (link instanceof HTMLLinkElement && link.href.includes('/styles/')) {
-				if (link.href.includes('highlight.js')) { link.parentElement?.removeChild(link) }
+			if (link instanceof HTMLLinkElement && link.href.includes('/styles/') && link.href.includes('highlight.js')) {
+				if (link.href !== keepUrl) { link.parentElement?.removeChild(link) }
 			}
 		})
 	}
 
-	const setTheme = async (theme: HighlightTheme) => {
+	const loadTheme = async (theme: HighlightTheme) => {
 		const next = normalizeTheme(theme)
-		if (next === currentTheme.value) { return }
 		try {
-			removeExistingThemeLinks()
 			const url = getThemeCssUrl(next)
-			console.log('setTheme', url)
+			// Append first (idempotent: appendStyle resolves immediately if the
+			// link already exists), then remove only the *other* theme links.
 			await appendStyle(url)
+			removeOtherThemeLinks(url)
 			currentTheme.value = next
 		} catch (error) {
 			console.error('Failed to apply theme. Falling back to atom-one-dark:', error)
-			removeExistingThemeLinks()
 			currentTheme.value = 'atom-one-dark'
 			const url = getThemeCssUrl(currentTheme.value)
 			await appendStyle(url)
+			removeOtherThemeLinks(url)
 		}
 	}
 
+	const setTheme = async (theme: HighlightTheme) => {
+		const next = normalizeTheme(theme)
+		if (next === currentTheme.value) { return }
+		await loadTheme(next)
+	}
+
 	const loadHighlight = async () => {
 		if (loaded.value) { return }
 
 		try {
 			// Load highlight.js
 			await appendScript('https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.0/highlight.min.js', { id: 'hljs-cdn' })
-			await setTheme(currentTheme.value)
-
-			if (window.hljs) {
-				hljs.value = window.hljs
-				loaded.value = true
-			} else {
-				console.error('Failed to load highlight.js')
-			}
+			// `appendScript` may resolve before the script has finished executing when
+			// multiple editors mount at once (a duplicate <script id> is detected in the
+			// DOM and resolves immediately). Wait for the actual global to appear.
+			const lib = await awaitGlobal<HighlightJS>('hljs')
+			await loadTheme(currentTheme.value)
+
+			hljs.value = lib
+			loaded.value = true
 		} catch (error) {
 			console.error('Error loading highlight.js:', error)
 		}

package/src/components/form/inputs/RichText/components/TableGridSelector.vue

@@ -75,8 +75,8 @@ function handleMouseLeave() {
 						v-for="cell in gridCells" :key="`${cell.row}-${cell.col}`" tabindex="0" :style="{
 							width: '20px',
 							height: '20px',
-							border: '1px solid #ddd',
-							backgroundColor: cell.isActive ? 'var(--bgl-primary)' : '#fff',
+							border: '1px solid var(--bgl-border-color)',
+							backgroundColor: cell.isActive ? 'var(--bgl-primary)' : 'var(--bgl-input-bg)',
 							cursor: 'pointer',
 							borderRadius: '2px',
 							transition: 'background-color 0.1s ease',

package/src/components/layout/AppSidebar.vue

@@ -30,9 +30,9 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
 	card: true,
 	centerlinks: false,
-	bgColor: 'var(--bgl-white)',
-	textColor: 'var(--bgl-black)',
-	activeColor: 'var(--bgl-black)',
+	bgColor: 'var(--bgl-box-bg)',
+	textColor: 'var(--bgl-text-color)',
+	activeColor: 'var(--bgl-primary)',
 	logoAlt: 'Logo',
 	logoHeight: '2rem',
 	name: 'App Name',

package/src/components/layout/TabsNav.vue

@@ -173,7 +173,7 @@ onBeforeUnmount(() => {
 
 :root {
 --bgl_tabs-background: var(--bgl-input-bg);
---bgl_tabs-border-radius: var(--bgl-input-border-radius);
+--bgl_tabs-border-radius: var(--bgl-tabs-border-radius, var(--bgl-input-border-radius));
 --bgl_tabs-inline-padding: calc(var(--bgl-btn-padding) / 8);
 --bgl_tabs-block-padding: calc(var(--bgl-btn-padding) / 8);
 --bgl_tabs-shadow: inset 0 0 10px #00000012;
@@ -182,7 +182,6 @@ onBeforeUnmount(() => {
 --bgl_tab-inline-padding: calc(var(--bgl-btn-padding) / 2);
 --bgl_tab-block-padding: calc(var(--bgl-btn-padding) / 8);
 --bgl_tab-gap: 0.5rem;
---bgl_tabs-border-radius: var(--bgl-input-border-radius);
 --bgl-tab-hover-bg: rgba(255, 255, 255, .4);
 --bgl_tabs-indicator-color: var(--bgl-popup-bg);
 --bgl-tabs-flat-indicator-color: var(--bgl-primary);
@@ -220,6 +219,7 @@ align-items: center;
 
 .bgl_tab:hover {
 background: var(--bgl-tab-hover-bg);
+border-radius: var(--bgl_tab-border-radius, 7px);
 }
 
 .bgl_tabs_wrap::before {
@@ -254,7 +254,7 @@ color: var(--bgl-primary)
 }
 
 .bgl_flat-tabs .bgl_tab:hover {
-background: rgba(255, 255, 255, .1);
+background: var(--bgl-tab-hover-bg);
 }
 .bgl_tab-thin {
 padding-inline: calc(var(--bgl_tab-inline-padding) / 2);

package/src/styles/dark.css

@@ -15,15 +15,28 @@
  * the semantic tokens reference. If you ever need explicit opt-in dark classes
  * for components that use physical colors, build them on these same tokens.
  * ============================================================================ */
+/* .bgl-dark-mode {
+  filter: invert(1);
+}
+
+.bgl-dark-mode img,
+.bgl-dark-mode video,
+.bgl-dark-mode svg,
+.bgl-dark-mode iframe {
+  filter: invert(1);
+} */
 
-.bgl-dark-mode1 {
+.bgl-dark-mode {
   /* ---- Dark palette (raw values) ---------------------------------------- */
   --bgl-dm-bg: #121317;
   /* app background (deepest) */
   --bgl-dm-surface: #1d2023;
-  /* cards, panels, inputs */
+  /* cards, panels */
   --bgl-dm-surface-2: #23262b;
   /* slightly raised / hover */
+  --bgl-dm-input: #0e0f12;
+  /* inputs — sunk BELOW the surface so they read as a recessed field
+     whether they sit on the app background or inside a card */
   --bgl-dm-text: #dbdcdc;
   /* primary text */
   --bgl-dm-text-muted: #9a9b9d;
@@ -32,7 +45,7 @@
   /* borders / dividers */
 
   /* ---- Brand (slightly adjusted for dark backgrounds) ------------------- */
-  --bgl-primary: #4f7cff;
+  --bgl-primary: #4f7cff !important;
   --bgl-primary-tint: #4f7cff33;
   --bgl-primary-light: #1a2236;
 
@@ -40,7 +53,7 @@
   --bgl-bg: var(--bgl-dm-bg);
   --bgl-box-bg: var(--bgl-dm-surface);
   --bgl-popup-bg: var(--bgl-dm-surface);
-  --bgl-input-bg: var(--bgl-dm-surface);
+  --bgl-input-bg: var(--bgl-dm-input);
   --bgl-selected: var(--bgl-dm-surface-2);
   --bgl-skeleton-bg: var(--bgl-dm-surface-2);
   --bgl-skeleton-pulse: var(--bgl-dm-surface);
@@ -54,6 +67,16 @@
   --bgl-label-color: var(--bgl-dm-text-muted);
   --bgl-placeholder-color: var(--bgl-dm-text-muted);
 
+  /* ---- Translucent black tints ----------------------------------------- *
+	 * --bgl-black-tint / --bgl-gray-tint are semi-transparent BLACK in light
+	 * mode (e.g. #28292980). They are used both as muted text (drag handles,
+	 * secondary labels, flat pills) and as faint fills/borders. On a dark
+	 * surface translucent black is invisible, so flip them to translucent
+	 * LIGHT. One remap fixes every `var(--bgl-black-tint)` usage at once. */
+  --bgl-black-tint: rgba(219, 220, 220, 0.5);    /* muted light text */
+  --bgl-gray-tint: rgba(219, 220, 220, 0.16);
+  --bgl-gray-tint-dark: rgba(219, 220, 220, 0.32);
+
   /* ---- Borders / shadows / scrollbar ----------------------------------- */
   --bgl-border-color: var(--bgl-dm-border);
   --bgl-shadow: rgba(0, 0, 0, 0.5);
@@ -62,6 +85,42 @@
   /* ---- Hover / active filters (lighten instead of darken) -------------- */
   --bgl-hover-filter: brightness(125%);
   --bgl-active-filter: brightness(110%);
+
+  /* ---- Tabs ------------------------------------------------------------- *
+   * The default tab hover is rgba(255,255,255,.4) — a fine pale wash on a
+   * light bar, but a glaring bright patch on a dark one. Dial it down to a
+   * subtle light wash so hover reads as a gentle highlight. */
+  --bgl-tab-hover-bg: rgba(255, 255, 255, 0.08);
+
+  /* ---- Soft color variants (*-light / *-tint) -------------------------- *
+	 * In light mode these are pale fills (e.g. #eef6ff) meant to carry dark
+	 * text. On a dark UI a pale fill is a glaring bright patch, so we remap
+	 * each one to a low-opacity wash of its OWN base color over the dark
+	 * surface. The text color for these is fixed to --bgl-black in
+	 * base-colors.css, so we also re-point the text below (see the rule after
+	 * this block) — we can do that safely because base-colors.css uses no
+	 * !important. */
+  --bgl-blue-light: color-mix(in oklab, var(--bgl-blue) 22%, var(--bgl-dm-surface));
+  --bgl-red-light: color-mix(in oklab, var(--bgl-red) 22%, var(--bgl-dm-surface));
+  --bgl-green-light: color-mix(in oklab, var(--bgl-green) 22%, var(--bgl-dm-surface));
+  --bgl-yellow-light: color-mix(in oklab, var(--bgl-yellow) 22%, var(--bgl-dm-surface));
+  --bgl-purple-light: color-mix(in oklab, var(--bgl-purple) 22%, var(--bgl-dm-surface));
+  --bgl-brown-light: color-mix(in oklab, var(--bgl-brown) 22%, var(--bgl-dm-surface));
+  --bgl-orange-light: color-mix(in oklab, var(--bgl-orange) 22%, var(--bgl-dm-surface));
+  --bgl-turquoise-light: color-mix(in oklab, var(--bgl-turquoise) 22%, var(--bgl-dm-surface));
+  --bgl-pink-light: color-mix(in oklab, var(--bgl-pink) 22%, var(--bgl-dm-surface));
+  --bgl-primary-light: color-mix(in oklab, var(--bgl-primary) 22%, var(--bgl-dm-surface));
+  /* --bgl-gray-light is already remapped to a dark surface above. */
+
+  /* ---- Gray tint scale (light → dark inversion) ------------------------ *
+   * --bgl-gray-10..30 are near-white tints in light mode, used everywhere as
+   * faint fills (hover states, cell grids, separators, recessed panels). On a
+   * dark UI those near-white fills glow. Remap the low end of the scale to
+   * subtle LIGHT washes over the dark surface so "low number = faint" still
+   * holds. Fixes grid-cell-btn, bg-gray-10/20/30 utilities, etc. at once. */
+  --bgl-gray-10: color-mix(in oklab, white 4%, var(--bgl-dm-surface));
+  --bgl-gray-20: color-mix(in oklab, white 8%, var(--bgl-dm-surface));
+  --bgl-gray-30: color-mix(in oklab, white 13%, var(--bgl-dm-surface));
 }
 
 /* Native form controls (date/time pickers) render dark glyphs that are
@@ -74,4 +133,124 @@
 .bgl-dark-mode ::selection {
   color: var(--bgl-dm-text);
   background: var(--bgl-primary-tint);
+}
+
+/* Soft color pairs (.pair-*-light / .pair-*-tint) hard-code dark text in
+   base-colors.css. Once their fills become dark washes (see the variable
+   remaps above) that text is unreadable, so flip it to the light text token.
+   base-colors.css carries no !important, so this plain rule wins by source
+   order. */
+.bgl-dark-mode [class*="pair-"][class*="-light"],
+.bgl-dark-mode [class*="pair-"][class*="-tint"] {
+  color: var(--bgl-dm-text);
+}
+
+/* .pair-black-tint / .pair-gray-tint are COLORLESS translucent fills. With the
+   --bgl-black-tint remap they'd become a translucent LIGHT patch, and the rule
+   above also makes their text light → low contrast. Give these two an explicit
+   subtle dark fill instead (the colored *-tint pairs keep their colored wash,
+   which still reads fine under light text). */
+.bgl-dark-mode .pair-black-tint:not(.bgl_flatPill):not(.bgl_pill-border),
+.bgl-dark-mode .pair-gray-tint:not(.bgl_flatPill):not(.bgl_pill-border) {
+  background-color: var(--bgl-dm-surface-2);
+  border-color: var(--bgl-dm-border);
+}
+
+/* ----------------------------------------------------------------------------
+ * Absolute color utilities (bg-white / bg-black …)
+ * ----------------------------------------------------------------------------
+ * These are mostly used as a generic "surface" (e.g. cards, dropdowns) rather
+ * than a deliberate pure-white/black. In dark mode that pale fill becomes a
+ * glaring patch, so we remap them to the semantic dark surface. They carry
+ * !important in colors.css, so we must out-specify AND use !important here
+ * (`.bgl-dark-mode .bg-white` = (0,2,0) beats `.bg-white` = (0,1,0)).
+ *
+ * OPT-OUT: add `keep-white` / `keep-black` when you truly want the physical
+ * color in dark mode (logos, swatches, screenshots, on-image labels …). */
+.bgl-dark-mode .bg-white:not(.keep-white),
+.bgl-dark-mode .bg-black:not(.keep-black) {
+  background: var(--bgl-dm-surface) !important;
+  --alpha-color: var(--bgl-dm-surface);
+  /* The fill is now dark, so default any inherited/UA text (e.g. <button>
+     defaults to black) to the light token. A `.color-*` utility still wins
+     because it carries !important in colors.css. */
+  color: var(--bgl-dm-text);
+}
+
+.bgl-dark-mode .bg-input-white:not(.keep-white) input,
+.bgl-dark-mode .bg-input-white:not(.keep-white) textarea,
+.bgl-dark-mode .bg-input-white:not(.keep-white) .selectinput-btn,
+.bgl-dark-mode .bg-input-black:not(.keep-black) input,
+.bgl-dark-mode .bg-input-black:not(.keep-black) textarea,
+.bgl-dark-mode .bg-input-black:not(.keep-black) .selectinput-btn {
+  background: var(--bgl-dm-surface) !important;
+}
+
+/* color-white / color-black used as default text follow the same logic. */
+.bgl-dark-mode .color-white:not(.keep-white),
+.bgl-dark-mode .color-black:not(.keep-black) {
+  color: var(--bgl-dm-text) !important;
+}
+
+/* Flat / outline pills built on .pair-black render the pill text in
+   var(--bgl-black) (pure black) over a transparent fill — invisible on a dark
+   surface. Re-point to the light text token (no !important needed: the
+   .bgl-dark-mode prefix already out-specifies the base rule). */
+.bgl-dark-mode .pair-black.bgl_flatPill,
+.bgl-dark-mode .pair-black.bgl_pill-border {
+  color: var(--bgl-dm-text);
+}
+
+.bgl-dark-mode .pair-black.bgl_pill-border {
+  outline-color: var(--bgl-dm-border);
+}
+
+/* Dropdown / popover surfaces: the panel uses `bg-white shadow` as a generic
+   surface. The bg-white remap above already darkens the fill; make sure the
+   backdrop/shadow read correctly on the dark surface too. */
+.bgl-dark-mode .bgl-dropdown__content {
+  background: var(--bgl-box-bg);
+  color: var(--bgl-text-color);
+}
+
+/* App sidebar: ensure the sidebar surface follows the semantic dark surface
+   rather than any inherited physical white. */
+.bgl-dark-mode #bgl-app-sidebar,
+.bgl-dark-mode .app-sidebar {
+  background: var(--bgl-box-bg);
+  color: var(--bgl-text-color);
+}
+
+/* ----------------------------------------------------------------------------
+ * Input definition on dark surfaces
+ * ----------------------------------------------------------------------------
+ * Filled inputs use --bgl-input-bg (a recessed dark tone). To stop them from
+ * melting into the page/card, give the default (filled) variant a hairline
+ * border via an inset ring. We use box-shadow (not outline/border) so we don't
+ * fight the existing focus outline or the .frame/.bgl-outline variants, which
+ * already draw their own outline. The focus state still wins because its rule
+ * comes from inputs.css with its own box-shadow + outline-color.            */
+.bgl-dark-mode .bagel-input input:not([type="radio"]):not([type="checkbox"]):not([type="color"]),
+.bgl-dark-mode .bagel-input textarea,
+.bgl-dark-mode .bagel-input select,
+.bgl-dark-mode .custom-select .input,
+.bgl-dark-mode .selectinput-btn {
+  box-shadow: inset 0 0 0 1px var(--bgl-dm-border);
+}
+
+/* Don't double-draw the ring on variants that already have their own outline. */
+.bgl-dark-mode .bagel-input.frame input,
+.bgl-dark-mode .bagel-input.frame textarea,
+.bgl-dark-mode .bagel-input.frame select,
+.bgl-dark-mode .bagel-input.bgl-outline input,
+.bgl-dark-mode .bagel-input.bgl-outline textarea,
+.bgl-dark-mode .bagel-input.bgl-outline select,
+.bgl-dark-mode .bagel-input.underlined input,
+.bgl-dark-mode .bagel-input.underlined textarea,
+.bgl-dark-mode .bagel-input.underlined select,
+.bgl-dark-mode .bagel-input.frame .selectinput-btn,
+/* CodeEditor: the inner textarea is transparent/overlaid — its frame must
+   come only from .code-editor-grandpa, not from the generic input ring. */
+.bgl-dark-mode .bagel-input .code-input {
+  box-shadow: none;
 }

package/src/styles/inputs.css

@@ -366,6 +366,7 @@ select {
 .bagel-input.light-input input,
 .bagel-input.light-input textarea,
 .bagel-input.light-input select,
+.bagel-input.num-input.light-input .input-icon-wrap,
 .custom-select.light-input .input,
 .light-input .selectinput-btn {
     background: var(--bgl-popup-bg) !important;
@@ -378,10 +379,19 @@ select {
         outline-color 0.2s ease;
 }
 
+/* NumberInput wraps its <input> in .input-icon-wrap which carries the background,
+   so the transparent inner input must not re-apply the light-input styles. */
+.bagel-input.num-input.light-input .input-icon-wrap input {
+    background: transparent !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+
 .input.active.light-input,
 .bagel-input.light-input input:focus-visible,
 .bagel-input.light-input select:focus-visible,
-.bagel-input.light-input textarea:focus-visible {
+.bagel-input.light-input textarea:focus-visible,
+.bagel-input.num-input.light-input .input-icon-wrap:focus-within {
     box-shadow:
         0 2px 8px 0 rgba(0, 0, 0, 0.15),
         0 0 0 3px color-mix(in srgb, var(--bgl-input-label-active-color, var(--bgl-primary)) 15%, transparent) !important;