@morphika/webframe 0.1.0

package/styles/base.css

@@ -0,0 +1,148 @@
+@import "tailwindcss";
+
+/* ============================================
+   Brand Design Tokens
+   Values come from site.config.ts palette.
+   Tailwind generates classes: bg-brand-*, text-brand-*, etc.
+   ============================================ */
+
+@theme inline {
+  /* Brand Colors — semantic tokens.
+     Initial values are neutral placeholders for Tailwind class generation.
+     Actual colors are injected at runtime by StylesProvider from the admin
+     palette, with site.config.ts palette as fallback.
+     See lib/styles/provider.tsx → generateBrandTokens(). */
+  --color-brand-accent: var(--brand-accent, #888888);
+  --color-brand-accent-alt: var(--brand-accent-alt, #888888);
+  --color-brand-secondary: var(--brand-secondary, #888888);
+  --color-brand-primary: var(--brand-primary, #888888);
+  --color-brand-accent-2: var(--brand-accent-2, #888888);
+  --color-brand-text: var(--brand-text, #ffffff);
+  --color-brand-muted: var(--brand-muted, #888888);
+  --color-brand-dark: var(--brand-dark, #111111);
+
+  /* Fonts — placeholders, overridden by StylesProvider */
+  --font-mono: var(--brand-font-mono, ui-monospace, monospace);
+  --font-sans: "Inter", system-ui, sans-serif;
+
+  /* Breakpoints — matching original Semplice grid */
+  --breakpoint-xs: 0px;
+  --breakpoint-sm: 544px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 992px;
+  --breakpoint-xl: 1170px;
+}
+
+/* ============================================
+   @font-face — Instance Default Font
+   No hardcoded @font-face here. The default/fallback font is loaded
+   by StylesProvider at runtime based on site.config.ts typography
+   settings and admin-uploaded fonts. For the initial render before
+   JS loads, the --font-mono stack in @theme provides the fallback.
+   ============================================ */
+
+/* ============================================
+   Admin UI Tokens
+   Used across all builder/admin components.
+   JS constants in lib/builder/constants.ts mirror these.
+   ============================================ */
+
+:root {
+  --admin-accent: #076bff;
+  --admin-accent-dark: #0559d4;
+  --admin-accent-shadow: rgba(7, 107, 255, 0.06);
+  --admin-error: #ed3821;
+  --admin-error-dark: #d42f1a;
+  --admin-success: #22c55e;
+}
+
+/* ============================================
+   Base styles
+   ============================================ */
+
+html {
+  scroll-behavior: smooth;
+  overflow-x: clip;
+  scrollbar-gutter: stable;
+}
+
+body {
+  background: var(--color-brand-dark);
+  color: var(--color-brand-text);
+  font-family: var(--font-mono);
+  overflow-x: clip;
+  width: 100%;
+  /* Smooth body bg transition when navigating between pages with different
+     backgrounds. PageBackground component syncs this via inline style. */
+  transition: background-color 300ms ease;
+}
+
+/* Public site wrapper:
+   - overflow-x:clip prevents horizontal scroll (iOS WebKit fix, stricter than hidden)
+   - max-width:100vw constrains all children to viewport width */
+[data-site] {
+  max-width: 100vw;
+  overflow-x: clip;
+}
+
+/* Custom cursor: hide native cursor when enabled via data attribute.
+   Controlled by site.config.ts features.customCursor → site layout. */
+[data-custom-cursor] {
+  cursor: none;
+}
+[data-custom-cursor] a,
+[data-custom-cursor] button,
+[data-custom-cursor] [role="button"] {
+  cursor: none;
+}
+
+/* Restore cursor inside Sanity Studio */
+[data-sanity-studio], [data-sanity-studio] *, [data-ui], [data-ui] * {
+  cursor: auto !important;
+}
+
+/* Selection color */
+::selection {
+  background: var(--color-brand-primary);
+  color: var(--color-brand-text);
+}
+
+/* ============================================
+   Failed Asset Placeholder
+   Replaces the browser's broken image icon with a subtle,
+   clickable placeholder that invites retry. Applied automatically
+   by lib/asset-retry.ts after exhausting retries.
+   ============================================ */
+
+img[data-asset-failed] {
+  /* Hide the browser's broken image icon */
+  color: transparent;
+  /* Show a neutral placeholder background */
+  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
+  /* Ensure it has visible dimensions even without intrinsic size */
+  min-height: 60px;
+  min-width: 60px;
+  /* Position the "tap to retry" pseudo-element */
+  position: relative;
+}
+
+/* "Tap to retry" overlay text — uses outline trick for pseudo on img */
+img[data-asset-failed]::after {
+  content: "Tap to retry";
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.7);
+  pointer-events: none;
+}
+
+video[data-asset-failed] {
+  background: #1a1a1a;
+  min-height: 60px;
+}

package/styles/globals.css

@@ -0,0 +1,10 @@
+/* @morphika/webframe/styles/globals.css — All-in-one import for convenience.
+   Imports base tokens + animations + admin styles.
+   Instance apps can import this single file, or pick individual parts:
+     @import "@morphika/webframe/styles/base.css";
+     @import "@morphika/webframe/styles/animations.css";
+     @import "@morphika/webframe/styles/admin.css";
+*/
+@import "./base.css";
+@import "./animations.css";
+@import "./admin.css";

package/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": ["node_modules", "_src", "template", "cli", "tools", "docs"]
+}