@getdom/studio 0.1.0

package/src/pages/_layout/componentInspector.js

@@ -0,0 +1,60 @@
+import { labelFromExportName, labelFromSlug } from './componentManager.js';
+
+/**
+ * Expands a component record with display metadata used by docs and editors.
+ *
+ * @param {object} record Component discovery record.
+ * @returns {object} Component record with normalized docs, labels, and props.
+ */
+export function inspectComponentRecord(record) {
+	const component = record.component;
+	const doc = getComponentDoc(record);
+	const studio = getStudioMeta(record);
+	return {
+		...record,
+		doc,
+		studio,
+		label: doc.name || labelFromExportName(record.exportName) || labelFromSlug(record.slug),
+		badge: doc.nav?.badge || doc.badge || null,
+		icon: doc.nav?.icon || doc.icon || studio.icon || null,
+		order: doc.order ?? 100,
+		hidden: Boolean(doc.hidden),
+		navHidden: Boolean(doc.hidden || doc.nav?.hidden),
+		studioHidden: Boolean(doc.hidden || studio.hidden),
+		props: getComponentProps(component),
+	};
+}
+
+/**
+ * Reads documentation metadata from either a Vue component or catalog record.
+ *
+ * @param {object} value Vue component object or component catalog record.
+ * @returns {object} Documentation metadata.
+ */
+export function getComponentDoc(value) {
+	return value?.__doc || value?.component?.__doc || value?.doc || {};
+}
+
+/**
+ * Reads Studio editor metadata from either a Vue component or catalog record.
+ *
+ * @param {object} value Vue component object or component catalog record.
+ * @returns {object} Studio metadata.
+ */
+export function getStudioMeta(value) {
+	const doc = getComponentDoc(value);
+	return value?.__studio || value?.component?.__studio || value?.studio || doc.studio || {};
+}
+
+/**
+ * Normalizes Vue props from a component object for docs/editor inspection.
+ *
+ * @param {object} component Vue component object.
+ * @returns {object} Component props keyed by prop name.
+ */
+export function getComponentProps(component) {
+	const props = component?.props;
+	if (!props) return {};
+	if (Array.isArray(props)) return Object.fromEntries(props.map((key) => [key, {}]));
+	return props;
+}

package/src/pages/_layout/componentManager.js

