@featurefoundry/ui 0.1.0

package/README.md

@@ -0,0 +1,18 @@
+# Feature Foundry UI
+
+Shared brand assets, base CSS, and React primitives for Feature Foundry apps.
+
+This package is intentionally small: it keeps future apps visually aligned without forcing every feature into a heavy design system too early.
+
+## Usage
+
+```ts
+import { BrandLink } from "@featurefoundry/ui";
+import "@featurefoundry/ui/styles.css";
+```
+
+For local apps, install it as a file dependency while the package is private:
+
+```sh
+npm install ../featurefoundry-ui
+```

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@featurefoundry/ui",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Shared Feature Foundry brand assets, base styles, and React UI primitives.",
+  "peerDependencies": {
+    "react": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "typescript": "^5.8.0"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "style": "./styles.css",
+  "license": "MIT",
+  "files": [
+    "src",
+    "styles.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.tsx",
+      "import": "./src/index.tsx"
+    },
+    "./styles.css": "./styles.css",
+    "./favicon.svg": "./src/assets/favicon.svg"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/assets/favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="Feature Foundry">
+  <rect width="64" height="64" rx="14" fill="#17201a" />
+  <path fill="#fffdf8" d="M15 16h35v9H25v8h20v9H25v16H15V16Z" />
+  <path fill="#fffdf8" d="M34 33h17v9h-7v16H34V33Z" />
+  <rect x="47" y="48" width="7" height="7" fill="#e05a3c" />
+</svg>

package/src/assets.d.ts

@@ -0,0 +1,2 @@
+declare module "*.png";
+declare module "*.svg";

package/src/index.tsx

@@ -0,0 +1,113 @@
+import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import brandMarkUrl from "./assets/feature-foundry-app-icon.png";
+import brandWordmarkUrl from "./assets/feature-foundry-wordmark.png";
+import faviconUrl from "./assets/favicon.svg";
+
+export { brandMarkUrl, brandWordmarkUrl, faviconUrl };
+
+type BrandLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
+  label?: string;
+};
+
+export function BrandLink({ label = "Feature Foundry", className = "", ...props }: BrandLinkProps) {
+  return (
+    <a className={["ffBrand", className].filter(Boolean).join(" ")} {...props}>
+      <img className="ffBrandMark" src={brandMarkUrl} alt="" aria-hidden="true" />
+      <span>{label}</span>
+    </a>
+  );
+}
+
+type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  active?: boolean;
+};
+
+export function ControlButton({ active = false, className = "", ...props }: ButtonProps) {
+  return (
+    <button
+      className={["ffControlButton", active ? "active" : "", className].filter(Boolean).join(" ")}
+      {...props}
+    />
+  );
+}
+
+export function Card({ children, className = "" }: { children: ReactNode; className?: string }) {
+  return <div className={["ffCard", className].filter(Boolean).join(" ")}>{children}</div>;
+}
+
+export type MenuItem = {
+  label: string;
+  href: string;
+  emphasis?: boolean;
+};
+
+type HamburgerMenuProps = {
+  items: MenuItem[];
+  label?: string;
+};
+
+export function HamburgerMenu({ items, label = "Primary navigation" }: HamburgerMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    function handlePointerDown(event: PointerEvent) {
+      if (!rootRef.current?.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+
+    function handleKeyDown(event: KeyboardEvent) {
+      if (event.key === "Escape") {
+        setIsOpen(false);
+      }
+    }
+
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  return (
+    <div className="ffNavControls" ref={rootRef}>
+      <button
+        className="ffMenuButton"
+        type="button"
+        aria-controls="featurefoundry-menu"
+        aria-expanded={isOpen}
+        aria-label={isOpen ? "Close primary navigation" : "Open primary navigation"}
+        onClick={() => setIsOpen((open) => !open)}
+      >
+        <span className="ffMenuGlyph" aria-hidden="true">
+          <span />
+          <span />
+          <span />
+          <span />
+        </span>
+      </button>
+      <nav
+        className={isOpen ? "ffNavMenu open" : "ffNavMenu"}
+        id="featurefoundry-menu"
+        aria-label={label}
+      >
+        <div className="ffNavMenuPanel">
+          {items.map((item) => (
+            <a
+              className={item.emphasis ? "ffNavLink emphasis" : "ffNavLink"}
+              href={item.href}
+              key={item.href}
+              onClick={() => setIsOpen(false)}
+            >
+              {item.label}
+            </a>
+          ))}
+        </div>
+      </nav>
+    </div>
+  );
+}

package/src/styles.css

@@ -0,0 +1,228 @@
+:root {
+  color: #17201a;
+  background: #f7f5ef;
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin-top: 0;
+}
+
+h1 {
+  max-width: 920px;
+  margin-bottom: 24px;
+  font-size: clamp(2.7rem, 7vw, 6.3rem);
+  line-height: 0.98;
+  letter-spacing: 0;
+}
+
+h2 {
+  margin-bottom: 0;
+  max-width: 760px;
+  font-size: clamp(2rem, 4vw, 3.2rem);
+  line-height: 1.03;
+  letter-spacing: 0;
+}
+
+p {
+  color: #536057;
+  line-height: 1.65;
+}
+
+.ffPageWidth {
+  width: min(1120px, calc(100% - 40px));
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.ffTopBar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  min-height: 78px;
+}
+
+.ffBrand {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 850;
+}
+
+.ffBrandMark {
+  width: 34px;
+  height: 34px;
+  border: 1px solid rgba(23, 32, 26, 0.2);
+  border-radius: 8px;
+  background: #17201a;
+  object-fit: cover;
+}
+
+.ffEyebrow {
+  margin: 0 0 14px;
+  color: #b4432f;
+  font-size: 0.76rem;
+  font-weight: 850;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.ffCard {
+  border: 1px solid rgba(23, 32, 26, 0.14);
+  border-radius: 8px;
+  background: #fffdf8;
+}
+
+.ffBackLink,
+.ffControlButton {
+  display: inline-flex;
+  min-height: 42px;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(23, 32, 26, 0.18);
+  border-radius: 8px;
+  padding: 0 14px;
+  background: #fffdf8;
+  color: #536057;
+  cursor: pointer;
+  font-weight: 820;
+}
+
+.ffBackLink:hover,
+.ffControlButton:hover {
+  border-color: rgba(180, 67, 47, 0.55);
+  color: #17201a;
+}
+
+.ffControlButton.active {
+  border-color: #17201a;
+  background: #17201a;
+  color: #fffdf8;
+}
+
+.ffControlButton:disabled {
+  cursor: not-allowed;
+  opacity: 0.46;
+}
+
+@media (max-width: 860px) {
+  .ffPageWidth {
+    width: min(100% - 24px, 1120px);
+  }
+}
+
+.ffNavControls {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ffMenuButton {
+  display: inline-grid;
+  width: 46px;
+  height: 46px;
+  place-items: center;
+  border: 1px solid rgba(23, 32, 26, 0.18);
+  border-radius: 8px;
+  padding: 0;
+  background: #fffdf8;
+  color: #17201a;
+  cursor: pointer;
+}
+
+.ffMenuGlyph {
+  display: grid;
+  grid-template-columns: repeat(2, 6px);
+  gap: 5px;
+}
+
+.ffMenuGlyph span {
+  display: block;
+  width: 6px;
+  height: 6px;
+  border-radius: 2px;
+  background: currentColor;
+}
+
+.ffMenuGlyph span:last-child {
+  background: #e05a3c;
+}
+
+.ffMenuButton:hover,
+.ffMenuButton[aria-expanded="true"] {
+  background: rgba(23, 32, 26, 0.08);
+}
+
+.ffNavMenu {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 10;
+  display: none;
+  min-width: 220px;
+}
+
+.ffNavMenu.open {
+  display: block;
+}
+
+.ffNavMenuPanel {
+  display: grid;
+  gap: 4px;
+  border: 1px solid rgba(23, 32, 26, 0.14);
+  border-radius: 8px;
+  padding: 8px;
+  background: #fffdf8;
+  box-shadow: 0 18px 42px rgba(23, 32, 26, 0.12);
+  color: #536057;
+  font-size: 0.94rem;
+}
+
+.ffNavLink {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 8px;
+  padding: 9px 11px;
+}
+
+.ffNavLink:hover {
+  background: rgba(23, 32, 26, 0.08);
+  color: #17201a;
+}
+
+.ffNavLink.emphasis {
+  color: #b4432f;
+  font-weight: 760;
+}

package/styles.css

@@ -0,0 +1 @@
+@import "./src/styles.css";