@morphika/webframe 0.1.0

package/sanity/schemas/siteStyles.ts

@@ -0,0 +1,210 @@
+import { defineType, defineField } from "sanity";
+import config from "../../site.config";
+
+export default defineType({
+  name: "siteStyles",
+  title: "Site Styles",
+  type: "document",
+  groups: [
+    { name: "grid", title: "Grid", default: true },
+    { name: "fonts", title: "Fonts" },
+    { name: "typography", title: "Typography" },
+    { name: "colors", title: "Colors" },
+    { name: "links", title: "Links & Buttons" },
+  ],
+  fields: [
+    // === GRID ===
+    defineField({ name: "grid_width", title: "Max-Width", type: "string", group: "grid", initialValue: "1445" }),
+    defineField({ name: "grid_outer_padding", title: "Outer Padding", type: "string", group: "grid", initialValue: "30" }),
+    defineField({ name: "grid_gutter_desktop", title: "Gutter Width (Desktop)", type: "string", group: "grid", initialValue: "30" }),
+    defineField({ name: "grid_gutter_responsive", title: "Gutter Width (Tablet)", type: "string", group: "grid", initialValue: "30" }),
+    defineField({ name: "grid_gutter_phone", title: "Gutter Width (Phone)", type: "string", group: "grid", initialValue: "16" }),
+
+    // === FONTS ===
+    defineField({
+      name: "fonts",
+      title: "Font Families",
+      type: "array",
+      group: "fonts",
+      of: [
+        {
+          type: "object",
+          fields: [
+            defineField({
+              name: "family",
+              title: "Font Family Name",
+              type: "string",
+              validation: (Rule) => Rule.required(),
+            }),
+            defineField({
+              name: "is_builtin",
+              title: "Built-in Font",
+              type: "boolean",
+              description: "True for fonts already in /public/fonts/",
+              initialValue: false,
+            }),
+            defineField({
+              name: "variants",
+              title: "Font Variants",
+              type: "array",
+              of: [
+                {
+                  type: "object",
+                  fields: [
+                    defineField({
+                      name: "weight",
+                      title: "Weight",
+                      type: "string",
+                      options: {
+                        list: [
+                          { title: "Thin (100)", value: "100" },
+                          { title: "Light (300)", value: "300" },
+                          { title: "Regular (400)", value: "400" },
+                          { title: "Medium (500)", value: "500" },
+                          { title: "Semi-Bold (600)", value: "600" },
+                          { title: "Bold (700)", value: "700" },
+                          { title: "Extra-Bold (800)", value: "800" },
+                          { title: "Black (900)", value: "900" },
+                        ],
+                      },
+                      validation: (Rule) => Rule.required(),
+                    }),
+                    defineField({
+                      name: "style",
+                      title: "Style",
+                      type: "string",
+                      options: {
+                        list: [
+                          { title: "Normal", value: "normal" },
+                          { title: "Italic", value: "italic" },
+                        ],
+                      },
+                      initialValue: "normal",
+                    }),
+                    defineField({
+                      name: "file_url",
+                      title: "Font File URL",
+                      type: "url",
+                      description: "Sanity CDN URL for the font file",
+                    }),
+                    defineField({
+                      name: "file_id",
+                      title: "Sanity Asset ID",
+                      type: "string",
+                      hidden: true,
+                    }),
+                    defineField({
+                      name: "original_filename",
+                      title: "Original Filename",
+                      type: "string",
+                    }),
+                  ],
+                  preview: {
+                    select: {
+                      weight: "weight",
+                      style: "style",
+                      filename: "original_filename",
+                    },
+                    prepare({ weight, style, filename }) {
+                      return {
+                        title: `${weight} ${style || "normal"}`,
+                        subtitle: filename,
+                      };
+                    },
+                  },
+                },
+              ],
+            }),
+          ],
+          preview: {
+            select: { family: "family", is_builtin: "is_builtin" },
+            prepare({ family, is_builtin }) {
+              return {
+                title: family,
+                subtitle: is_builtin ? "Built-in" : "Custom upload",
+              };
+            },
+          },
+        },
+      ],
+    }),
+
+    // === TYPOGRAPHY ===
+    ...["h1", "h2", "h3", "h4", "body", "small"].map((level) =>
+      defineField({
+        name: `typography_${level}`,
+        title: `Typography — ${level.toUpperCase()}`,
+        type: "object",
+        group: "typography",
+        fields: [
+          defineField({ name: "font_family", title: "Font Family", type: "string" }),
+          defineField({ name: "font_size", title: "Font Size", type: "string" }),
+          defineField({ name: "font_weight", title: "Font Weight", type: "string" }),
+          defineField({ name: "line_height", title: "Line Height", type: "string" }),
+          defineField({ name: "letter_spacing", title: "Letter Spacing", type: "string" }),
+          defineField({
+            name: "text_transform",
+            title: "Text Transform",
+            type: "string",
+            options: {
+              list: ["none", "uppercase", "lowercase", "capitalize"],
+            },
+          }),
+          defineField({ name: "color", title: "Color Override", type: "string" }),
+        ],
+      })
+    ),
+
+    // === COLOR PALETTE ===
+    defineField({
+      name: "color_palette",
+      title: "Color Palette",
+      type: "array",
+      group: "colors",
+      of: [
+        {
+          type: "object",
+          fields: [
+            defineField({ name: "name", title: "Color Name", type: "string", validation: (Rule) => Rule.required() }),
+            defineField({ name: "hex", title: "Hex Value", type: "string", validation: (Rule) => Rule.required() }),
+          ],
+          preview: {
+            select: { name: "name", hex: "hex" },
+            prepare({ name, hex }) {
+              return { title: name || "Unnamed", subtitle: hex };
+            },
+          },
+        },
+      ],
+    }),
+
+    // Legacy fixed color fields (kept for backward compatibility, read-only)
+    defineField({ name: "color_background", title: "Background Color (legacy)", type: "string", group: "colors", hidden: true }),
+    defineField({ name: "color_text", title: "Text Color (legacy)", type: "string", group: "colors", hidden: true }),
+    defineField({ name: "color_primary", title: "Primary Color (legacy)", type: "string", group: "colors", hidden: true }),
+    defineField({ name: "color_secondary", title: "Secondary Color (legacy)", type: "string", group: "colors", hidden: true }),
+    defineField({ name: "color_accent", title: "Accent Color (legacy)", type: "string", group: "colors", hidden: true }),
+    defineField({ name: "color_muted", title: "Muted Color (legacy)", type: "string", group: "colors", hidden: true }),
+
+    // === LINK STYLE ===
+    defineField({ name: "link_color", title: "Link Color", type: "string", group: "links", initialValue: config.palette.primary }),
+    defineField({ name: "link_hover_color", title: "Link Hover Color", type: "string", group: "links", initialValue: "#091ed4" }),
+    defineField({ name: "link_underline", title: "Link Underline", type: "boolean", group: "links", initialValue: true }),
+
+    // === BUTTON STYLE ===
+    defineField({ name: "button_primary_bg", title: "Primary Button BG", type: "string", group: "links", initialValue: "#ffffff" }),
+    defineField({ name: "button_primary_text", title: "Primary Button Text", type: "string", group: "links", initialValue: "#000000" }),
+    defineField({ name: "button_secondary_bg", title: "Secondary Button BG", type: "string", group: "links", initialValue: "#1a1a1a" }),
+    defineField({ name: "button_secondary_text", title: "Secondary Button Text", type: "string", group: "links", initialValue: "#ffffff" }),
+    defineField({ name: "button_border_radius", title: "Button Border Radius", type: "string", group: "links", initialValue: "8px" }),
+
+    // === ANIMATION ===
+    defineField({
+      name: "disable_scroll_animations_mobile",
+      title: "Disable Scroll Animations on Small Screens",
+      type: "boolean",
+      description: "When enabled, all scroll-linked animations are disabled on phones (< 768px)",
+      initialValue: false,
+    }),
+  ],
+});

