@vit-foundation/ui 0.1.0

package/dist/edit/types.d.ts

@@ -0,0 +1,64 @@
+import type { Locale } from '../config/types.js';
+/**
+ * The stored shape of one localized text column (`jsonb` keyed by locale).
+ * Catalan is canonical and required — the database enforces `content ? 'ca'`
+ * on every localized column, and this type states the same rule to writers.
+ */
+export interface LocalizedText {
+    ca: string;
+    en?: string;
+    es?: string;
+}
+/** One locale's reading of a localized value, falling back to Catalan. */
+export declare function localize(value: LocalizedText, locale: Locale): string;
+/**
+ * The entities whose fields the components can mark editable. Names match
+ * the content tables so an adapter can route a save without a mapping layer.
+ */
+export type EditableEntity = 'weeklies' | 'projects' | 'milestones' | 'team_members' | 'job_openings';
+/**
+ * The identity of one editable string in the content model: either a page
+ * copy block (`page_content` row) or one localized field of a domain entity.
+ */
+export type ContentRef = {
+    kind: 'page-copy';
+    page: string;
+    sectionKey: string;
+} | {
+    kind: 'entity';
+    entity: EditableEntity;
+    id: string | number;
+    field: string;
+};
+/** What a component hands the adapter alongside the new value. */
+export interface EditDescriptor {
+    ref: ContentRef;
+    /** The translation this save writes — one locale per save. */
+    locale: Locale;
+    /**
+     * 'text' commits on Enter and forbids newlines; 'multiline' commits on
+     * Cmd/Ctrl+Enter; 'richtext' is the block mini-format (RichText renders
+     * its own textarea editor for it).
+     */
+    format?: 'text' | 'multiline' | 'richtext';
+    /** Accessible name for the edit control, e.g. "Títol del weekly #12". */
+    label?: string;
+}
+/**
+ * What a consuming app plugs in to make the components writable. The package
+ * never talks to a database: `save` is the whole persistence contract.
+ *
+ * Implementations must:
+ * - back `isEditing` with reactive state (`$state`) — it gates every edit
+ *   affordance live;
+ * - merge `{ [descriptor.locale]: value }` into the stored localized column
+ *   rather than replacing it;
+ * - reject a save that would empty the canonical `ca` value (the database's
+ *   `? 'ca'` check makes that a hard error anyway — fail it politely);
+ * - resolve when persisted, reject on failure (the editor keeps the draft
+ *   and shows the error state).
+ */
+export interface EditAdapter {
+    readonly isEditing: boolean;
+    save(descriptor: EditDescriptor, value: string): Promise<void>;
+}

package/dist/edit/types.js

@@ -0,0 +1,4 @@
+/** One locale's reading of a localized value, falling back to Catalan. */
+export function localize(value, locale) {
+    return value[locale] || value.ca;
+}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export * from './components/ui/index.js';
+export * from './components/layout/index.js';
+export * from './components/weeklies/index.js';
+export * from './components/projects/index.js';
+export * from './components/team/index.js';
+export * from './components/timeline/index.js';
+export * from './components/jobs/index.js';
+export * from './config/index.js';
+export * from './edit/index.js';
+export * from './content/index.js';
+export { formatDate, yearOf } from './utils/dates.js';
+export { MILESTONE_CATEGORY_COLOR, milestoneCategoryLabel } from './utils/milestones.js';
+export { isPathUnder } from './utils/paths.js';

package/dist/index.js

@@ -0,0 +1,17 @@
+// Components, by group.
+export * from './components/ui/index.js';
+export * from './components/layout/index.js';
+export * from './components/weeklies/index.js';
+export * from './components/projects/index.js';
+export * from './components/team/index.js';
+export * from './components/timeline/index.js';
+export * from './components/jobs/index.js';
+// App wiring: configuration context and the edit-mode contract.
+export * from './config/index.js';
+export * from './edit/index.js';
+// Content shapes and the rich-text mini-format.
+export * from './content/index.js';
+// Utilities the components share with their host apps.
+export { formatDate, yearOf } from './utils/dates.js';
+export { MILESTONE_CATEGORY_COLOR, milestoneCategoryLabel } from './utils/milestones.js';
+export { isPathUnder } from './utils/paths.js';

package/dist/styles/base.css

