moulify 0.0.1 → 0.0.2

package/README.md

@@ -87,16 +87,37 @@ Module options are available under the `moulify` key in your `nuxt.config`:
 interface ModuleOptions {
   prefix?: string
   colors?: {
-    primary?: string
-    secondary?: string
-    tertiary?: string
+    primary?: string | ColorPalette
+    secondary?: string | ColorPalette
+    tertiary?: string | ColorPalette
   }
 }
+
+// Full palette (all shades from 50 to 900)
+interface ColorPalette {
+  50: string
+  100: string
+  200: string
+  300: string
+  400: string
+  500: string
+  600: string
+  700: string
+  800: string
+  900: string
+}
 ```
 
 - `prefix` (default: `'moulify'`): controls the tag names of auto-imported components.
   - For example, with `prefix: 'nc'` you will use `<nc-button>` instead of `<moulify-button>`.
-- `colors`: simple color tokens you can use in your own styling or future theme extensions.
+- `colors`: primary, secondary, and tertiary can be:
+  - **A hex string** (e.g. `'#0076ff'`): a full palette with shades 50, 100, 200, … 900 is generated automatically (500 = your base color).
+  - **A full palette object**: provide your own `{ 50: '#…', 100: '#…', …, 900: '#…' }` for full control.
+
+The resolved palettes are exposed as **CSS custom properties** on `:root` and via **runtime config**:
+
+- **CSS variables**: `--moulify-primary-50` … `--moulify-primary-900`, and the same for `--moulify-secondary-*` and `--moulify-tertiary-*`. Use them in your styles, e.g. `background: var(--moulify-primary-500);`.
+- **In app**: `useRuntimeConfig().public.moulify.colors` and the plugin provides `$moulifyColors` (e.g. `const { $moulifyColors } = useNuxtApp()`).
 
 ## Components
 

package/dist/chunks/package.mjs

@@ -1,3 +1,3 @@
-const version = "0.0.1";
+const version = "0.0.2";
 
 export { version };

package/dist/module.d.mts

@@ -1,50 +1,81 @@
-import * as _nuxt_schema from '@nuxt/schema';
+import * as nuxt_schema from 'nuxt/schema';
 
+/**
+ * Global types for the Moulify Nuxt module (module options, runtime config, colors).
+ * Component-level types live in each component's folder (e.g. Button/types.ts).
+ */
 interface ModuleOptions {
     /**
-     * Prefix used for auto-registered components.
+     * Colors used for the module. Each of primary, secondary, and tertiary can be:
+     * - A hex string (e.g. '#0076ff'): a full palette (50, 100, … 900) is generated from it.
+     * - A full palette object with keys 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.
      *
      * Example:
-     * - prefix: 'nc'    -> <nc-button>, <nc-header>
-     * - prefix: 'moulify' (default) -> <moulify-button>, <moulify-header>
-     */
-    prefix?: string;
-    /**
-     * Colors used for the module.
-     *
-     * Example:
-     * - colors: { primary: '#000', secondary: '#fff', tertiary: '#000' }
-     * - colors: { primary: '#000', secondary: '#fff', tertiary: '#000' }
+     * - colors: { primary: '#0076ff', secondary: '#000', tertiary: '#888' }
+     * - colors: { primary: { 50: '#eff6ff', 100: '#dbeafe', ..., 900: '#1e3a8a' } }
      */
     colors?: MoulifyModuleColors;
-}
-interface MoulifyModuleColors {
     /**
-     * Primary color used for the module.
-     *
-     * Example:
-     * - primary: '#000'
-     * - primary: '#000'
+     * Social links: optional URLs per platform (twitter, github, instagram, facebook, x).
      */
-    primary?: string;
+    socialLinks?: Partial<Record<'twitter' | 'github' | 'instagram' | 'facebook' | 'x', string>>;
     /**
-     * Secondary color used for the module.
-     *
-     * Example:
-     * - secondary: '#fff'
-     * - secondary: '#fff'
+     * Header navigation: left, center, and right link groups.
      */
-    secondary?: string;
+    header?: {
+        left?: Array<{
+            name: string;
+            url: string;
+        }>;
+        center?: Array<{
+            name: string;
+            url: string;
+        }>;
+        right?: Array<{
+            name: string;
+            url: string;
+        }>;
+    };
     /**
-     * Tertiary color used for the module.
-     *
-     * Example:
-     * - tertiary: '#000'
-     * - tertiary: '#000'
+     * Footer config: copyright text and optional links.
      */
-    tertiary?: string;
+    footer?: {
+        copyrightText?: string;
+        hasLinks?: Array<{
+            name: string;
+            url: string;
+        }>;
+    };
+}
+/**
+ * A color palette with shades from 50 (lightest) to 900 (darkest).
+ * 500 is typically the base color.
+ */
+interface ColorPalette {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+}
+/**
+ * Config for a single color: either a base hex (palette auto-generated) or a full palette.
+ */
+type ColorConfig = string | ColorPalette;
+interface MoulifyModuleColors {
+    /** Primary color: hex string or full palette (50–900). */
+    primary?: ColorConfig;
+    /** Secondary color: hex string or full palette (50–900). */
+    secondary?: ColorConfig;
+    /** Tertiary color: hex string or full palette (50–900). */
+    tertiary?: ColorConfig;
 }
 
-declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
+declare const _default: nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
 export { _default as default };

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "moulify",
   "configKey": "moulify",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -1,5 +1,121 @@
 import { defineNuxtModule, createResolver, addPlugin, addComponentsDir } from '@nuxt/kit';
 
+const PALETTE_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+const hexToRgb = (hex) => {
+  const match = hex.replace(/^#/, "").match(/^(?:([a-f\d])([a-f\d])([a-f\d])|([a-f\d]{2})([a-f\d]{2})([a-f\d]{2}))$/i);
+  if (!match) {
+    return null;
+  }
+  const [_, r1, g1, b1, r2, g2, b2] = match;
+  if (r2 !== void 0) {
+    return {
+      r: Number.parseInt(r2, 16),
+      g: Number.parseInt(g2, 16),
+      b: Number.parseInt(b2, 16)
+    };
+  }
+  return {
+    r: Number.parseInt(r1 + r1, 16),
+    g: Number.parseInt(g1 + g1, 16),
+    b: Number.parseInt(b1 + b1, 16)
+  };
+};
+const rgbToHsl = (r, g, b) => {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  const l = (max + min) / 2;
+  if (max !== min) {
+    const d = max - min;
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+    switch (max) {
+      case r:
+        h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+        break;
+      case g:
+        h = ((b - r) / d + 2) / 6;
+        break;
+      case b:
+        h = ((r - g) / d + 4) / 6;
+        break;
+    }
+  }
+  return {
+    h: Math.round(h * 360),
+    s: Math.round(s * 100),
+    l: Math.round(l * 100)
+  };
+};
+const hslToHex = (h, s, l) => {
+  s /= 100;
+  l /= 100;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n) => {
+    const k = (n + h / 30) % 12;
+    const x = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+    return Math.round(255 * x).toString(16).padStart(2, "0");
+  };
+  return `#${f(0)}${f(8)}${f(4)}`;
+};
+const SHADE_LIGHTNESS = {
+  50: 97,
+  100: 94,
+  200: 89,
+  300: 80,
+  400: 71,
+  500: 62,
+  // base — replaced by input
+  600: 53,
+  700: 45,
+  800: 37,
+  900: 26
+};
+const generateColorPalette = (baseHex) => {
+  const rgb = hexToRgb(baseHex.trim());
+  if (!rgb) {
+    return PALETTE_SHADES.reduce(
+      (acc, shade) => {
+        const l = SHADE_LIGHTNESS[shade];
+        acc[shade] = hslToHex(0, 0, l);
+        return acc;
+      },
+      {}
+    );
+  }
+  const { h, s, l: baseL } = rgbToHsl(rgb.r, rgb.g, rgb.b);
+  const scale = baseL / SHADE_LIGHTNESS[500];
+  const palette = {};
+  for (const shade of PALETTE_SHADES) {
+    let targetL;
+    if (shade === 500) {
+      targetL = baseL;
+    } else {
+      targetL = Math.round(SHADE_LIGHTNESS[shade] * scale);
+      targetL = Math.max(1, Math.min(99, targetL));
+    }
+    const saturation = s;
+    palette[shade] = hslToHex(h, saturation, targetL);
+  }
+  return palette;
+};
+const normalizeToPalette = (value) => {
+  if (value === void 0 || value === null) {
+    return void 0;
+  }
+  if (typeof value === "string") {
+    return generateColorPalette(value);
+  }
+  const keys = Object.keys(value);
+  if (keys.includes("50") && keys.includes("500") && keys.includes("900")) {
+    return value;
+  }
+  return void 0;
+};
+
 const versionFromPackageJson = (await import('./chunks/package.mjs')).version;
 const module$1 = defineNuxtModule({
   meta: {
@@ -8,7 +124,6 @@ const module$1 = defineNuxtModule({
     version: versionFromPackageJson
   },
   defaults: {
-    prefix: "moulify",
     colors: {
       primary: "#0076ff",
       // little element plus default blue
@@ -18,16 +133,35 @@ const module$1 = defineNuxtModule({
       // grey
     }
   },
-  setup(options, _nuxt) {
+  setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
+    const resolvedColors = {
+      primary: normalizeToPalette(options.colors?.primary),
+      secondary: normalizeToPalette(options.colors?.secondary),
+      tertiary: normalizeToPalette(options.colors?.tertiary)
+    };
+    const existingMoulify = nuxt.options.runtimeConfig.public?.moulify;
+    const publicMoulify = {
+      ...existingMoulify,
+      colors: resolvedColors,
+      socialLinks: options.socialLinks ?? existingMoulify?.socialLinks,
+      header: options.header ?? existingMoulify?.header,
+      footer: options.footer ?? existingMoulify?.footer
+    };
+    nuxt.options.runtimeConfig.public = {
+      ...nuxt.options.runtimeConfig.public,
+      moulify: publicMoulify
+    };
     addPlugin(resolver.resolve("./runtime/plugin"));
+    nuxt.options.css = nuxt.options.css ?? [];
+    nuxt.options.css.push(resolver.resolve("./assets/generated/fonts/icons.css"));
     addComponentsDir({
       // points to src/runtime/app/components
       path: resolver.resolve("runtime/app/components"),
       // optional: control naming
       pathPrefix: false,
       // prefix controls auto-imported component names, e.g. <nc-button>, <moulify-button>
-      prefix: options.prefix,
+      prefix: "moulify",
       // optional: restrict to .vue files (types.ts will be ignored anyway)
       extensions: [".vue"]
     });

package/dist/runtime/app/components/Button/index.d.vue.ts

@@ -6,6 +6,8 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
     iconLeft: import("../../../../assets/generated/fonts/icons.js").IconsId;
     iconRight: import("../../../../assets/generated/fonts/icons.js").IconsId;
+    size: import("./types.js").ButtonSize;
+    variant: import("./types.js").ButtonVariant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/components/Button/index.vue

@@ -1,5 +1,6 @@
 <template>
-  <button class="moulify-btn">
+  <button type="button" class="moulify-btn"
+    :class="[`moulify-btn--${effectiveSize}`, `moulify-btn--${effectiveVariant}`]">
     <moulify-icon v-if="props.iconLeft" :name="props.iconLeft" />
     <slot />
     <moulify-icon v-if="props.iconRight" :name="props.iconRight" />
@@ -7,22 +8,64 @@
 </template>
 
 <script setup>
+import { computed } from "vue";
 const props = defineProps({
   iconLeft: { type: String, required: false, default: void 0 },
-  iconRight: { type: String, required: false, default: void 0 }
+  iconRight: { type: String, required: false, default: void 0 },
+  size: { type: String, required: false, default: "md" },
+  variant: { type: String, required: false, default: "primary" }
 });
+const effectiveSize = computed(() => props.size);
+const effectiveVariant = computed(() => props.variant);
 </script>
 
 <style>
 .moulify-btn {
-  background-color: black;
-  align-items: center;
-  color: #fff;
-  padding: 10px;
-  border-radius: 5px;
-  display: flex;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
+  font-family: inherit;
+  font-weight: 500;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
+}
+.moulify-btn--sm {
+  padding: 6px 12px;
+  font-size: 13px;
+}
+.moulify-btn--md {
+  padding: 10px 18px;
+  font-size: 14px;
+}
+.moulify-btn--lg {
+  padding: 12px 24px;
+  font-size: 16px;
+}
+.moulify-btn--primary {
+  background-color: var(--moulify-primary-500, #0076ff);
+  color: #fff;
+  border: 1px solid transparent;
+}
+.moulify-btn--primary:hover {
+  background-color: var(--moulify-primary-600, #0066dd);
+}
+.moulify-btn--outlined {
+  background-color: transparent;
+  color: var(--moulify-primary-500, #0076ff);
+  border: 1px solid var(--moulify-primary-500, #0076ff);
+}
+.moulify-btn--outlined:hover {
+  background-color: var(--moulify-primary-50, rgba(0, 118, 255, 0.08));
+}
+.moulify-btn--link {
+  background-color: transparent;
+  color: var(--moulify-primary-500, #0076ff);
+  border: none;
+  border-radius: 0;
+}
+.moulify-btn--link:hover {
+  text-decoration: underline;
 }
 </style>

package/dist/runtime/app/components/Button/index.vue.d.ts

@@ -6,6 +6,8 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
     iconLeft: import("../../../../assets/generated/fonts/icons.js").IconsId;
     iconRight: import("../../../../assets/generated/fonts/icons.js").IconsId;
+    size: import("./types.js").ButtonSize;
+    variant: import("./types.js").ButtonVariant;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/app/components/Button/types.d.ts

@@ -1,5 +1,11 @@
 import type { IconsId } from '../../../../assets/generated/fonts/icons.js';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonVariant = 'primary' | 'outlined' | 'link';
 export interface ButtonProps {
     iconLeft?: IconsId;
     iconRight?: IconsId;
+    /** @default 'md' or from nuxt config */
+    size?: ButtonSize;
+    /** @default 'primary' or from nuxt config */
+    variant?: ButtonVariant;
 }

package/dist/runtime/app/components/Footer/index.d.vue.ts

@@ -0,0 +1,7 @@
+import type { FooterProps } from './types.js';
+declare const __VLS_export: import("vue").DefineComponent<FooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterProps> & Readonly<{}>, {
+    copyrightText: string;
+    hasLinks: import("../Header/types.js").NavLink[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Footer/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <footer class="moulify-footer">
+    <div class="moulify-footer__inner">
+      <p v-if="effectiveCopyright" class="moulify-footer__copyright">
+        {{ effectiveCopyright }}
+      </p>
+      <nav v-if="effectiveLinks.length" class="moulify-footer__links" aria-label="Footer links">
+        <template v-for="(link, i) in effectiveLinks" :key="i">
+          <a class="moulify-footer__link" :href="link.url" target="_blank" rel="noopener noreferrer">
+            {{ link.name }}
+          </a>
+          <span v-if="i < effectiveLinks.length - 1" class="moulify-footer__separator" aria-hidden="true">
+            {{ separator }}
+          </span>
+        </template>
+      </nav>
+    </div>
+  </footer>
+</template>
+
+<script setup>
+import { computed, inject } from "vue";
+const props = defineProps({
+  copyrightText: { type: String, required: false, default: void 0 },
+  hasLinks: { type: Array, required: false, default: void 0 }
+});
+const config = inject("moulifyConfig", {});
+const effectiveCopyright = computed(() => props.copyrightText ?? config.footer?.copyrightText ?? "");
+const effectiveLinks = computed(() => props.hasLinks ?? config.footer?.hasLinks ?? []);
+const separator = " \xB7 ";
+</script>
+
+<style>
+.moulify-footer {
+  padding: 24px 16px;
+  border-top: 1px solid var(--moulify-tertiary-200, #ddd);
+}
+
+.moulify-footer__inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px 24px;
+}
+
+.moulify-footer__copyright {
+  margin: 0;
+  font-size: 14px;
+}
+
+.moulify-footer__links {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 0;
+}
+
+.moulify-footer__link {
+  color: var(--moulify-primary-600, #0066dd);
+  text-decoration: none;
+  font-size: 14px;
+}
+.moulify-footer__link:hover {
+  text-decoration: underline;
+}
+
+.moulify-footer__separator {
+  margin: 0 8px;
+  color: var(--moulify-tertiary-500, #888);
+  user-select: none;
+}
+</style>

package/dist/runtime/app/components/Footer/index.vue.d.ts

@@ -0,0 +1,7 @@
+import type { FooterProps } from './types.js';
+declare const __VLS_export: import("vue").DefineComponent<FooterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<FooterProps> & Readonly<{}>, {
+    copyrightText: string;
+    hasLinks: import("../Header/types.js").NavLink[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/Footer/types.d.ts

@@ -0,0 +1,7 @@
+import type { NavLink } from '../Header/types.js';
+export interface FooterProps {
+    /** Copyright text (e.g. "© 2025 Company") */
+    copyrightText?: string;
+    /** Links to show in the footer (e.g. Privacy, Terms) */
+    hasLinks?: NavLink[];
+}

package/dist/runtime/app/components/Header/index.d.vue.ts

@@ -1,3 +1,8 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+import type { HeaderProps } from './types.js';
+declare const __VLS_export: import("vue").DefineComponent<HeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeaderProps> & Readonly<{}>, {
+    left: import("./types.js").NavLink[];
+    center: import("./types.js").NavLink[];
+    right: import("./types.js").NavLink[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/Header/index.vue

@@ -1,9 +1,88 @@
 <template>
   <header class="moulify-header">
-    Header component
+    <nav class="moulify-header__nav moulify-header__nav--left" aria-label="Left navigation">
+      <template v-for="(link, i) in effectiveLeft" :key="`l-${i}`">
+        <a v-if="isExternal(link.url)" class="moulify-header__link" :href="link.url" target="_blank"
+          rel="noopener noreferrer">
+          {{ link.name }}
+        </a>
+        <NuxtLink v-else class="moulify-header__link" :to="link.url">
+          {{ link.name }}
+        </NuxtLink>
+      </template>
+    </nav>
+    <nav class="moulify-header__nav moulify-header__nav--center" aria-label="Center navigation">
+      <template v-for="(link, i) in effectiveCenter" :key="`c-${i}`">
+        <a v-if="isExternal(link.url)" class="moulify-header__link" :href="link.url" target="_blank"
+          rel="noopener noreferrer">
+          {{ link.name }}
+        </a>
+        <NuxtLink v-else class="moulify-header__link" :to="link.url">
+          {{ link.name }}
+        </NuxtLink>
+      </template>
+    </nav>
+    <nav class="moulify-header__nav moulify-header__nav--right" aria-label="Right navigation">
+      <template v-for="(link, i) in effectiveRight" :key="`r-${i}`">
+        <a v-if="isExternal(link.url)" class="moulify-header__link" :href="link.url" target="_blank"
+          rel="noopener noreferrer">
+          {{ link.name }}
+        </a>
+        <NuxtLink v-else class="moulify-header__link" :to="link.url">
+          {{ link.name }}
+        </NuxtLink>
+      </template>
+    </nav>
   </header>
 </template>
 
+<script setup>
+import { computed, inject } from "vue";
+const props = defineProps({
+  left: { type: Array, required: false, default: void 0 },
+  center: { type: Array, required: false, default: void 0 },
+  right: { type: Array, required: false, default: void 0 }
+});
+const config = inject("moulifyConfig", {});
+const effectiveLeft = computed(() => props.left ?? config.header?.left ?? []);
+const effectiveCenter = computed(() => props.center ?? config.header?.center ?? []);
+const effectiveRight = computed(() => props.right ?? config.header?.right ?? []);
+const isExternal = (url) => /^https?:\/\//i.test(url) || url.startsWith("//");
+</script>
+
 <style>
-.moulify-header{background-color:#000;border-radius:5px;color:#fff;padding:10px}
+.moulify-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 12px 24px;
+  background-color: var(--moulify-secondary-900, #000);
+  color: #fff;
+  border-radius: 0;
+}
+.moulify-header__nav {
+  display: flex;
+  align-items: center;
+  gap: 8px 24px;
+}
+.moulify-header__nav--left {
+  flex: 0 0 auto;
+}
+.moulify-header__nav--center {
+  flex: 1;
+  justify-content: center;
+}
+.moulify-header__nav--right {
+  flex: 0 0 auto;
+  justify-content: flex-end;
+}
+.moulify-header__link {
+  color: inherit;
+  text-decoration: none;
+  font-size: 14px;
+}
+.moulify-header__link:hover {
+  text-decoration: underline;
+}
 </style>

package/dist/runtime/app/components/Header/index.vue.d.ts

@@ -1,3 +1,8 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+import type { HeaderProps } from './types.js';
+declare const __VLS_export: import("vue").DefineComponent<HeaderProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<HeaderProps> & Readonly<{}>, {
+    left: import("./types.js").NavLink[];
+    center: import("./types.js").NavLink[];
+    right: import("./types.js").NavLink[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/Header/types.d.ts

@@ -0,0 +1,10 @@
+/** A single link item (name + url) used in Header and Footer. */
+export interface NavLink {
+    name: string;
+    url: string;
+}
+export interface HeaderProps {
+    left?: NavLink[];
+    center?: NavLink[];
+    right?: NavLink[];
+}

package/dist/runtime/app/components/Icon/index.vue

@@ -8,11 +8,11 @@
 <script setup>
 import { computed } from "vue";
 import { ALL_ICONS } from "../../../../utils/constants";
-defineOptions({ name: "NcIcon" });
+defineOptions({ name: "MoulifyIcon" });
 const props = defineProps({
   name: { type: String, required: true },
   size: { type: Number, required: false, default: 24 },
-  color: { type: String, required: false, default: "white" }
+  color: { type: String, required: false, default: "black" }
 });
 const isIconValid = computed(() => ALL_ICONS.includes(props.name));
 const iconStyle = computed(() => ({

package/dist/runtime/app/components/Icon/types.d.ts

@@ -1,4 +1,4 @@
-import type { IconsId } from '~/src/assets/generated/fonts/icons';
+import type { IconsId } from '../../../../assets/generated/fonts/icons.js';
 /**
  * Props for the Icon component.
  *
@@ -9,13 +9,13 @@ export interface IconProps {
     /** Icon name from the Fantasticon-generated font family. */
     name: IconsId;
     /**
-     * Font size for the icon.
+     * Font size for the icon (px).
      *
      * @default 24
      */
     size?: number;
     /**
-     * Color of the icon.
+     * Color of the icon (CSS color value).
      *
      * @default "currentColor" - Depending on SVG color.
      */

package/dist/runtime/app/components/SocialLinks/index.d.vue.ts

@@ -0,0 +1,4 @@
+import { type SocialLinksProps } from './types.js';
+declare const __VLS_export: import("vue").DefineComponent<SocialLinksProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SocialLinksProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/SocialLinks/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <nav class="moulify-social-links" aria-label="Social links">
+    <template v-if="effectiveLinks.length">
+      <a v-for="item in effectiveLinks" :key="item.id" class="moulify-social-links__item" :href="item.link"
+        target="_blank" rel="noopener noreferrer">
+        {{ item.name }}
+      </a>
+    </template>
+  </nav>
+</template>
+
+<script setup>
+import { computed, inject } from "vue";
+import { SocialPlatform } from "./types";
+const props = defineProps({
+  links: { type: Object, required: false }
+});
+const config = inject("moulifyConfig", {});
+const effectiveLinks = computed(
+  () => SocialPlatform.fromConfigs(config.socialLinks, props.links)
+);
+</script>
+
+<style>
+.moulify-social-links {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px 24px;
+}
+.moulify-social-links__item {
+  color: var(--moulify-primary-500, #0076ff);
+  text-decoration: none;
+  font-size: 14px;
+}
+.moulify-social-links__item:hover {
+  text-decoration: underline;
+}
+</style>

package/dist/runtime/app/components/SocialLinks/index.vue.d.ts

@@ -0,0 +1,4 @@
+import { type SocialLinksProps } from './types.js';
+declare const __VLS_export: import("vue").DefineComponent<SocialLinksProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<SocialLinksProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/SocialLinks/types.d.ts

@@ -0,0 +1,24 @@
+/** CamelCase platform key (twitter, github, instagram, facebook, x). */
+export type SocialPlatformId = 'twitter' | 'github' | 'instagram' | 'facebook' | 'x';
+/** Config: optional URL per platform. Only listed platforms are shown. */
+export type SocialLinksConfig = Partial<Record<SocialPlatformId, string>>;
+export declare class SocialPlatform {
+    readonly id: SocialPlatformId;
+    readonly name: string;
+    readonly link?: string | undefined;
+    constructor(id: SocialPlatformId, name: string, link?: string | undefined);
+    static Facebook: SocialPlatform;
+    static GitHub: SocialPlatform;
+    static Instagram: SocialPlatform;
+    static Twitter: SocialPlatform;
+    static X: SocialPlatform;
+    static all: SocialPlatform[];
+    /** Build list with links from config (only platforms present in config, with their URL). */
+    static fromConfig(config: SocialLinksConfig): SocialPlatform[];
+    /** Merge configs (later overrides earlier) and return SocialPlatform[] with links set. */
+    static fromConfigs(...configs: (SocialLinksConfig | undefined)[]): SocialPlatform[];
+}
+export interface SocialLinksProps {
+    /** Override or set links per platform (optional). Merged with module config. */
+    links?: SocialLinksConfig;
+}

package/dist/runtime/app/components/SocialLinks/types.js

@@ -0,0 +1,38 @@
+export class SocialPlatform {
+  constructor(id, name, link) {
+    this.id = id;
+    this.name = name;
+    this.link = link;
+  }
+  static Facebook = new SocialPlatform("facebook", "Facebook");
+  static GitHub = new SocialPlatform("github", "GitHub");
+  static Instagram = new SocialPlatform("instagram", "Instagram");
+  static Twitter = new SocialPlatform("twitter", "Twitter");
+  static X = new SocialPlatform("x", "X");
+  static all = [
+    this.Facebook,
+    this.GitHub,
+    this.Instagram,
+    this.Twitter,
+    this.X
+  ];
+  /** Build list with links from config (only platforms present in config, with their URL). */
+  static fromConfig(config) {
+    return this.all.filter((p) => config[p.id]).map((p) => new SocialPlatform(p.id, p.name, config[p.id]));
+  }
+  /** Merge configs (later overrides earlier) and return SocialPlatform[] with links set. */
+  static fromConfigs(...configs) {
+    const merged = {};
+    for (const config of configs) {
+      if (!config) {
+        continue;
+      }
+      for (const p of this.all) {
+        if (config[p.id] !== void 0) {
+          merged[p.id] = config[p.id];
+        }
+      }
+    }
+    return this.fromConfig(merged);
+  }
+}

package/dist/runtime/plugin.d.ts

@@ -1,3 +1,8 @@
-import '../assets/generated/fonts/icons.css.js';
-declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+import type { MoulifyPublicConfig } from '../types.js';
+declare module 'nuxt/schema' {
+    interface PublicRuntimeConfig {
+        moulify?: MoulifyPublicConfig;
+    }
+}
+declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package/dist/runtime/plugin.js

@@ -1,5 +1,32 @@
-import { defineNuxtPlugin } from "#app";
-import "../assets/generated/fonts/icons.css";
-export default defineNuxtPlugin((_nuxtApp) => {
-  console.log("Plugin injected by moulify!");
+import { defineNuxtPlugin, useRuntimeConfig } from "nuxt/app";
+const injectColorPaletteVars = (name, palette, target) => {
+  const prefix = `--moulify-${name}`;
+  target.setProperty(`${prefix}-50`, palette[50]);
+  target.setProperty(`${prefix}-100`, palette[100]);
+  target.setProperty(`${prefix}-200`, palette[200]);
+  target.setProperty(`${prefix}-300`, palette[300]);
+  target.setProperty(`${prefix}-400`, palette[400]);
+  target.setProperty(`${prefix}-500`, palette[500]);
+  target.setProperty(`${prefix}-600`, palette[600]);
+  target.setProperty(`${prefix}-700`, palette[700]);
+  target.setProperty(`${prefix}-800`, palette[800]);
+  target.setProperty(`${prefix}-900`, palette[900]);
+};
+export default defineNuxtPlugin((nuxtApp) => {
+  const config = useRuntimeConfig();
+  const colors = config.public.moulify?.colors;
+  if (colors && typeof document !== "undefined") {
+    const root = document.documentElement;
+    if (colors.primary) {
+      injectColorPaletteVars("primary", colors.primary, root.style);
+    }
+    if (colors.secondary) {
+      injectColorPaletteVars("secondary", colors.secondary, root.style);
+    }
+    if (colors.tertiary) {
+      injectColorPaletteVars("tertiary", colors.tertiary, root.style);
+    }
+  }
+  nuxtApp.provide("moulifyColors", colors ?? {});
+  nuxtApp.provide("moulifyConfig", config.public.moulify ?? {});
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "moulify",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "My new Nuxt module",
   "repository": "https://github.com/moulibheemaneti/moulify",
   "license": "MIT",
@@ -33,8 +33,10 @@
     "clean-install": "bun run clean && bun i",
     "dev": "bun run dev:prepare && nuxt dev playground",
     "dev:clean": "bun run clean-install && bun run dev",
+    "landing:dev": "bun run landing:prepare && cd landing-page && bun run dev",
     "dev:build": "nuxt build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare playground",
+    "landing:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxt prepare landing-page",
     "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
     "test": "vitest run",