package/site/error.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/site/error — Site error boundary.
+ */
+export { default } from "../app/(site)/error";

package/site/index.ts

@@ -0,0 +1,8 @@
+/**
+ * @morphika/webframe/site — Public site page components.
+ * Re-exports from the monolith source during the transition period.
+ */
+export { default as SiteLayout } from "../app/(site)/layout";
+export { default as HomePage } from "../app/(site)/page";
+// Note: `revalidate` route config must be defined directly in each instance's
+// route file — Next.js does not allow re-exporting route segment config.

package/site/not-found.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/site/not-found — Custom 404 page.
+ */
+export { default as NotFound } from "../app/(site)/not-found";

package/site/page.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/site/page — Dynamic [slug] page.
+ */
+export { default, generateStaticParams, generateMetadata } from "../app/(site)/[slug]/page";

package/site/preview.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/site/preview — Draft preview page.
+ */
+export { default as PreviewPage } from "../app/(site)/preview/page";

package/site/robots.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/site/robots — Dynamic robots.txt generation.
+ */
+export { default } from "../app/robots";

package/site/sitemap.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/site/sitemap — Dynamic sitemap.xml generation.
+ */
+export { default } from "../app/sitemap";

package/site/work.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/site/work — Project detail [slug] page.
+ */
+export { default, generateStaticParams, generateMetadata } from "../app/(site)/work/[slug]/page";