@@ -0,0 +1,67 @@
+/* Utility classes the @vit-foundation/ui components rely on, plus the edit-mode
+ * affordance. Import once next to tokens.css:
+ *
+ *   import '@vit-foundation/ui/tokens.css';
+ *   import '@vit-foundation/ui/base.css';
+ *
+ * An app with its own global stylesheet that already defines these classes
+ * (the foundation website) can keep its copies and skip this file — the
+ * selectors and declarations here are the canonical spellings of the same
+ * rules. */
+
+.visually-hidden {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip-path: inset(50%);
+	white-space: nowrap;
+	border: 0;
+}
+
+/* Centered page band: constrains content width with section padding.
+ * Layout (flex, alignment) stays with the component that adds the class. */
+.band {
+	max-width: var(--content-max);
+	margin: 0 auto;
+	padding: var(--space-5) var(--space-3);
+}
+
+/* Compact variant for bars (site header). */
+.band-bar {
+	max-width: var(--content-max);
+	margin: 0 auto;
+	padding: var(--space-3);
+}
+
+/* Form-control skin: one border token for every input, select, and textarea.
+ * Sizing (padding, widths) stays with the component that adds the class. */
+.control {
+	border: 1px solid var(--color-axis);
+	border-radius: var(--radius);
+	background: var(--color-surface);
+}
+
+/* Edit-mode affordance. Global on purpose: the editable element is rendered
+ * by the consuming component's own markup (Editable hands it attributes
+ * through a snippet), which scoped styles inside Editable can never reach. */
+[data-vit-editing] {
+	outline: 2px dashed var(--color-brand);
+	outline-offset: 3px;
+	border-radius: 2px;
+	cursor: text;
+}
+
+[data-vit-editing]:focus-visible {
+	outline-style: solid;
+}
+
+[data-vit-editing='saving'] {
+	opacity: 0.6;
+}
+
+[data-vit-editing='error'] {
+	outline-color: var(--series-8);
+}

package/dist/styles/tokens.css

@@ -0,0 +1,57 @@
+/* Fundació VIT design tokens. Series slots come from the validated
+ * fv-chart-style palette (light mode) — fixed order, never reassigned. */
+:root {
+	/* Brand & wireframe hues */
+	--color-brand: #0899b1;
+	--color-brand-light: #5ac7d2;
+	--color-navy: #1f2a5e;
+	--color-orange: #eb6834;
+	--color-magenta: #e87ba4;
+	--color-cream: #f6f1e7;
+	--color-band-grey: #ececec;
+
+	/* Ink & surfaces */
+	--color-ink: #101418;
+	--color-ink-secondary: #475259;
+	--color-ink-muted: #7d868c;
+	--color-hairline: #e3e7e9;
+	--color-axis: #c5cbcf;
+	--color-surface: #ffffff;
+
+	/* Dataviz series — validated palette, fixed slot order (1 = brand teal) */
+	--series-1: #0899b1;
+	--series-2: #eb6834;
+	--series-3: #4a3aa7;
+	--series-4: #eda100;
+	--series-5: #e87ba4;
+	--series-6: #008300;
+	--series-7: #2a78d6;
+	--series-8: #e34948;
+
+	/* Typography */
+	--font-sans: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
+	--text-sm: 0.875rem;
+	--text-base: 1rem;
+	--text-lg: 1.25rem;
+	--text-xl: 1.75rem;
+	--text-2xl: 2.25rem;
+	--text-hero: clamp(2.25rem, 5vw, 3.5rem);
+	--leading-tight: 1.15;
+	--leading-body: 1.6;
+
+	/* Spacing */
+	--space-1: 0.25rem;
+	--space-2: 0.5rem;
+	--space-3: 1rem;
+	--space-4: 1.5rem;
+	--space-5: 2.5rem;
+	--space-6: 4rem;
+
+	/* Shape & layout */
+	--radius: 8px;
+	--radius-lg: 16px;
+	--content-max: 1200px;
+
+	/* Motion */
+	--transition-fast: 150ms ease;
+}

package/dist/utils/dates.d.ts

