@growth-labs/cms 0.1.0

package/src/ui/icons.tsx

@@ -0,0 +1,208 @@
+/**
+ * Masthead icon set — 1.6px line icons, 18px default.
+ * SVG path data ported from the Broadsheet design (icons.jsx).
+ * All icons use currentColor stroke so theme/accent CSS applies.
+ */
+
+/** Every icon name used across the shell (nav + topbar + site-switcher + palette). */
+export type IconName =
+	// Nav items
+	| 'dashboard'
+	| 'library'
+	| 'calendar'
+	| 'media'
+	| 'chart'
+	| 'users'
+	| 'tag'
+	| 'inbox'
+	| 'share'
+	| 'settings'
+	// Topbar
+	| 'sidebar'
+	| 'search'
+	| 'sun'
+	| 'moon'
+	| 'bell'
+	| 'plus'
+	// SiteSwitcher
+	| 'chevDown'
+	| 'chevRight'
+	| 'chevLeft'
+	// CommandPalette / content types
+	| 'doc'
+	| 'video'
+	// Extended set (ported from design for completeness)
+	| 'mic'
+	| 'mail'
+	| 'image'
+	| 'folder'
+	| 'folderOpen'
+	| 'layers'
+	| 'globe'
+	| 'flag'
+	| 'bolt'
+	| 'seo'
+	| 'star'
+	| 'bookmark'
+	| 'edit'
+	| 'copy'
+	| 'trash'
+	| 'link'
+	| 'filter'
+	| 'grid'
+	| 'rows'
+	| 'columns'
+	| 'dots'
+	| 'arrowUp'
+	| 'arrowRight'
+	| 'play'
+	| 'pause'
+	| 'waveform'
+	| 'x'
+	| 'check'
+	| 'checkCircle'
+	| 'clock'
+	| 'sparkle'
+	| 'wand'
+	| 'eye'
+	| 'desktop'
+	| 'tablet'
+	| 'mobile'
+	| 'history'
+	| 'upload'
+	| 'download'
+	| 'refresh'
+	| 'target'
+	| 'pin'
+	| 'command'
+
+/** SVG path data keyed by icon name. */
+export const ICON_PATHS: Record<IconName, string> = {
+	dashboard: 'M3 3h7v7H3zM14 3h7v4h-7zM14 10h7v11h-7zM3 13h7v8H3z',
+	library: 'M4 4h16v4H4zM4 11h16M4 16h16M4 8v12M20 8v12',
+	doc: 'M6 2h8l4 4v16H6zM14 2v4h4',
+	video: 'M3 5h13v14H3zM16 9l5-3v12l-5-3z',
+	mic: 'M12 3a3 3 0 0 1 3 3v5a3 3 0 0 1-6 0V6a3 3 0 0 1 3-3zM6 11a6 6 0 0 0 12 0M12 17v4M9 21h6',
+	mail: 'M3 5h18v14H3zM3 6l9 7 9-7',
+	calendar: 'M4 5h16v16H4zM4 9h16M8 3v4M16 3v4M8 13h2M14 13h2M8 17h2',
+	media: 'M3 4h18v16H3zM3 15l5-5 4 4 3-3 6 6M9 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z',
+	chart: 'M4 20V10M10 20V4M16 20v-6M22 20H2',
+	users:
+		'M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM2 21a7 7 0 0 1 14 0M17 11a3 3 0 0 0 0-6M18 21a6 6 0 0 0-3-5.2',
+	tag: 'M3 3h8l10 10-8 8L3 11zM7.5 7.5h.01',
+	folder: 'M3 6h6l2 2h10v12H3zM3 6v14',
+	settings:
+		'M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6zM19.4 13a7.5 7.5 0 0 0 0-2l2-1.5-2-3.4-2.3 1a7.5 7.5 0 0 0-1.7-1l-.3-2.6h-4l-.3 2.6a7.5 7.5 0 0 0-1.7 1l-2.3-1-2 3.4L4.6 11a7.5 7.5 0 0 0 0 2l-2 1.5 2 3.4 2.3-1a7.5 7.5 0 0 0 1.7 1l.3 2.6h4l.3-2.6a7.5 7.5 0 0 0 1.7-1l2.3 1 2-3.4z',
+	plus: 'M12 5v14M5 12h14',
+	search: 'M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4',
+	bell: 'M18 9a6 6 0 0 0-12 0c0 7-3 8-3 8h18s-3-1-3-8M13.7 21a2 2 0 0 1-3.4 0',
+	chevDown: 'M6 9l6 6 6-6',
+	chevRight: 'M9 6l6 6-6 6',
+	chevLeft: 'M15 6l-6 6 6 6',
+	sidebar: 'M3 4h18v16H3zM9 4v16',
+	eye: 'M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12zM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z',
+	desktop: 'M3 4h18v12H3zM8 20h8M12 16v4',
+	tablet: 'M6 3h12v18H6zM11 18h2',
+	mobile: 'M8 3h8v18H8zM11 18h2',
+	sun: 'M12 7a5 5 0 1 0 0 10 5 5 0 0 0 0-10zM12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4',
+	moon: 'M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z',
+	check: 'M5 12l5 5L20 6',
+	checkCircle: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM8 12l3 3 5-5',
+	clock: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 7v5l3 2',
+	sparkle:
+		'M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8zM5 4l.7 2 .8-2-.8.6zM19 17l.7 2 .8-2-.8.6z',
+	wand: 'M5 19l9-9M14 6l1.5-1.5M17 9l2-2M8.5 4.5L9 3M3 11l1.5.5M15 4l2 7 5 2-5 2-2 5-2-5-5-2 5-2z',
+	image: 'M3 4h18v16H3zM3 16l5-5 4 4 3-3 6 6M8.5 9a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z',
+	link: 'M9 15l6-6M10 6l1-1a4 4 0 0 1 6 6l-1 1M14 18l-1 1a4 4 0 0 1-6-6l1-1',
+	trash: 'M4 6h16M9 6V4h6v2M6 6l1 14h10l1-14M10 10v6M14 10v6',
+	history: 'M3 12a9 9 0 1 0 3-6.7L3 8M3 4v4h4M12 8v4l3 2',
+	upload: 'M12 16V4M7 9l5-5 5 5M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3',
+	download: 'M12 4v12M7 11l5 5 5-5M4 20h16',
+	filter: 'M3 5h18l-7 8v5l-4 2v-7z',
+	grid: 'M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z',
+	rows: 'M3 5h18M3 12h18M3 19h18',
+	columns: 'M4 4h16v16H4zM10 4v16M16 4v16',
+	globe:
+		'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20',
+	flag: 'M5 21V4M5 4h11l-1.5 4L16 12H5',
+	bolt: 'M13 2L4 14h7l-1 8 9-12h-7z',
+	seo: 'M11 4a7 7 0 1 0 0 14 7 7 0 0 0 0-14zM20 20l-4-4M8 11h6M11 8v6',
+	layers: 'M12 3l9 5-9 5-9-5zM3 13l9 5 9-5M3 17l9 5 9-5',
+	share:
+		'M16 6a3 3 0 1 0 0-.1zM8 12a3 3 0 1 0 0 .1zM16 18a3 3 0 1 0 0 .1zM10.5 10.5l5-3M10.5 13.5l5 3',
+	dots: 'M12 6a1 1 0 1 0 0-.1zM12 12a1 1 0 1 0 0-.1zM12 18a1 1 0 1 0 0-.1z',
+	arrowUp: 'M12 19V5M6 11l6-6 6 6',
+	arrowRight: 'M5 12h14M13 6l6 6-6 6',
+	play: 'M7 4l13 8-13 8z',
+	pause: 'M8 4h3v16H8zM13 4h3v16h-3z',
+	waveform: 'M3 12h2M7 8v8M11 4v16M15 7v10M19 10v4M22 12h-1',
+	x: 'M6 6l12 12M18 6L6 18',
+	bookmark: 'M6 3h12v18l-6-4-6 4z',
+	edit: 'M4 20h4L19 9l-4-4L4 16zM14 6l4 4',
+	copy: 'M9 9h11v11H9zM5 15H4V4h11v1',
+	star: 'M12 3l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 18l-5.9 3 1.2-6.5L2.5 9.9 9 9z',
+	folderOpen: 'M3 7h6l2 2h10M3 7v13h18l-2-9H7z',
+	command: 'M9 6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3z',
+	inbox: 'M3 13h5l2 3h4l2-3h5M3 13l3-9h12l3 9v7H3z',
+	target:
+		'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20zM12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM12 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2z',
+	pin: 'M12 21s7-6.5 7-12a7 7 0 1 0-14 0c0 5.5 7 12 7 12zM12 11a2 2 0 1 0 0-4 2 2 0 0 0 0 4z',
+	refresh: 'M3 12a9 9 0 0 1 15-6.7L21 8M21 3v5h-5M21 12a9 9 0 0 1-15 6.7L3 16M3 21v-5h5',
+}
+
+export interface IconProps {
+	name: IconName
+	size?: number
+	stroke?: number
+	className?: string
+	style?: React.CSSProperties
+}
+
+/**
+ * Renders an inline SVG line icon from the Broadsheet design set.
+ * Uses currentColor stroke so it inherits text/accent colour from CSS.
+ * Defaults: 18px, 1.6px stroke, round caps/joins, aria-hidden.
+ */
+export function Icon({ name, size = 18, stroke = 1.6, className, style }: IconProps) {
+	const d = ICON_PATHS[name] ?? ICON_PATHS.doc
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			strokeWidth={stroke}
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			aria-hidden="true"
+			className={className}
+			style={style}
+		>
+			<path d={d} />
+		</svg>
+	)
+}
+
+/**
+ * Broadsheet logo mark — folded masthead glyph from the design.
+ * Uses explicit colour (defaults to currentColor) so it works on
+ * any background without inheriting the wrong fill.
+ */
+export function BrandMark({
+	size = 18,
+	color = 'currentColor',
+}: {
+	size?: number
+	color?: string
+}) {
+	return (
+		<svg width={size} height={size} viewBox="0 0 24 24" fill="none" aria-hidden="true">
+			<path d="M5 4h14v3H5z" fill={color} />
+			<path d="M5 9.5h9" stroke={color} strokeWidth={1.7} strokeLinecap="round" />
+			<path d="M5 13h9" stroke={color} strokeWidth={1.7} strokeLinecap="round" />
+			<path d="M5 16.5h6" stroke={color} strokeWidth={1.7} strokeLinecap="round" />
+			<path d="M16.5 9.5H19V20l-1.25-1L16.5 20z" fill={color} opacity={0.9} />
+		</svg>
+	)
+}

package/src/ui/inspector/Field.tsx

@@ -0,0 +1,30 @@
+// src/ui/inspector/Field.tsx — labeled form field wrapper.
+//
+// Compile-gated (tsc, jsx: react-jsx).
+
+export interface FieldProps {
+	label: string
+	/** htmlFor ties the label to a specific input by id. Supply when the child
+	 * is a single <input>/<select>/<textarea> — required by a11y rules. When
+	 * the field wraps a custom control or a composite widget where no single
+	 * id is appropriate, omit it and add an aria-label on the control itself. */
+	htmlFor?: string
+	help?: string
+	children: React.ReactNode
+}
+
+export function Field({ label, htmlFor, help, children }: FieldProps): React.ReactElement {
+	return (
+		<div style={fieldWrap}>
+			<label htmlFor={htmlFor} className="field-label">
+				{label}
+			</label>
+			{children}
+			{help && <div className="help">{help}</div>}
+		</div>
+	)
+}
+
+const fieldWrap: React.CSSProperties = {
+	marginBottom: 14,
+}