package/studio/index.ts

@@ -0,0 +1,4 @@
+/**
+ * @morphika/webframe/studio — Sanity Studio page.
+ */
+export { default as StudioPage } from "../app/studio/[[...index]]/page";

package/styles/admin.css

@@ -0,0 +1,85 @@
+/* ============================================
+   Admin Panel — Clean UI Override
+   Uses Inter (sans-serif) for admin, white bg,
+   clean hierarchy. Mono reserved for public site.
+   ============================================ */
+
+/* Admin shell: override dark defaults */
+[data-admin] {
+  font-family: var(--font-sans);
+  background: #ffffff;
+  color: #1a1a1a;
+}
+
+[data-admin] * {
+  cursor: auto;
+}
+
+/* Admin typography scale */
+[data-admin] h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.01em; color: #111; }
+[data-admin] h2 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; color: #222; }
+[data-admin] h3 { font-size: 0.9375rem; font-weight: 500; color: #333; }
+
+/* Admin inputs */
+[data-admin] input[type="text"],
+[data-admin] input[type="password"],
+[data-admin] input[type="email"],
+[data-admin] input[type="url"],
+[data-admin] input[type="number"],
+[data-admin] textarea,
+[data-admin] select {
+  font-family: var(--font-sans);
+  font-size: 0.8125rem;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e5e5;
+  padding: 0.5rem 0.75rem;
+  transition: border-color 0.15s;
+}
+
+[data-admin] input:focus,
+[data-admin] textarea:focus,
+[data-admin] select:focus {
+  border-color: #076bff;
+  outline: none;
+  box-shadow: 0 0 0 3px rgba(7, 107, 255, 0.08);
+}
+
+/* Admin buttons base */
+[data-admin] .btn-primary {
+  background: #076bff;
+  color: white;
+  font-weight: 500;
+  font-size: 0.8125rem;
+  padding: 0.5rem 1.25rem;
+  border-radius: 0.5rem;
+  transition: all 0.15s;
+}
+[data-admin] .btn-primary:hover { background: #0559d4; }
+[data-admin] .btn-primary:disabled { opacity: 0.4; }
+
+[data-admin] .btn-secondary {
+  background: white;
+  color: #555;
+  font-weight: 500;
+  font-size: 0.8125rem;
+  padding: 0.5rem 1.25rem;
+  border-radius: 0.5rem;
+  border: 1px solid #e5e5e5;
+  transition: all 0.15s;
+}
+[data-admin] .btn-secondary:hover { border-color: #ccc; color: #111; }
+
+/* Admin card base */
+[data-admin] .admin-card {
+  background: white;
+  border: 1px solid #f0f0f0;
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
+}
+
+/* Scrollbar for admin */
+[data-admin] ::-webkit-scrollbar { width: 6px; }
+[data-admin] ::-webkit-scrollbar-track { background: transparent; }
+[data-admin] ::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
+[data-admin] ::-webkit-scrollbar-thumb:hover { background: #bbb; }

package/styles/animations.css

@@ -0,0 +1,237 @@
+/* ============================================
+   Animations — Core keyframes and animation systems
+   Imported by globals.css (monolith) or instance CSS
+   ============================================ */
+
+@keyframes marquee {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+/* V2 Grid snapping guide pulse */
+@keyframes pulse {
+  0%, 100% { opacity: 0.4; }
+  50% { opacity: 1; }
+}
+
+/* ============================================
+   View Transitions — DISABLED (Session 112)
+   Removed to eliminate black flash conflicts with
+   "On Enter" element animations. Page exit animations
+   (PageExitContext) handle the transition feel instead.
+   ============================================ */
+
+/* ============================================
+   Enter Animation Keyframes (Session 120)
+   Used by EnterAnimationWrapper via inline styles.
+   animation-name, duration, delay, easing, and fill-mode
+   are set via inline styles — no CSS rules needed here.
+   ============================================ */
+
+@keyframes enter-fade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes enter-slide-up {
+  from { opacity: 0; transform: translateY(30px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes enter-slide-down {
+  from { opacity: 0; transform: translateY(-30px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes enter-scale {
+  from { opacity: 0; transform: scale(0.85); }
+  to   { opacity: 1; transform: scale(1); }
+}
+
+@keyframes enter-reveal {
+  from { opacity: 0; clip-path: inset(0 100% 0 0); }
+  to   { opacity: 1; clip-path: inset(0 0% 0 0); }
+}
+
+@keyframes enter-blur {
+  from { opacity: 0; filter: blur(10px); }
+  to   { opacity: 1; filter: blur(0px); }
+}
+
+@keyframes enter-blur-in {
+  from { opacity: 0; filter: blur(6px); }
+  to   { opacity: 1; filter: blur(0px); }
+}
+
+/* Prefers reduced motion — neutralize ALL enter animations */
+@media (prefers-reduced-motion: reduce) {
+  [data-enter-animation] {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+    filter: none !important;
+    clip-path: none !important;
+  }
+}
+
+/* Suppress hover transitions while enter animation is still playing.
+   Prevents visual conflict between CSS animation (enter) and CSS transition (hover). */
+[data-enter-animation]:not([data-entered]) [data-hover-effect] {
+  transition: none !important;
+  pointer-events: none;
+}
+
+/* ============================================
+   Hover Effect System (Sessions 60, 120)
+   ============================================
+   Most hover styling is applied via inline styles in HoverAnimationWrapper.
+   The :hover pseudo-class cannot be set inline, so we use data attributes. */
+
+/* Scale Up */
+[data-hover-effect="scale-up"]:hover {
+  transform: scale(1.05) !important;
+}
+
+/* Scale Down */
+[data-hover-effect="scale-down"]:hover {
+  transform: scale(0.95) !important;
+}
+
+/* Lift — uses inline custom properties for intensity-dependent values */
+[data-hover-effect="lift"] {
+  --hover-lift-y: -4px;
+  --hover-lift-shadow: 0 8px 20px rgba(0,0,0,0.15);
+}
+[data-hover-effect="lift"]:hover {
+  transform: translateY(var(--hover-lift-y)) !important;
+  box-shadow: var(--hover-lift-shadow) !important;
+}
+
+/* Tilt 3D — transform is handled by JS mousemove, but we ensure base state */
+[data-hover-effect="tilt-3d"] {
+  transform-style: preserve-3d;
+}
+
+/* Color Shift */
+[data-hover-effect="color-shift"] {
+  --hover-brightness: 1.1;
+  --hover-saturate: 1.2;
+}
+[data-hover-effect="color-shift"]:hover {
+  filter: brightness(var(--hover-brightness)) saturate(var(--hover-saturate)) !important;
+}
+
+/* Blur Reveal */
+[data-hover-effect="blur-reveal"] {
+  --hover-blur-base: 3px;
+  --hover-opacity-base: 0.85;
+}
+[data-hover-effect="blur-reveal"]:hover {
+  filter: blur(0px) !important;
+  opacity: 1 !important;
+}
+
+/* Border Glow */
+[data-hover-effect="border-glow"] {
+  --hover-glow-spread: 4px;
+  --hover-glow-color: rgba(7,107,255,0.4);
+}
+[data-hover-effect="border-glow"]:hover {
+  box-shadow: 0 0 calc(var(--hover-glow-spread) * 2) var(--hover-glow-spread) var(--hover-glow-color) !important;
+}
+
+/* Prefers reduced motion — disable hover animations */
+@media (prefers-reduced-motion: reduce) {
+  [data-hover-effect] {
+    transition: none !important;
+  }
+  [data-hover-effect]:hover {
+    transform: none !important;
+    filter: none !important;
+    box-shadow: none !important;
+    opacity: 1 !important;
+  }
+}
+
+/* ============================================
+   Text Animation Presets (Parallax Showcase)
+   CSS-only presets for title/subtitle entrance.
+   Triggered via IntersectionObserver (enter mode).
+   ============================================ */
+
+/* ============================================
+   Nav Entrance Animations
+   Applied to the entire nav or individual items
+   when stagger is enabled. Triggered on page load.
+   ============================================ */
+
+@keyframes nav-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes nav-slide-down {
+  from { opacity: 0; transform: translateY(-100%); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes nav-blur-in {
+  from { opacity: 0; filter: blur(12px); }
+  to   { opacity: 1; filter: blur(0px); }
+}
+
+/* Nav entrance: initial hidden state */
+[data-nav-entrance] {
+  opacity: 0;
+}
+
+/* Nav entrance: play once the attribute is set */
+[data-nav-entrance="fade-in"][data-nav-entered] {
+  animation: nav-fade-in var(--nav-entrance-duration, 600ms) var(--nav-entrance-delay, 0ms) ease-out forwards;
+}
+
+[data-nav-entrance="slide-down"][data-nav-entered] {
+  animation: nav-slide-down var(--nav-entrance-duration, 600ms) var(--nav-entrance-delay, 0ms) ease-out forwards;
+}
+
+[data-nav-entrance="blur-in"][data-nav-entered] {
+  animation: nav-blur-in var(--nav-entrance-duration, 700ms) var(--nav-entrance-delay, 0ms) ease-out forwards;
+}
+
+/* Staggered items: each item animates independently */
+[data-nav-item-entrance] {
+  opacity: 0;
+}
+
+[data-nav-item-entrance="fade-in"][data-nav-entered] {
+  animation: nav-fade-in var(--nav-item-duration, 400ms) var(--nav-item-delay, 0ms) ease-out forwards;
+}
+
+[data-nav-item-entrance="slide-down"][data-nav-entered] {
+  animation: nav-slide-down var(--nav-item-duration, 400ms) var(--nav-item-delay, 0ms) ease-out forwards;
+}
+
+[data-nav-item-entrance="blur-in"][data-nav-entered] {
+  animation: nav-blur-in var(--nav-item-duration, 400ms) var(--nav-item-delay, 0ms) ease-out forwards;
+}
+
+/* Prefers reduced motion — disable nav animations */
+@media (prefers-reduced-motion: reduce) {
+  [data-nav-entrance],
+  [data-nav-item-entrance] {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+    filter: none !important;
+  }
+}
+
+/* Typewriter cursor blink */
+@keyframes typewriter-cursor-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0; }
+}