@@ -0,0 +1,14 @@
+import type { Locale } from '../config/types.js';
+/**
+ * Formats an ISO date (`2026-08-30`) or timestamp (`2026-08-29T23:30:00.000Z`)
+ * like "30 ag. 2025".
+ *
+ * The two are different things and are resolved differently. A date-only value
+ * is a calendar day with no instant attached, so it is rendered verbatim and
+ * reads the same everywhere. A timestamp is an instant, and the day it belongs
+ * to is resolved in SITE_TIME_ZONE: a comment posted at 01:30 in Barcelona
+ * belongs to that day, not to the previous one its UTC value spells out.
+ */
+export declare function formatDate(isoValue: string, locale: Locale): string;
+/** Extracts the year of an ISO date without constructing a Date. */
+export declare function yearOf(isoDate: string): string;

package/dist/utils/dates.js

@@ -0,0 +1,34 @@
+/** Explicit BCP 47 tags — never rely on the runtime's default locale (SSR mismatch). */
+const LOCALE_TAG = { ca: 'ca-ES', es: 'es-ES', en: 'en-GB' };
+/**
+ * The foundation's editorial timezone, pinned for the same reason LOCALE_TAG
+ * pins the locale. A timestamp names an instant, and which day that instant
+ * falls on depends on where the reader stands: the server renders in UTC and
+ * the browser in the visitor's own zone, so leaving the day to the runtime
+ * makes one comment show two different dates across hydration.
+ */
+const SITE_TIME_ZONE = 'Europe/Madrid';
+const DATE_ONLY = /^\d{4}-\d{2}-\d{2}$/;
+/**
+ * Formats an ISO date (`2026-08-30`) or timestamp (`2026-08-29T23:30:00.000Z`)
+ * like "30 ag. 2025".
+ *
+ * The two are different things and are resolved differently. A date-only value
+ * is a calendar day with no instant attached, so it is rendered verbatim and
+ * reads the same everywhere. A timestamp is an instant, and the day it belongs
+ * to is resolved in SITE_TIME_ZONE: a comment posted at 01:30 in Barcelona
+ * belongs to that day, not to the previous one its UTC value spells out.
+ */
+export function formatDate(isoValue, locale) {
+    const dateOnly = DATE_ONLY.test(isoValue);
+    return new Intl.DateTimeFormat(LOCALE_TAG[locale], {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+        timeZone: dateOnly ? 'UTC' : SITE_TIME_ZONE
+    }).format(new Date(dateOnly ? `${isoValue}T00:00:00Z` : isoValue));
+}
+/** Extracts the year of an ISO date without constructing a Date. */
+export function yearOf(isoDate) {
+    return isoDate.slice(0, 4);
+}

package/dist/utils/milestones.d.ts

@@ -0,0 +1,11 @@
+import type { UiMessages } from '../config/types.js';
+import type { MilestoneCategory } from '../content/types.js';
+/**
+ * Category → series token, fixed slot order (dataviz rule: slot 1 is brand
+ * teal, slots are never reordered). Labels always accompany the color dot,
+ * so color is never the only encoding. The --series-* tokens ship in
+ * tokens.css.
+ */
+export declare const MILESTONE_CATEGORY_COLOR: Record<MilestoneCategory, string>;
+/** The category's label in the host app's copy. */
+export declare function milestoneCategoryLabel(category: MilestoneCategory, messages: UiMessages): string;

package/dist/utils/milestones.js

@@ -0,0 +1,28 @@
+/**
+ * Category → series token, fixed slot order (dataviz rule: slot 1 is brand
+ * teal, slots are never reordered). Labels always accompany the color dot,
+ * so color is never the only encoding. The --series-* tokens ship in
+ * tokens.css.
+ */
+export const MILESTONE_CATEGORY_COLOR = {
+    foundation: 'var(--series-1)',
+    lab: 'var(--series-2)',
+    education: 'var(--series-3)',
+    collaboration: 'var(--series-4)',
+    press: 'var(--series-5)'
+};
+/** The category's label in the host app's copy. */
+export function milestoneCategoryLabel(category, messages) {
+    switch (category) {
+        case 'education':
+            return messages.category_education();
+        case 'lab':
+            return messages.category_lab();
+        case 'foundation':
+            return messages.category_foundation();
+        case 'collaboration':
+            return messages.category_collaboration();
+        case 'press':
+            return messages.category_press();
+    }
+}

package/dist/utils/paths.d.ts

@@ -0,0 +1,2 @@
+/** Prefix match over a URL pathname: '/what-we-do' covers '/what-we-do/<slug>'. */
+export declare function isPathUnder(pathname: string, prefix: string): boolean;

