kmcom-nuxt-layers 2.2.8 → 2.2.10

package/layers/feeds/public/feed/style.css

@@ -0,0 +1,256 @@
+/* XSLT feed page stylesheet
+ * Served at /feed/style.css — referenced from the RSS <?xml-stylesheet?> PI.
+ * Uses Nuxt UI v4 CSS custom property naming conventions with light/dark fallbacks.
+ * Variables are resolved from the Nuxt UI theme when the stylesheet is loaded from the same
+ * origin; otherwise the fallbacks provide sensible standalone defaults.
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+:root {
+  --feed-bg: var(--ui-bg, #ffffff);
+  --feed-bg-elevated: var(--ui-bg-elevated, #f8fafc);
+  --feed-bg-accented: var(--ui-bg-accented, #f1f5f9);
+  --feed-border: var(--ui-border, #e2e8f0);
+  --feed-text: var(--ui-text, #0f172a);
+  --feed-text-muted: var(--ui-text-muted, #64748b);
+  --feed-text-toned: var(--ui-text-toned, #475569);
+  --feed-primary: var(--ui-color-primary-500, oklch(62.3% 0.214 259.5));
+  --feed-primary-text: var(--ui-color-primary-600, oklch(54.6% 0.214 259.5));
+  --feed-primary-bg: var(--ui-color-primary-50, oklch(97% 0.03 259.5));
+  --feed-radius: var(--ui-radius, 0.375rem);
+  --feed-font: var(--font-sans, ui-sans-serif, system-ui, -apple-system, sans-serif);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --feed-bg: var(--ui-bg, #020617);
+    --feed-bg-elevated: var(--ui-bg-elevated, #0f172a);
+    --feed-bg-accented: var(--ui-bg-accented, #1e293b);
+    --feed-border: var(--ui-border, #1e293b);
+    --feed-text: var(--ui-text, #f8fafc);
+    --feed-text-muted: var(--ui-text-muted, #94a3b8);
+    --feed-text-toned: var(--ui-text-toned, #cbd5e1);
+    --feed-primary: var(--ui-color-primary-400, oklch(71% 0.18 259.5));
+    --feed-primary-text: var(--ui-color-primary-400, oklch(71% 0.18 259.5));
+    --feed-primary-bg: var(--ui-color-primary-950, oklch(22% 0.06 259.5));
+  }
+}
+
+html {
+  color-scheme: light dark;
+}
+
+body {
+  margin: 0;
+  background-color: var(--feed-bg);
+  padding: 0;
+  color: var(--feed-text);
+  font-size: 1rem;
+  line-height: 1.6;
+  font-family: var(--feed-font);
+  -webkit-font-smoothing: antialiased;
+}
+
+a {
+  color: var(--feed-primary-text);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+/* ─── Layout ─────────────────────────────────────────────────────────────── */
+
+.feed-container {
+  margin: 0 auto;
+  padding: 0 1.5rem 5rem;
+  max-width: 52rem;
+}
+
+/* ─── Header ─────────────────────────────────────────────────────────────── */
+
+.feed-header {
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid var(--feed-border);
+  padding: 5rem 0 4.5rem;
+}
+
+.feed-eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 1rem;
+  border-radius: 9999px;
+  background-color: var(--feed-primary-bg);
+  padding: 0.25rem 0.625rem;
+  color: var(--feed-primary-text);
+  font-weight: 600;
+  font-size: 0.6875rem;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+
+.feed-eyebrow svg {
+  flex-shrink: 0;
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.feed-title {
+  margin: 0 0 0.5rem;
+  color: var(--feed-text);
+  font-weight: 700;
+  font-size: 1.875rem;
+  line-height: 1.2;
+  letter-spacing: -0.025em;
+}
+
+.feed-title a {
+  color: inherit;
+}
+
+.feed-title a:hover {
+  opacity: 0.8;
+  text-decoration: none;
+}
+
+.feed-description {
+  margin: 0 0 1.25rem;
+  max-width: 38rem;
+  color: var(--feed-text-muted);
+  font-size: 1rem;
+}
+
+.feed-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1rem;
+  color: var(--feed-text-muted);
+  font-size: 0.8125rem;
+}
+
+.feed-meta-link {
+  color: var(--feed-primary-text);
+  font-weight: 500;
+}
+
+.feed-header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  margin-top: 1.5rem;
+}
+
+.feed-subscribe {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.4375rem;
+  transition: opacity 0.15s ease;
+  cursor: pointer;
+  border-radius: var(--feed-radius);
+  background-color: var(--feed-primary);
+  padding: 0.5rem 1.125rem;
+  color: #ffffff;
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1;
+  text-decoration: none;
+}
+
+.feed-subscribe:hover {
+  opacity: 0.85;
+  color: #ffffff;
+  text-decoration: none;
+}
+
+.feed-subscribe svg {
+  flex-shrink: 0;
+  width: 0.9375rem;
+  height: 0.9375rem;
+}
+
+/* ─── Items ──────────────────────────────────────────────────────────────── */
+
+.feed-items {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.feed-item {
+  border-bottom: 1px solid var(--feed-border);
+  padding: 1.5rem 0;
+}
+
+.feed-item:last-child {
+  border-bottom: none;
+}
+
+.feed-item-title {
+  margin: 0 0 0.375rem;
+  font-weight: 600;
+  font-size: 1.0625rem;
+  line-height: 1.4;
+  letter-spacing: -0.01em;
+}
+
+.feed-item-title a {
+  color: var(--feed-text);
+}
+
+.feed-item-title a:hover {
+  color: var(--feed-primary-text);
+  text-decoration: none;
+}
+
+.feed-item-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.4rem;
+  margin-bottom: 0.625rem;
+  color: var(--feed-text-muted);
+  font-size: 0.8125rem;
+}
+
+.feed-item-separator {
+  opacity: 0.4;
+}
+
+.feed-item-description {
+  display: -webkit-box;
+  margin: 0;
+  -webkit-line-clamp: 3;
+  color: var(--feed-text-toned);
+  font-size: 0.9375rem;
+  line-height: 1.6;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.feed-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-top: 0.75rem;
+}
+
+.feed-tag {
+  border: 1px solid var(--feed-border);
+  border-radius: 9999px;
+  background-color: var(--feed-bg-accented);
+  padding: 0.125rem 0.5rem;
+  color: var(--feed-text-muted);
+  font-weight: 500;
+  font-size: 0.75rem;
+}

