@getdom/studio 0.2.1 → 0.2.3

package/src/pages/lib/vue/index.d.ts

@@ -248,6 +248,14 @@ export interface IconSelectorItem {
 	component?: DomVueComponent;
 	[key: string]: unknown;
 }
+export interface FontPickerItem {
+	family: string;
+	value?: string;
+	label?: string;
+	category?: 'sans-serif' | 'serif' | 'display' | 'handwriting' | 'monospace' | string;
+	keywords?: string | Array<string>;
+	[key: string]: unknown;
+}
 /** A contained menu page, route link, or application-owned action. */
 export interface MenuStackItem {
 	id: string;
@@ -2644,11 +2652,11 @@ export interface DomMonthCalendarProps {
 	 */
 	showDayNames?: boolean;
 	/**
-	 * Highlight today with a cell outline, a coloured circle behind the date, or no visual indicator.
+	 * Highlight today with a cell outline, a coloured circle behind the date, both, or no visual indicator.
 	 */
-	todayIndicator?: "cell" | "circle" | "none";
+	todayIndicator?: "cell" | "circle" | "both" | "none";
 	/**
-	 * Classes for today’s date circle. Replaces the default primary background and foreground colours when todayIndicator is circle.
+	 * Classes for today’s date circle. Replaces the default primary background and foreground colours when todayIndicator is circle or both.
 	 */
 	todayDateClass?: string | Array<unknown> | Record<string, unknown> | ((...args: Array<unknown>) => unknown);
 	/**
@@ -3331,7 +3339,7 @@ export interface DomAgentConversationProps {
 	 */
 	toolComponents?: AgentChatToolComponentMap;
 	/**
-	 * CSS max-width applied to message bubbles.
+	 * CSS max-width applied to the centered message column and composer.
 	 */
 	maxMessageWidth?: string;
 }
@@ -4285,7 +4293,7 @@ export interface DomSelectProps {
 	/**
 	 * Selected option value.
 	 */
-	modelValue?: string | number;
+	modelValue?: string | number | Array<string | number>;
 	/**
 	 * Optional ID override. By default parent forms derive the input ID from the field path using underscores.
 	 */
@@ -4374,6 +4382,21 @@ export interface DomSelectProps {
 	 * Placeholder shown inside the panel search input.
 	 */
 	searchPlaceholder?: string;
+	/**
+	 * Toggle multiple values without closing the panel. Use an array v-model.
+	 */
+	multiple?: boolean | string;
+	/**
+	 * Disable local filtering for server-ranked options.
+	 */
+	filterOptions?: boolean | string;
+	loading?: boolean | string;
+	hasMore?: boolean | string;
+	/**
+	 * Resolved records for initial values outside the currently loaded server page.
+	 */
+	selectedOptions?: Array<DomOption>;
+	clearable?: boolean | string;
 }
 export declare const DomSelect: DomComponent<DomSelectProps>;
 
@@ -4458,6 +4481,9 @@ export interface DomComboboxProps {
 	 * Show an inline spinner while async options are being fetched.
 	 */
 	loading?: boolean | string;
+	filterOptions?: boolean | string;
+	hasMore?: boolean | string;
+	selectedOptions?: Array<DomOption>;
 }
 export declare const DomCombobox: DomComponent<DomComboboxProps>;
 
@@ -4538,6 +4564,8 @@ export interface DomAutocompleteProps {
 	 * Show an inline spinner while async suggestions are being fetched.
 	 */
 	loading?: boolean | string;
+	filterOptions?: boolean | string;
+	hasMore?: boolean | string;
 }
 export declare const DomAutocomplete: DomComponent<DomAutocompleteProps>;
 
@@ -4545,7 +4573,7 @@ export interface DomTagComboboxProps {
 	/**
 	 * Selected tag values.
 	 */
-	modelValue?: Array<string>;
+	modelValue?: Array<string | number>;
 	/**
 	 * Optional ID override. By default parent forms derive the input ID from the field path using underscores.
 	 */
@@ -4634,6 +4662,8 @@ export interface DomTagComboboxProps {
 	 * Show a clear-all button when tags are selected.
 	 */
 	clearable?: boolean | string;
+	hasMore?: boolean | string;
+	selectedOptions?: Array<DomOption>;
 }
 export declare const DomTagCombobox: DomComponent<DomTagComboboxProps>;
 
@@ -4733,6 +4763,106 @@ export interface DomIconSelectorProps {
 }
 export declare const DomIconSelector: DomComponent<DomIconSelectorProps>;
 
+export interface DomFontPickerProps {
+	/**
+	 * Selected font family or application-defined font value.
+	 */
+	modelValue?: string;
+	/**
+	 * Optional ID override. By default parent forms derive the input ID from the field path using underscores.
+	 */
+	id?: string;
+	/**
+	 * Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.
+	 */
+	name?: string;
+	/**
+	 * Visible field label.
+	 */
+	label?: string;
+	/**
+	 * Optional helper copy below the field.
+	 */
+	description?: string;
+	/**
+	 * Placeholder shown when the control is empty.
+	 */
+	placeholder?: string;
+	/**
+	 * Mark the field as required.
+	 */
+	required?: boolean;
+	/**
+	 * Disable field interaction.
+	 */
+	disabled?: boolean;
+	/**
+	 * Show the value but prevent editing.
+	 */
+	readOnly?: boolean;
+	/**
+	 * Mark the field invalid.
+	 */
+	invalid?: boolean;
+	/**
+	 * Validation errors for this field.
+	 */
+	errors?: Array<unknown> | Record<string, unknown> | string;
+	/**
+	 * Show or hide the field.
+	 */
+	visible?: boolean;
+	/**
+	 * Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.
+	 */
+	validators?: Array<unknown>;
+	/**
+	 * Run validators when the field loses focus.
+	 */
+	validateOnBlur?: boolean;
+	/**
+	 * Render default field chrome, or hide chrome while keeping form state wiring.
+	 */
+	chrome?: "field" | "none" | false;
+	/**
+	 * Lightweight family metadata. Font files are never bundled in this array.
+	 */
+	fonts?: Array<FontPickerItem | string>;
+	/**
+	 * Optionally restrict results to one Google Fonts category.
+	 */
+	category?: "" | "sans-serif" | "serif" | "display" | "handwriting" | "monospace";
+	/**
+	 * Number of metadata rows appended near the end. Preview fonts load only near the viewport.
+	 */
+	pageSize?: number;
+	/**
+	 * Optional shared sample. Empty uses each family name as its own preview.
+	 */
+	previewText?: string;
+	/**
+	 * Load the mounted selected label and visible previews from Google Fonts.
+	 */
+	loadFonts?: boolean;
+	/**
+	 * Google Fonts CSS v2 endpoint or an application-controlled compatible proxy.
+	 */
+	stylesheetUrl?: string;
+	/**
+	 * Show a clear button after a font is selected.
+	 */
+	clearable?: boolean;
+	/**
+	 * Preferred side before collision handling.
+	 */
+	placement?: "bottom" | "top" | "right" | "left";
+	/**
+	 * viewport keeps the list inside the browser; anchor keeps it attached while scrolling.
+	 */
+	floatingMode?: "viewport" | "anchor";
+}
+export declare const DomFontPicker: DomComponent<DomFontPickerProps>;
+
 export interface DomClassToggleInputProps {
 	/**
 	 * Enabled class names as a space-separated string.

package/src/pages/lib/vue/index.js

@@ -130,6 +130,7 @@ export { default as DomCombobox } from '../../forms/combobox/DomCombobox.vue';
 export { default as DomAutocomplete } from '../../forms/autocomplete/DomAutocomplete.vue';
 export { default as DomTagCombobox } from '../../forms/tag-combobox/DomTagCombobox.vue';
 export { default as DomIconSelector } from '../../forms/icon-selector/DomIconSelector.vue';
+export { default as DomFontPicker } from '../../forms/font-picker/DomFontPicker.vue';
 export { default as DomClassToggleInput } from '../../forms/class-toggle-input/DomClassToggleInput.vue';
 export { default as DomField } from '../../forms/field/DomField.vue';
 export { default as DomGridFieldLayout } from '../../forms/field/layouts/DomGridFieldLayout.vue';

package/src/tailwind.css

@@ -14,6 +14,8 @@
 	--dom-month-calendar-row-rail-direction: row;
 	--dom-month-calendar-row-rail-justify: space-between;
 	--dom-month-calendar-row-rail-min-height: 2.5rem;
+	--dom-month-calendar-row-rail-padding: 0.5rem;
+	--dom-month-calendar-week-number-order: 0;
 	--dom-month-calendar-week-columns: minmax(0, 1fr);
 }
 
@@ -33,6 +35,8 @@
 		--dom-month-calendar-row-rail-direction: column;
 		--dom-month-calendar-row-rail-justify: flex-start;
 		--dom-month-calendar-row-rail-min-height: 11rem;
+		--dom-month-calendar-row-rail-padding: 0.75rem;
+		--dom-month-calendar-week-number-order: -1;
 		--dom-month-calendar-week-columns: var(--dom-month-calendar-wide-week-columns);
 		--dom-month-calendar-wide-border-left-width: 1px;
 		--dom-month-calendar-wide-border-top-width: 0;
@@ -109,7 +113,7 @@
 	}
 
 	.skin-control {
-		background-color: var(--skin-control-bg, var(--secondary));
+		background-color: var(--skin-control-bg, var(--canvas));
 		background-image: var(--skin-control-bg-image, none);
 		border-color: var(--skin-control-border, var(--border));
 		border-style: var(--skin-control-border-style, solid);

package/src/theme.css

@@ -11,6 +11,8 @@
 	--shadow-lg: 0 8px 20px -6px rgb(15 23 42 / 0.16), 0 2px 6px -2px rgb(15 23 42 / 0.08);
 	--shadow-xl: 0 18px 44px -18px rgb(15 23 42 / 0.24), 0 8px 18px -12px rgb(15 23 42 / 0.16);
 	--shadow-2xl: 0 24px 60px -18px rgb(15 23 42 / 0.24), 0 8px 20px -10px rgb(15 23 42 / 0.14);
+	--dom-command-palette-background: color-mix(in oklch, var(--canvas) 68%, transparent);
+	--dom-command-palette-shadow: 0 40px 100px -24px rgb(15 23 42 / 0.3), 0 16px 40px -20px rgb(15 23 42 / 0.2);
 	--chart-1: oklch(0.55 0.19 257);
 	--chart-2: oklch(0.58 0.13 175);
 	--chart-3: oklch(0.65 0.16 65);
@@ -45,6 +47,8 @@
 	--shadow-lg: 0 1px 0 0 rgb(255 255 255 / 0.05) inset, 0 16px 34px -18px rgb(0 0 0 / 0.58), 0 5px 12px -8px rgb(0 0 0 / 0.5);
 	--shadow-xl: 0 1px 0 0 rgb(255 255 255 / 0.05) inset, 0 24px 52px -24px rgb(0 0 0 / 0.68), 0 10px 22px -14px rgb(0 0 0 / 0.56);
 	--shadow-2xl: 0 1px 0 0 rgb(255 255 255 / 0.06) inset, 0 34px 76px -30px rgb(0 0 0 / 0.72), 0 16px 34px -20px rgb(0 0 0 / 0.58);
+	--dom-command-palette-background: color-mix(in oklch, var(--canvas) 68%, transparent);
+	--dom-command-palette-shadow: 0 40px 100px -24px rgb(0 0 0 / 0.78), 0 16px 40px -20px rgb(0 0 0 / 0.62);
 	--chart-1: oklch(0.72 0.15 257);
 	--chart-2: oklch(0.75 0.13 175);
 	--chart-3: oklch(0.8 0.15 75);