@@ -0,0 +1,192 @@
+import { componentCatalog } from './componentCatalog.generated.js';
+
+const lazyComponentModules = import.meta.glob([
+	'../components/*/Dom*.vue',
+	'../data/*/Dom*.vue',
+	'../dev/*/Dom*.vue',
+	'../forms/*/Dom*.vue',
+	'../mobile/*/Dom*.vue',
+	'../visual/*/Dom*.vue',
+	'!../components/playground/DomRenderer.vue',
+	'!../components/toast/DomToastItem.vue',
+	'!../forms/_shared/Dom*.vue',
+], { import: 'default' });
+const lazyComponentSourceModules = import.meta.glob([
+	'../components/*/Dom*.vue',
+	'../data/*/Dom*.vue',
+	'../dev/*/Dom*.vue',
+	'../forms/*/Dom*.vue',
+	'../mobile/*/Dom*.vue',
+	'../visual/*/Dom*.vue',
+	'!../components/playground/DomRenderer.vue',
+	'!../components/toast/DomToastItem.vue',
+	'!../forms/_shared/Dom*.vue',
+], { import: 'default', query: '?raw' });
+
+export const componentSections = ['components', 'data', 'dev', 'forms', 'mobile', 'visual'];
+
+/**
+ * Returns component records that are safe for app-shell navigation and search.
+ *
+ * These records intentionally contain metadata only. Component implementations
+ * and raw SFC source strings are resolved through lazy records or runtime-only
+ * discovery so ordinary routes do not preload the whole component catalogue.
+ *
+ * @returns {Array<object>} Lightweight component discovery records.
+ */
+export function getComponentRecords() {
+	return componentCatalog.map(recordFromCatalogRecord);
+}
+
+/**
+ * Returns lazy loaders for generated component documentation routes.
+ *
+ * @returns {Array<object>} Component records with dynamic component and source loaders.
+ */
+export function getLazyComponentRecords() {
+	return getComponentRecords()
+		.map((record) => ({
+			...record,
+			loader: lazyComponentModules[record.path],
+			sourceLoader: lazyComponentSourceModules[record.path],
+		}))
+		.filter((record) => record.loader);
+}
+
+/**
+ * Finds the first metadata record for a public component route.
+ *
+ * @param {string} route Public route path.
+ * @returns {object|undefined} Matching component record when one exists.
+ */
+export function getComponentRecordByRoute(route) {
+	return getComponentRecords().find((record) => record.route === route);
+}
+
+/**
+ * Builds legacy redirects for components that moved from /components to /forms.
+ *
+ * @returns {Array<{ from: string, to: string }>} Redirect records.
+ */
+export function getFormRedirectRecords() {
+	return getLazyComponentRecords()
+		.filter((record) => record.section === 'forms')
+		.map((record) => ({
+			from: `/components/${record.slug}`,
+			to: record.route,
+		}));
+}
+
+/**
+ * Builds legacy redirects for components that moved from /components to /data.
+ *
+ * @returns {Array<{ from: string, to: string }>} Redirect records.
+ */
+export function getDataRedirectRecords() {
+	return getLazyComponentRecords()
+		.filter((record) => record.section === 'data')
+		.map((record) => ({
+			from: `/components/${record.slug}`,
+			to: record.route,
+		}));
+}
+
+/**
+ * Builds legacy redirects for developer components from /components.
+ *
+ * @returns {Array<{ from: string, to: string }>} Redirect records.
+ */
+export function getDevRedirectRecords() {
+	return getLazyComponentRecords()
+		.filter((record) => record.section === 'dev')
+		.map((record) => ({
+			from: `/components/${record.slug}`,
+			to: record.route,
+		}));
+}
+
+/**
+ * Converts a component section key into a readable navigation label.
+ *
+ * @param {string} section Section key.
+ * @returns {string} Human-readable section label.
+ */
+export function labelFromSection(section) {
+	return {
+		components: 'Components',
+		data: 'Data',
+		dev: 'Dev',
+		forms: 'Forms',
+		mobile: 'Mobile',
+		visual: 'Visual',
+	}[section] || labelFromSlug(section);
+}
+
+/**
+ * Converts a URL slug into a title-cased label.
+ *
+ * @param {string} slug URL slug.
+ * @returns {string} Human-readable label.
+ */
+export function labelFromSlug(slug) {
+	return slug
+		.split('-')
+		.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+		.join(' ');
+}
+
+/**
+ * Converts a component export name into a default display label.
+ *
+ * @param {string} exportName Component export name.
+ * @returns {string} Human-readable component label.
+ */
+export function labelFromExportName(exportName) {
+	return labelFromSlug(
+		String(exportName || '')
+			.replace(/^Dom/, '')
+			.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+			.toLowerCase(),
+	);
+}
+
+/**
+ * Builds a stable hash anchor for secondary component records.
+ *
+ * @param {object} record Component record.
+ * @returns {string} URL hash anchor without the leading #.
+ */
+export function componentAnchor(record) {
+	return String(record?.exportName || record?.slug || '')
+		.replace(/^Dom/, 'dom-')
+		.replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+		.toLowerCase();
+}
+
+/**
+ * Infers the primary component export name for a component folder slug.
+ *
+ * @param {string} slug Component folder slug.
+ * @returns {string} Expected primary export name.
+ */
+export function primaryExportNameForSlug(slug) {
+	return `Dom${slug
+		.split('-')
+		.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+		.join('')}`;
+}
+
+/**
+ * Normalizes a catalog module record into the shape expected by docs helpers.
+ *
+ * @param {object} record Static component catalog record.
+ * @returns {object} Component discovery record.
+ */
+function recordFromCatalogRecord(record) {
+	const doc = record.doc || {};
+	return {
+		...record,
+		doc,
+		studio: record.studio || doc.studio || {},
+	};
+}

package/src/pages/_layout/componentRuntimeRecords.js

@@ -0,0 +1,49 @@
+const eagerComponentModules = import.meta.glob([
+	'../components/*/Dom*.vue',
+	'../data/*/Dom*.vue',
+	'../dev/*/Dom*.vue',
+	'../forms/*/Dom*.vue',
+	'../mobile/*/Dom*.vue',
+	'../visual/*/Dom*.vue',
+	'!../components/playground/DomRenderer.vue',
+	'!../components/toast/DomToastItem.vue',
+	'!../forms/_shared/Dom*.vue',
+], { eager: true, import: 'default' });
+
+/**
+ * Returns eager component records for editor surfaces that need real components.
+ *
+ * This module is intentionally separate from componentManager.js so ordinary
+ * routes, navigation, and search can stay metadata-only while the inspector and
+ * related-component docs can still inspect props and render components.
+ *
+ * @returns {Array<object>} Component records with live Vue component objects.
+ */
+export function getRuntimeComponentRecords() {
+	return Object.entries(eagerComponentModules)
+		.map(([path, component]) => recordFromPath(path, component))
+		.filter(Boolean);
+}
+
+/**
+ * Converts an import.meta.glob key into a component discovery record.
+ *
+ * @param {string} path Glob key relative to this layout folder.
+ * @param {object} component Vue component object.
+ * @returns {object|null} Component record, or null for unrecognized paths.
+ */
+function recordFromPath(path, component) {
+	const match = path.match(/^\.\.\/(components|data|dev|forms|mobile|visual)\/([^/]+)\/(Dom[^/]+)\.vue$/);
+	if (!match) return null;
+
+	const [, section, slug, exportName] = match;
+	return {
+		id: `${section}/${slug}`,
+		path,
+		section,
+		slug,
+		exportName,
+		route: `/${section}/${slug}`,
+		component,
+	};
+}