package/layers/shader/app/types/tsl.ts

@@ -1,11 +1,39 @@
-import type { Node } from 'three/webgpu'
+/**
+ * TSL Node types
+ *
+ * These are intentionally `any`. The Three.js TSL type system wraps every node in
+ * `ShaderNodeObject<T>` (from `three/tsl`) which adds method chaining (.add, .mul, etc.),
+ * but that type is only accessible via a deep import path and is not stable across
+ * Three.js minor versions. Components also access `.value` directly on uniform nodes
+ * (which are `UniformNode<T>`, a subclass of Node), so a simple `Node` alias would break them.
+ *
+ * TODO: Replace with `ShaderNodeObject<Node>` once three/tsl exports stabilise and
+ * uniform nodes are properly typed as `FloatUniform` at their use sites.
+ */
 
-export type TSLNode = Node
-export type TSLVec3 = Node<'vec3'>
-export type TSLVec4 = Node<'vec4'>
-export type TSLColor = Node<'color'>
-export type TSLMat3 = Node<'mat3'>
-export type TSLMat4 = Node<'mat4'>
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TSLNode = any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TSLFloat = any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TSLVec2 = any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TSLVec3 = any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TSLVec4 = any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TSLColor = any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TSLMat3 = any
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type TSLMat4 = any
 
 export type GradientStop = {
   position: number
@@ -19,3 +47,9 @@ export type FBMOptions = {
   amplitude?: number
   frequency?: number
 }
+
+export type VoronoiResult = {
+  distance: TSLFloat
+  cellCenter: TSLVec2
+  edgeDistance: TSLFloat
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kmcom-nuxt-layers",
   "private": false,
-  "version": "2.2.8",
+  "version": "2.2.10",
   "description": "Composable Nuxt 4 layers for building scalable Vue applications",
   "exports": {
     "./layers/core": "./layers/core/nuxt.config.ts",
@@ -33,7 +33,9 @@
     "layers/*/tsconfig.json",
     "layers/*/tailwind.config.*",
     "layers/*/app/**",
+    "layers/*/public/**",
     "layers/*/server/**",
+    "types/**",
     "docs/"
   ],
   "repository": {

package/types/events.ts

@@ -0,0 +1,17 @@
+/** @consumers motion, core */
+export interface ScrollLockEvent {
+  locked: boolean
+  /** Which layer/component emitted this event */
+  source: string
+}
+
+/** @consumers core */
+export interface LoadingStateEvent {
+  loading: boolean
+  id?: string
+}
+
+/** @consumers core, motion */
+export type LayerEvent =
+  | { type: 'scroll:lock'; payload: ScrollLockEvent }
+  | { type: 'loading:state'; payload: LoadingStateEvent }

package/types/index.ts

@@ -0,0 +1,19 @@
+export type {
+  ColourMode,
+  ContrastLevel,
+  MotionPreference,
+  TransparencyPreference,
+  AccentColor,
+  ThemeState,
+  ThemeTokens,
+  ColorUsage,
+  UiColors,
+  UiSemanticColor,
+  UiStatusColor,
+  UiDefaultNuxtUiColors,
+  UiCustomColors,
+  UiBaseColor,
+} from './theme'
+export type { ScrollLockEvent, LoadingStateEvent, LayerEvent } from './events'
+export type { MotionConfig, TransitionConfig } from './motion'
+export type { PublicRuntimeConfig } from './runtime'

package/types/motion.ts

@@ -0,0 +1,14 @@
+/** @consumers motion, layout, shader */
+export interface MotionConfig {
+  duration: number
+  ease: string
+  delay?: number
+}
+
+/** @consumers motion, layout */
+export interface TransitionConfig extends MotionConfig {
+  enterFrom?: Record<string, string | number>
+  enterTo?: Record<string, string | number>
+  leaveFrom?: Record<string, string | number>
+  leaveTo?: Record<string, string | number>
+}

package/types/runtime.ts

@@ -0,0 +1,5 @@
+/** @consumers core */
+export interface PublicRuntimeConfig {
+  /** Base URL for API requests */
+  apiBase: string
+}

package/types/theme.ts

@@ -0,0 +1,60 @@
+/** @consumers ui, layout, motion, shader, theme */
+export type ColourMode = 'light' | 'dark' | 'system'
+
+/** @consumers theme, ui */
+export type ContrastLevel = 'standard' | 'high'
+
+/** @consumers motion, layout, theme */
+export type MotionPreference = 'full' | 'reduced' | 'none'
+
+/** @consumers theme, ui */
+export type TransparencyPreference = 'full' | 'reduced' | 'none'
+
+/** @consumers theme, visual, typography */
+export type AccentColor =
+  | 'red'
+  | 'orange'
+  | 'amber'
+  | 'yellow'
+  | 'lime'
+  | 'green'
+  | 'emerald'
+  | 'teal'
+  | 'cyan'
+  | 'sky'
+  | 'blue'
+  | 'indigo'
+  | 'violet'
+  | 'purple'
+  | 'fuchsia'
+  | 'pink'
+  | 'rose'
+
+/** @consumers theme, visual */
+export interface ThemeState {
+  mode: ColourMode
+  palette: string
+  contrast: ContrastLevel
+  motion: MotionPreference
+  transparency: TransparencyPreference
+}
+
+/** @consumers theme, ui */
+export interface ThemeTokens {
+  [key: string]: string
+}
+
+// UI semantic colour types (shared with typography and visual layers)
+/** @consumers typography, visual, ui */
+export type ColorUsage = 'text' | 'bg' | 'border'
+export type UiSemanticColor = 'dimmed' | 'muted' | 'toned' | 'default' | 'highlighted' | 'inverted'
+export type UiStatusColor = 'info' | 'success' | 'warning' | 'error'
+export type UiDefaultNuxtUiColors = 'primary' | 'neutral'
+export type UiCustomColors = 'secondary' | 'accent'
+export type UiBaseColor = 'black' | 'white'
+export type UiColors =
+  | UiSemanticColor
+  | UiStatusColor
+  | UiDefaultNuxtUiColors
+  | UiCustomColors
+  | UiBaseColor