package/dist/utils/paths.js

@@ -0,0 +1,4 @@
+/** Prefix match over a URL pathname: '/what-we-do' covers '/what-we-do/<slug>'. */
+export function isPathUnder(pathname, prefix) {
+    return pathname === prefix || pathname.startsWith(`${prefix}/`);
+}

package/package.json

@@ -0,0 +1,139 @@
+{
+	"name": "@vit-foundation/ui",
+	"version": "0.1.0",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"test:unit": "vitest",
+		"test": "npm run test:unit -- --run && npm run test:e2e",
+		"test:e2e": "playwright test",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*",
+		"!dist/fixtures.*",
+		"!dist/**/stories/**",
+		"!dist/**/tests/**",
+		"!dist/testing/**"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./ui": {
+			"types": "./dist/components/ui/index.d.ts",
+			"svelte": "./dist/components/ui/index.js",
+			"default": "./dist/components/ui/index.js"
+		},
+		"./layout": {
+			"types": "./dist/components/layout/index.d.ts",
+			"svelte": "./dist/components/layout/index.js",
+			"default": "./dist/components/layout/index.js"
+		},
+		"./weeklies": {
+			"types": "./dist/components/weeklies/index.d.ts",
+			"svelte": "./dist/components/weeklies/index.js",
+			"default": "./dist/components/weeklies/index.js"
+		},
+		"./projects": {
+			"types": "./dist/components/projects/index.d.ts",
+			"svelte": "./dist/components/projects/index.js",
+			"default": "./dist/components/projects/index.js"
+		},
+		"./team": {
+			"types": "./dist/components/team/index.d.ts",
+			"svelte": "./dist/components/team/index.js",
+			"default": "./dist/components/team/index.js"
+		},
+		"./timeline": {
+			"types": "./dist/components/timeline/index.d.ts",
+			"svelte": "./dist/components/timeline/index.js",
+			"default": "./dist/components/timeline/index.js"
+		},
+		"./jobs": {
+			"types": "./dist/components/jobs/index.d.ts",
+			"svelte": "./dist/components/jobs/index.js",
+			"default": "./dist/components/jobs/index.js"
+		},
+		"./edit": {
+			"types": "./dist/edit/index.d.ts",
+			"svelte": "./dist/edit/index.js",
+			"default": "./dist/edit/index.js"
+		},
+		"./config": {
+			"types": "./dist/config/index.d.ts",
+			"svelte": "./dist/config/index.js",
+			"default": "./dist/config/index.js"
+		},
+		"./tokens.css": "./dist/styles/tokens.css",
+		"./base.css": "./dist/styles/base.css"
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@chromatic-com/storybook": "^4.1.2",
+		"@eslint/compat": "^1.4.0",
+		"@eslint/js": "^9.38.0",
+		"@playwright/test": "^1.56.1",
+		"@storybook/addon-a11y": "^10.5.10",
+		"@storybook/addon-docs": "^10.5.10",
+		"@storybook/addon-svelte-csf": "^5.1.2",
+		"@storybook/addon-vitest": "^10.5.10",
+		"@storybook/sveltekit": "^10.5.10",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.47.1",
+		"@sveltejs/package": "^2.5.4",
+		"@sveltejs/vite-plugin-svelte": "^6.2.1",
+		"@types/node": "^22",
+		"@vitest/browser-playwright": "^4.0.5",
+		"eslint": "^9.38.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-storybook": "^10.0.7",
+		"eslint-plugin-svelte": "^3.12.4",
+		"globals": "^16.4.0",
+		"playwright": "^1.56.1",
+		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
+		"publint": "^0.3.14",
+		"storybook": "^10.5.10",
+		"svelte": "^5.57.0",
+		"svelte-check": "^4.6.0",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.46.1",
+		"vite": "^7.1.10",
+		"vite-plugin-devtools-json": "^1.0.0",
+		"vitest": "^4.0.5",
+		"vitest-browser-svelte": "^2.0.1"
+	},
+	"keywords": [
+		"svelte"
+	],
+	"license": "MIT",
+	"description": "Fundaci\u00f3 VIT's shared Svelte 5 component library with pluggable edit mode",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/fndvit/VizVit-UI.git"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}