diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
new file mode 100644
index 000000000..0aa3f72f9
--- /dev/null
+++ b/.github/workflows/ci.yml
@@ -0,0 +1,181 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Build Dependencies
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Cache dependencies
+        uses: actions/cache@v4
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-${{ hashFiles('**/bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Build precision-diffs
+        run: bun run diffs:build
+
+      - name: Build storage-elements-next
+        run: bun run storage-elements-next:build
+
+      - name: Build docs (generates .source)
+        run: bun run docs:build
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: build-output
+          path: |
+            packages/precision-diffs/dist/
+            packages/storage-elements-next/dist/
+            apps/docs/.source/
+            apps/docs/.next/
+          retention-days: 1
+
+  eslint:
+    name: ESLint
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Cache dependencies
+        uses: actions/cache@v4
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-${{ hashFiles('**/bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Download build artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: build-output
+
+      - name: Run ESLint
+        run: bun run lint
+
+  stylelint:
+    name: Stylelint
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Cache dependencies
+        uses: actions/cache@v4
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-${{ hashFiles('**/bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Run Stylelint
+        run: bun run lint:css
+
+  prettier:
+    name: Prettier
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Cache dependencies
+        uses: actions/cache@v4
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-${{ hashFiles('**/bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Run Prettier check
+        run: bun run format:check
+
+  typecheck:
+    name: TypeScript
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - name: Cache dependencies
+        uses: actions/cache@v4
+        with:
+          path: ~/.bun/install/cache
+          key: ${{ runner.os }}-bun-${{ hashFiles('**/bun.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-bun-
+
+      - name: Install dependencies
+        run: bun install --frozen-lockfile
+
+      - name: Download build artifacts
+        uses: actions/download-artifact@v4
+        with:
+          name: build-output
+
+      - name: Type check - precision-diffs
+        run: bun run diffs:tsc
+
+      - name: Type check - demo
+        run: bun run demo:tsc
+
+      # mdo-do: Restore docs type checking once Fumadocs are removed
+      # - name: Type check - docs
+      #   run: bun run docs:tsc
+
+      - name: Type check - storage-elements
+        run: bun run storage-elements:tsc
diff --git a/.stylelintignore b/.stylelintignore
index b792e8cf0..23450469e 100644
--- a/.stylelintignore
+++ b/.stylelintignore
@@ -1,3 +1,6 @@
+# Demo app
+apps/demo/src/styles.css
+
 # Dependencies
 node_modules/
 **/node_modules/
diff --git a/.vscode/settings.json b/.vscode/settings.json
index fe06703b5..b8e270ffd 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -29,8 +29,9 @@
   "files.associations": {
     "*.css": "tailwindcss"
   },
-  "stylelint.validate": ["css"],
+  "stylelint.validate": ["css", "postcss"],
   "css.validate": false,
+  "postcss.validate": false,
   "stylelint.snippet": ["css"],
   "[yaml]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
diff --git a/apps/demo/src/style.css b/apps/demo/src/style.css
index 45f65425c..403b82e2f 100644
--- a/apps/demo/src/style.css
+++ b/apps/demo/src/style.css
@@ -45,8 +45,8 @@ body,
   display: block;
   margin: 0;
   padding: 0;
-  min-height: 100vh;
   min-width: 100dvw;
+  min-height: 100vh;
   min-height: 100dvh;
   overscroll-behavior: none;
   touch-action: manipulation;
@@ -61,7 +61,7 @@ textarea {
   appearance: none;
   border-radius: 0;
   border: 1px solid var(--fg);
-  padding: 4px 4px;
+  padding: 4px;
   outline: none;
   resize: none;
   margin: 0;
@@ -163,7 +163,7 @@ code {
 .files-input {
   position: fixed;
   z-index: 20;
-  inset: 50px 0 0 0;
+  inset: 50px 0 0;
   padding: 10px;
   display: grid;
   grid-template-columns: 1fr 1fr;
diff --git a/apps/docs/app/css/_button.css b/apps/docs/app/css/_button.css
deleted file mode 100644
index 6df8a068f..000000000
--- a/apps/docs/app/css/_button.css
+++ /dev/null
@@ -1,31 +0,0 @@
-.btn {
-  flex-shrink: 0;
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--btn-fg, var(--color-fg2));
-  background-clip: padding-box;
-  background-color: var(--btn-bg, var(--color-bg3));
-  border: 1px solid transparent;
-  border-radius: var(--radius-2);
-
-  &.active {
-    background-color: var(--color-bg);
-    color: var(--color-fg);
-    border-color: var(--color-border15);
-  }
-}
-
-.btn:hover {
-  color: var(--color-fg);
-}
-
-.btn-group {
-  display: inline-flex;
-  padding: 0.125rem;
-  background-color: var(--color-bg3);
-  border-radius: var(--radius-2);
-}
diff --git a/apps/docs/app/css/_code.css b/apps/docs/app/css/_code.css
deleted file mode 100644
index a7730b2e7..000000000
--- a/apps/docs/app/css/_code.css
+++ /dev/null
@@ -1,67 +0,0 @@
-.code-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 0.75rem 1.25rem;
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  color: var(--color-fg1);
-  background-color: var(--color-bg);
-  border: 0;
-  border-radius: var(--radius-2);
-  cursor: pointer;
-
-  & > svg {
-    color: var(--color-fg2);
-  }
-
-  &:hover {
-    color: var(--color-fg);
-
-    & > svg {
-      color: var(--color-fg);
-    }
-  }
-}
-
-.codeblock {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 1rem;
-  width: 100%;
-  margin-top: 1rem;
-  padding: 1.5rem;
-  font-family: var(--font-mono);
-  font-size: 0.875rem;
-  color: var(--color-fg);
-  background-color: var(--color-bg);
-  border-radius: var(--radius-2);
-
-  & pre {
-    width: 100%;
-  }
-
-  &::before {
-    position: absolute;
-    top: 0.75rem;
-    left: 1.5rem;
-    display: block;
-    content: attr(lang);
-    font-family: var(--font-body);
-    font-size: 0.75rem;
-    font-weight: 500;
-    color: var(--color-fg3);
-  }
-
-  & button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    margin: -0.5rem;
-    background: transparent;
-    border: 0;
-  }
-}
diff --git a/apps/docs/app/css/_colors.css b/apps/docs/app/css/_colors.css
deleted file mode 100644
index 7bde575b2..000000000
--- a/apps/docs/app/css/_colors.css
+++ /dev/null
@@ -1,194 +0,0 @@
-:root {
-  --color-black: #000;
-  --color-white: #fff;
-
-  --color-red: oklch(65% 0.24 24);
-  --color-orange: oklch(75% 0.17 55);
-  --color-yellow: oklch(86% 0.18 90);
-  --color-green: oklch(70% 0.2 148);
-  --color-mint: oklch(75% 0.14 180);
-  --color-teal: oklch(74% 0.16 202);
-  --color-cyan: oklch(75% 0.14 224);
-  --color-blue: oklch(63.5% 0.21 250);
-  --color-indigo: oklch(56% 0.25 290);
-  --color-purple: oklch(62% 0.26 320);
-  --color-pink: oklch(65% 0.24 8);
-  --color-brown: oklch(64% 0.08 55);
-  --color-gray: oklch(65% 0.01 286);
-
-  /* --color-red: #ff3240;
-  --color-orange: #fe8c2c;
-  --color-yellow: #feca00;
-  --color-green: #0dbe4e;
-  --color-mint: #00cab1;
-  --color-teal: #00c4d0;
-  --color-cyan: #08c0ef;
-  --color-blue: #008df4;
-  --color-indigo: #7b43f8;
-  --color-purple: #c635e4;
-  --color-pink: #fc2b73;
-  --color-brown: #b27f5c;
-  --color-gray: #8e8e95; */
-
-  --color-red050: color-mix(in oklch, white 90%, var(--color-red));
-  --color-red100: color-mix(in oklch, white 80%, var(--color-red));
-  --color-red200: color-mix(in oklch, white 60%, var(--color-red));
-  --color-red300: color-mix(in oklch, white 40%, var(--color-red));
-  --color-red400: color-mix(in oklch, white 20%, var(--color-red));
-  --color-red500: var(--color-red);
-  --color-red600: color-mix(in oklch, black 15%, var(--color-red));
-  --color-red700: color-mix(in oklch, black 30%, var(--color-red));
-  --color-red800: color-mix(in oklch, black 45%, var(--color-red));
-  --color-red900: color-mix(in oklch, black 60%, var(--color-red));
-  --color-red950: color-mix(in oklch, black 75%, var(--color-red));
-
-  --color-orange050: color-mix(in oklch, white 90%, var(--color-orange));
-  --color-orange100: color-mix(in oklch, white 80%, var(--color-orange));
-  --color-orange200: color-mix(in oklch, white 60%, var(--color-orange));
-  --color-orange300: color-mix(in oklch, white 40%, var(--color-orange));
-  --color-orange400: color-mix(in oklch, white 20%, var(--color-orange));
-  --color-orange500: var(--color-orange);
-  --color-orange600: color-mix(in oklch, black 15%, var(--color-orange));
-  --color-orange700: color-mix(in oklch, black 30%, var(--color-orange));
-  --color-orange800: color-mix(in oklch, black 45%, var(--color-orange));
-  --color-orange900: color-mix(in oklch, black 60%, var(--color-orange));
-  --color-orange950: color-mix(in oklch, black 75%, var(--color-orange));
-
-  --color-yellow050: color-mix(in oklch, white 90%, var(--color-yellow));
-  --color-yellow100: color-mix(in oklch, white 80%, var(--color-yellow));
-  --color-yellow200: color-mix(in oklch, white 60%, var(--color-yellow));
-  --color-yellow300: color-mix(in oklch, white 40%, var(--color-yellow));
-  --color-yellow400: color-mix(in oklch, white 20%, var(--color-yellow));
-  --color-yellow500: var(--color-yellow);
-  --color-yellow600: color-mix(in oklch, black 15%, var(--color-yellow));
-  --color-yellow700: color-mix(in oklch, black 30%, var(--color-yellow));
-  --color-yellow800: color-mix(in oklch, black 45%, var(--color-yellow));
-  --color-yellow900: color-mix(in oklch, black 60%, var(--color-yellow));
-  --color-yellow950: color-mix(in oklch, black 75%, var(--color-yellow));
-
-  --color-green050: color-mix(in oklch, white 90%, var(--color-green));
-  --color-green100: color-mix(in oklch, white 80%, var(--color-green));
-  --color-green200: color-mix(in oklch, white 60%, var(--color-green));
-  --color-green300: color-mix(in oklch, white 40%, var(--color-green));
-  --color-green400: color-mix(in oklch, white 20%, var(--color-green));
-  --color-green500: var(--color-green);
-  --color-green600: color-mix(in oklch, black 15%, var(--color-green));
-  --color-green700: color-mix(in oklch, black 30%, var(--color-green));
-  --color-green800: color-mix(in oklch, black 45%, var(--color-green));
-  --color-green900: color-mix(in oklch, black 60%, var(--color-green));
-  --color-green950: color-mix(in oklch, black 75%, var(--color-green));
-
-  --color-mint050: color-mix(in oklch, white 90%, var(--color-mint));
-  --color-mint100: color-mix(in oklch, white 80%, var(--color-mint));
-  --color-mint200: color-mix(in oklch, white 60%, var(--color-mint));
-  --color-mint300: color-mix(in oklch, white 40%, var(--color-mint));
-  --color-mint400: color-mix(in oklch, white 20%, var(--color-mint));
-  --color-mint500: var(--color-mint);
-  --color-mint600: color-mix(in oklch, black 15%, var(--color-mint));
-  --color-mint700: color-mix(in oklch, black 30%, var(--color-mint));
-  --color-mint800: color-mix(in oklch, black 45%, var(--color-mint));
-  --color-mint900: color-mix(in oklch, black 60%, var(--color-mint));
-  --color-mint950: color-mix(in oklch, black 75%, var(--color-mint));
-
-  --color-teal050: color-mix(in oklch, white 90%, var(--color-teal));
-  --color-teal100: color-mix(in oklch, white 80%, var(--color-teal));
-  --color-teal200: color-mix(in oklch, white 60%, var(--color-teal));
-  --color-teal300: color-mix(in oklch, white 40%, var(--color-teal));
-  --color-teal400: color-mix(in oklch, white 20%, var(--color-teal));
-  --color-teal500: var(--color-teal);
-  --color-teal600: color-mix(in oklch, black 15%, var(--color-teal));
-  --color-teal700: color-mix(in oklch, black 30%, var(--color-teal));
-  --color-teal800: color-mix(in oklch, black 45%, var(--color-teal));
-  --color-teal900: color-mix(in oklch, black 60%, var(--color-teal));
-  --color-teal950: color-mix(in oklch, black 75%, var(--color-teal));
-
-  --color-cyan050: color-mix(in oklch, white 90%, var(--color-cyan));
-  --color-cyan100: color-mix(in oklch, white 80%, var(--color-cyan));
-  --color-cyan200: color-mix(in oklch, white 60%, var(--color-cyan));
-  --color-cyan300: color-mix(in oklch, white 40%, var(--color-cyan));
-  --color-cyan400: color-mix(in oklch, white 20%, var(--color-cyan));
-  --color-cyan500: var(--color-cyan);
-  --color-cyan600: color-mix(in oklch, black 15%, var(--color-cyan));
-  --color-cyan700: color-mix(in oklch, black 30%, var(--color-cyan));
-  --color-cyan800: color-mix(in oklch, black 45%, var(--color-cyan));
-  --color-cyan900: color-mix(in oklch, black 60%, var(--color-cyan));
-  --color-cyan950: color-mix(in oklch, black 75%, var(--color-cyan));
-
-  --color-blue050: color-mix(in oklch, white 90%, var(--color-blue));
-  --color-blue100: color-mix(in oklch, white 80%, var(--color-blue));
-  --color-blue200: color-mix(in oklch, white 60%, var(--color-blue));
-  --color-blue300: color-mix(in oklch, white 40%, var(--color-blue));
-  --color-blue400: color-mix(in oklch, white 20%, var(--color-blue));
-  --color-blue500: var(--color-blue);
-  --color-blue600: color-mix(in oklch, black 15%, var(--color-blue));
-  --color-blue700: color-mix(in oklch, black 30%, var(--color-blue));
-  --color-blue800: color-mix(in oklch, black 45%, var(--color-blue));
-  --color-blue900: color-mix(in oklch, black 60%, var(--color-blue));
-  --color-blue950: color-mix(in oklch, black 75%, var(--color-blue));
-
-  --color-indigo050: color-mix(in oklch, white 90%, var(--color-indigo));
-  --color-indigo100: color-mix(in oklch, white 80%, var(--color-indigo));
-  --color-indigo200: color-mix(in oklch, white 60%, var(--color-indigo));
-  --color-indigo300: color-mix(in oklch, white 40%, var(--color-indigo));
-  --color-indigo400: color-mix(in oklch, white 20%, var(--color-indigo));
-  --color-indigo500: var(--color-indigo);
-  --color-indigo600: color-mix(in oklch, black 15%, var(--color-indigo));
-  --color-indigo700: color-mix(in oklch, black 30%, var(--color-indigo));
-  --color-indigo800: color-mix(in oklch, black 45%, var(--color-indigo));
-  --color-indigo900: color-mix(in oklch, black 60%, var(--color-indigo));
-  --color-indigo950: color-mix(in oklch, black 75%, var(--color-indigo));
-
-  --color-purple050: color-mix(in oklch, white 90%, var(--color-purple));
-  --color-purple100: color-mix(in oklch, white 80%, var(--color-purple));
-  --color-purple200: color-mix(in oklch, white 60%, var(--color-purple));
-  --color-purple300: color-mix(in oklch, white 40%, var(--color-purple));
-  --color-purple400: color-mix(in oklch, white 20%, var(--color-purple));
-  --color-purple500: var(--color-purple);
-  --color-purple600: color-mix(in oklch, black 15%, var(--color-purple));
-  --color-purple700: color-mix(in oklch, black 30%, var(--color-purple));
-  --color-purple800: color-mix(in oklch, black 45%, var(--color-purple));
-  --color-purple900: color-mix(in oklch, black 60%, var(--color-purple));
-  --color-purple950: color-mix(in oklch, black 75%, var(--color-purple));
-
-  --color-pink050: color-mix(in oklch, white 90%, var(--color-pink));
-  --color-pink100: color-mix(in oklch, white 80%, var(--color-pink));
-  --color-pink200: color-mix(in oklch, white 60%, var(--color-pink));
-  --color-pink300: color-mix(in oklch, white 40%, var(--color-pink));
-  --color-pink400: color-mix(in oklch, white 20%, var(--color-pink));
-  --color-pink500: var(--color-pink);
-  --color-pink600: color-mix(in oklch, black 15%, var(--color-pink));
-  --color-pink700: color-mix(in oklch, black 30%, var(--color-pink));
-  --color-pink800: color-mix(in oklch, black 45%, var(--color-pink));
-  --color-pink900: color-mix(in oklch, black 60%, var(--color-pink));
-  --color-pink950: color-mix(in oklch, black 75%, var(--color-pink));
-
-  --color-brown050: color-mix(in oklch, white 90%, var(--color-brown));
-  --color-brown100: color-mix(in oklch, white 80%, var(--color-brown));
-  --color-brown200: color-mix(in oklch, white 60%, var(--color-brown));
-  --color-brown300: color-mix(in oklch, white 40%, var(--color-brown));
-  --color-brown400: color-mix(in oklch, white 20%, var(--color-brown));
-  --color-brown500: var(--color-brown);
-  --color-brown600: color-mix(in oklch, black 15%, var(--color-brown));
-  --color-brown700: color-mix(in oklch, black 30%, var(--color-brown));
-  --color-brown800: color-mix(in oklch, black 45%, var(--color-brown));
-  --color-brown900: color-mix(in oklch, black 60%, var(--color-brown));
-  --color-brown950: color-mix(in oklch, black 75%, var(--color-brown));
-
-  --color-gray020: color-mix(in oklch, white 95%, var(--color-gray));
-  --color-gray040: color-mix(in oklch, white 93%, var(--color-gray));
-  --color-gray060: color-mix(in oklch, white 91%, var(--color-gray));
-  --color-gray080: color-mix(in oklch, white 85%, var(--color-gray));
-  --color-gray100: color-mix(in oklch, white 80%, var(--color-gray));
-  --color-gray200: color-mix(in oklch, white 60%, var(--color-gray));
-  --color-gray300: color-mix(in oklch, white 40%, var(--color-gray));
-  --color-gray400: color-mix(in oklch, white 20%, var(--color-gray));
-  --color-gray500: var(--color-gray);
-  --color-gray600: color-mix(in oklch, black 15%, var(--color-gray));
-  --color-gray700: color-mix(in oklch, black 30%, var(--color-gray));
-  --color-gray800: color-mix(in oklch, black 45%, var(--color-gray));
-  --color-gray900: color-mix(in oklch, black 75%, var(--color-gray));
-  --color-gray920: color-mix(in oklch, black 80%, var(--color-gray));
-  --color-gray940: color-mix(in oklch, black 85%, var(--color-gray));
-  --color-gray960: color-mix(in oklch, black 90%, var(--color-gray));
-  --color-gray980: color-mix(in oklch, black 95%, var(--color-gray));
-}
diff --git a/apps/docs/app/css/_docs.css b/apps/docs/app/css/_docs.css
deleted file mode 100644
index f03785f91..000000000
--- a/apps/docs/app/css/_docs.css
+++ /dev/null
@@ -1,75 +0,0 @@
-.docs-container {
-  display: grid;
-  gap: 1rem;
-  padding-top: 2rem;
-  position: relative;
-
-  @media (width > 768px) {
-    padding-top: 3rem;
-    gap: 2rem;
-    grid-template-columns: 240px 1fr;
-  }
-
-  .docs-nav {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  .nav-subsection {
-    margin-left: 18px;
-    padding-left: 6px;
-    border-left: 1px solid var(--color-border);
-  }
-
-  .nav-divider {
-    height: 1px;
-    background-color: var(--color-border);
-    margin: 0.75rem 0;
-  }
-}
-
-.mobile-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: 998;
-  display: none;
-  background-color: rgb(0 0 0 / 0.5);
-}
-
-@media (max-width: 768px) {
-  .mobile-overlay {
-    display: block;
-  }
-
-  .docs-sidebar {
-    position: fixed;
-    top: 0;
-    left: -280px;
-    width: 280px;
-    height: 100vh;
-    background-color: var(--color-bg);
-    border-right: 1px solid var(--color-border);
-    z-index: 999;
-    transition: left 0.3s ease;
-    overflow-y: auto;
-    padding: 1rem;
-    box-shadow: 2px 0 8px rgb(0 0 0 / 0.1);
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .docs-sidebar.mobile-open {
-    left: 0;
-  }
-
-  .docs-main {
-    width: 100%;
-  }
-
-  body.mobile-menu-open {
-    overflow: hidden;
-  }
-}
diff --git a/apps/docs/app/css/_layout.css b/apps/docs/app/css/_layout.css
deleted file mode 100644
index 005357938..000000000
--- a/apps/docs/app/css/_layout.css
+++ /dev/null
@@ -1,94 +0,0 @@
-.container {
-  width: 960px;
-  max-width: 100%;
-  padding: 20px;
-  margin: 0 auto;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-  padding-bottom: 20px;
-  border-bottom: 1px solid var(--color-border);
-}
-
-.brand-link {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  font-size: 1.125rem;
-  font-weight: 500;
-  line-height: 20px;
-}
-.brand-subtitle {
-  color: var(--color-fg3);
-  font-size: 0.75rem;
-  font-weight: 400;
-
-  > span {
-    text-transform: uppercase;
-  }
-}
-
-.nav {
-  display: flex;
-  gap: 1rem;
-  font-size: 14px;
-  line-height: 20px;
-}
-
-.nav-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  color: var(--color-fg2);
-}
-
-.nav-link:hover {
-  color: var(--color-fg);
-}
-
-.nav-link.active {
-  color: var(--color-fg);
-  font-weight: 500;
-}
-
-.nav-link svg {
-  width: 16px;
-  height: 16px;
-}
-
-.features {
-  padding-block: 3rem;
-
-  > p {
-    max-width: 760px;
-  }
-
-  > h3,
-  > p.fs-sm {
-    max-width: 560px;
-  }
-
-  &:not(:last-child) {
-    border-bottom: 1px solid var(--color-border);
-  }
-}
-
-.hero {
-  max-width: 760px;
-  padding-block: 4rem;
-}
-
-.main-title {
-  font-size: 2.5rem;
-  font-weight: 600;
-  line-height: 1;
-}
-
-.description {
-  margin-top: 0.5rem;
-  margin-bottom: 1.5rem;
-  font-size: 1rem;
-}
diff --git a/apps/docs/app/css/_reset.css b/apps/docs/app/css/_reset.css
deleted file mode 100644
index c966274a3..000000000
--- a/apps/docs/app/css/_reset.css
+++ /dev/null
@@ -1,61 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-body {
-  font-family: var(--font-body);
-  font-size: var(--font-size-ui);
-  line-height: 1.5;
-  color: var(--color-fg2);
-  background-color: var(--color-bg1);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-ol,
-ul,
-pre {
-  margin: 0;
-  padding: 0;
-}
-
-input,
-select,
-textarea,
-button {
-  display: block;
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-input,
-select,
-textarea {
-  width: 100%;
-}
-
-a {
-  color: var(--color-fg);
-  /* font-weight: 500; */
-  text-decoration: none;
-
-  &:not([class]) {
-    /* font-weight: 500; */
-    text-decoration: underline;
-    text-underline-offset: 0.2em;
-    text-decoration-thickness: 0.5px;
-    text-decoration-color: var(--color-fg4);
-
-    &:hover {
-      text-decoration-color: var(--color-fg);
-      text-decoration-thickness: 1px;
-    }
-  }
-}
diff --git a/apps/docs/app/css/_theme.css b/apps/docs/app/css/_theme.css
deleted file mode 100644
index 16e830ac4..000000000
--- a/apps/docs/app/css/_theme.css
+++ /dev/null
@@ -1,80 +0,0 @@
-:root {
-  --global-font-body: var(--font-ui, var(--font-body));
-  --global-font-mono: var(--font-code, var(--font-mono));
-  --global-font-size: var(--font-size-ui, 14px);
-  --global-code-font-size: var(--font-size-code, 12px);
-  --global-color-placeholder: var(--color-fg3);
-  --global-color-border: var(--color-border);
-  --font-body:
-    var(--font-ui, var(--font-berkeley-mono)), system-ui, -apple-system,
-    'Segoe UI', Roboto, 'Helvetica Neue', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-mono: var(--font-code, ui-monospace), 'SFMono-Regular', monospace;
-  --color-bg: #fff;
-  --color-bg0: var(--color-gray020);
-  --color-bg1: var(--color-gray040);
-  --color-bg2: var(--color-gray060);
-  --color-bg3: var(--color-gray080);
-  --color-fg: var(--color-gray980);
-  --color-fg1: var(--color-gray800);
-  --color-fg2: var(--color-gray700);
-  --color-fg3: var(--color-gray500);
-  --color-fg4: var(--color-gray400);
-  --color-border: var(--color-gray100);
-  --color-border5: color-mix(in srgb, var(--color-fg) 5%, transparent);
-  --color-border8: color-mix(in srgb, var(--color-fg) 8%, transparent);
-  --color-border10: color-mix(in srgb, var(--color-fg) 10%, transparent);
-  --color-border15: color-mix(in srgb, var(--color-fg) 15%, transparent);
-  --radius-1: 4px;
-  --radius-2: 6px;
-  --radius-3: 9px;
-  --radius-4: 12px;
-  --radius-5: 16px;
-  --shadow-xxs: 0 1px 2px 0 #0000000a;
-  --shadow-xs: 0 2px 4px #00000013;
-  --shadow-sm: 0 1px 2px #0000000d;
-  --shadow-md: 0 2px 2px #0000000d, 0 8px 16px -4px #00000013;
-  --shadow-lg: 0 4px 8px -4px #0000000d, 0 16px 24px -8px #0000001a;
-  --shadow-xl: 0 8px 16px -4px #0000000d, 0 24px 32px -8px #00000013;
-  --focus-ring: 2px solid var(--color-blue400);
-  --focus-ring-danger: 2px solid var(--color-red400);
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-bg: var(--color-gray980);
-    --color-bg0: var(--color-gray960);
-    --color-bg1: var(--color-gray940);
-    --color-bg2: var(--color-gray920);
-    --color-bg3: var(--color-gray900);
-    --color-fg: var(--color-gray100);
-    --color-fg1: var(--color-gray200);
-    --color-fg2: var(--color-gray300);
-    --color-fg3: var(--color-gray500);
-    --color-fg4: var(--color-gray600);
-    --color-border: var(--color-gray900);
-    --color-border5: #ffffff0d;
-    --color-border8: #ffffff14;
-    --color-border10: #ffffff1a;
-    --color-border15: #ffffff26;
-  }
-}
-
-/* copied here */
-[data-theme='dark'] {
-  --color-bg: var(--color-gray980);
-  --color-bg0: var(--color-gray960);
-  --color-bg1: var(--color-gray940);
-  --color-bg2: var(--color-gray920);
-  --color-bg3: var(--color-gray900);
-  --color-fg: var(--color-gray100);
-  --color-fg1: var(--color-gray200);
-  --color-fg2: var(--color-gray300);
-  --color-fg3: var(--color-gray500);
-  --color-fg4: var(--color-gray600);
-  --color-border: var(--color-gray900);
-  --color-border5: #ffffff0d;
-  --color-border8: #ffffff14;
-  --color-border10: #ffffff1a;
-  --color-border15: #ffffff26;
-}
diff --git a/apps/docs/app/css/_type.css b/apps/docs/app/css/_type.css
deleted file mode 100644
index d99a5fb84..000000000
--- a/apps/docs/app/css/_type.css
+++ /dev/null
@@ -1,22 +0,0 @@
-h1,
-h2,
-h3 {
-  color: var(--color-fg);
-}
-
-h2 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  line-height: 1.25;
-}
-
-h3 {
-  margin-top: 2rem;
-  font-size: 1.25rem;
-  font-weight: 600;
-  line-height: 1.5;
-}
-
-p {
-  margin-bottom: 1rem;
-}
diff --git a/apps/docs/app/css/_utilities.css b/apps/docs/app/css/_utilities.css
deleted file mode 100644
index 28b170872..000000000
--- a/apps/docs/app/css/_utilities.css
+++ /dev/null
@@ -1,139 +0,0 @@
-.fg {
-  color: var(--color-fg);
-}
-.fg1 {
-  color: var(--color-fg1);
-}
-.fg2 {
-  color: var(--color-fg2);
-}
-.fg3 {
-  color: var(--color-fg3);
-}
-.fg4 {
-  color: var(--color-fg4);
-}
-
-.border {
-  border: 1px solid var(--color-border);
-}
-.border5 {
-  border: 1px solid var(--color-border5);
-}
-.border8 {
-  border: 1px solid var(--color-border8);
-}
-.border10 {
-  border: 1px solid var(--color-border10);
-}
-.border15 {
-  border: 1px solid var(--color-border15);
-}
-
-.bg {
-  color: var(--color-bg);
-}
-.bg0 {
-  color: var(--color-bg0);
-}
-.bg1 {
-  color: var(--color-bg1);
-}
-.bg2 {
-  color: var(--color-bg2);
-}
-.bg3 {
-  color: var(--color-bg3);
-}
-
-.fs-sm {
-  font-size: 0.875rem;
-}
-.fs-md {
-  font-size: 1rem;
-}
-.fs-lg {
-  font-size: 1.25rem;
-}
-.fs-xl {
-  font-size: 1.5rem;
-}
-.fs-2xl {
-  font-size: 2rem;
-}
-.fs-3xl {
-  font-size: 2.5rem;
-}
-.fs-4xl {
-  font-size: 3rem;
-}
-
-[class*='hstack'],
-[class*='vstack'] {
-  display: flex;
-  gap: var(--gap, 0.5rem);
-  flex-direction: var(--dir);
-  align-items: var(--align);
-  justify-content: var(--justify);
-}
-
-.hstack {
-  --dir: row;
-  --align: center;
-  --justify: flex-start;
-}
-
-.vstack,
-[class*='vstack'] {
-  --dir: column;
-  --align: flex-start;
-}
-
-@media (width > 768px) {
-  .md\:hstack {
-    --dir: row;
-    --align: center;
-    --justify: flex-start;
-  }
-  .md\:vstack {
-    --dir: column;
-    --align: flex-start;
-  }
-}
-
-@media (width > 1024px) {
-  .lg\:hstack {
-    --dir: row;
-    --align: center;
-    --justify: flex-start;
-  }
-  .lg\:vstack {
-    --dir: column;
-    --align: flex-start;
-  }
-}
-
-.gridstack {
-  display: grid;
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-
-  > * {
-    grid-column-start: 1;
-    grid-row-start: 1;
-  }
-}
-
-.d-grid {
-  display: grid;
-  grid-template-columns: repeat(var(--columns, 1), minmax(0, 1fr));
-  gap: var(--gap, 1rem);
-}
-.cols-2 {
-  --columns: 2;
-}
-
-@media (width > 768px) {
-  .md\:cols-2 {
-    --columns: 2;
-  }
-}
diff --git a/apps/docs/app/css/index.css b/apps/docs/app/css/index.css
deleted file mode 100644
index ae840bf26..000000000
--- a/apps/docs/app/css/index.css
+++ /dev/null
@@ -1,17 +0,0 @@
-@layer colors, reset, theme, type, layout, components, custom, utilities;
-
-@import './_colors.css' layer(colors);
-@import './_reset.css' layer(reset);
-@import './_theme.css' layer(theme);
-@import './_type.css' layer(type);
-@import './_code.css' layer(type);
-@import './_layout.css' layer(layout);
-@import './_docs.css' layer(layout);
-@import './_button.css' layer(components);
-@import './_utilities.css' layer(utilities);
-@import '../home.css' layer(custom);
-
-:root {
-  --font-ui: Geist;
-  --font-code: Geist Mono;
-}
diff --git a/apps/docs/app/globals.css b/apps/docs/app/globals.css
index 450792ba1..a76b3f34d 100644
--- a/apps/docs/app/globals.css
+++ b/apps/docs/app/globals.css
@@ -78,6 +78,7 @@
   --sidebar-accent-foreground: oklch(0.205 0 0);
   --sidebar-border: oklch(0.922 0 0);
   --sidebar-ring: oklch(0.708 0 0);
+  color-scheme: light;
 }
 
 .dark {
@@ -112,6 +113,7 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
+  color-scheme: dark;
 }
 
 :root {
@@ -119,12 +121,6 @@
   color-scheme: light;
   -webkit-font-smoothing: antialiased;
 }
-.light {
-  color-scheme: light;
-}
-.dark {
-  color-scheme: dark;
-}
 
 @layer base {
   * {
diff --git a/apps/docs/app/home.css b/apps/docs/app/home.css
deleted file mode 100644
index 1ce529729..000000000
--- a/apps/docs/app/home.css
+++ /dev/null
@@ -1,170 +0,0 @@
-.icon-showcase {
-  display: flex;
-  gap: 0.5rem;
-  margin-top: 2rem;
-}
-
-.icon-showcase svg {
-  width: 16px;
-  height: 16px;
-  opacity: 0.7;
-  transition: opacity 0.2s ease;
-}
-
-.icon-showcase svg:hover {
-  opacity: 1;
-}
-
-/* Color Palette Styles */
-.color-palette {
-  margin: 3rem 0;
-}
-
-.color-palette h2 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-bottom: 1.5rem;
-  color: var(--color-gray800);
-}
-
-.color-palette h3 {
-  font-size: 1.25rem;
-  font-weight: 500;
-  margin: 2rem 0 1rem 0;
-  color: var(--color-gray700);
-}
-
-.major-hues {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 1rem;
-  margin-bottom: 3rem;
-}
-
-.hue-swatch {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.hue-color {
-  width: 80px;
-  height: 80px;
-  border-radius: var(--radius-2);
-  border: 1px solid var(--color-gray200);
-  box-shadow: var(--shadow-sm);
-  transition:
-    transform 0.2s ease,
-    box-shadow 0.2s ease;
-}
-
-.hue-color:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-md);
-}
-
-.hue-name {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-gray700);
-  text-align: center;
-}
-
-.color-scale {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-  margin-bottom: 3rem;
-}
-
-.color-scale-row {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-.color-scale-name {
-  font-size: 1rem;
-  font-weight: 500;
-  color: var(--color-gray800);
-  margin-bottom: 0.25rem;
-}
-
-.color-scale-swatches {
-  display: flex;
-  gap: 2px;
-  border-radius: var(--radius-2);
-  overflow: hidden;
-  /* box-shadow: var(--shadow-sm); */
-}
-
-.color-scale-swatch {
-  flex: 1;
-  height: 40px;
-  min-width: 20px;
-  position: relative;
-  transition: transform 0.2s ease;
-}
-
-.color-scale-swatch:hover {
-  transform: scaleY(1.1);
-  z-index: 1;
-  /* box-shadow: var(--shadow-md); */
-}
-
-.color-scale-swatch::after {
-  content: attr(data-shade);
-  position: absolute;
-  bottom: 2px;
-  left: 50%;
-  transform: translateX(-50%);
-  font-size: 0.625rem;
-  font-weight: 500;
-  color: white;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
-  opacity: 0;
-  transition: opacity 0.2s ease;
-}
-
-.color-scale-swatch:hover::after {
-  opacity: 1;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .major-hues {
-    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-    gap: 0.75rem;
-  }
-
-  .hue-color {
-    width: 60px;
-    height: 60px;
-  }
-
-  .color-scale-swatches {
-    flex-wrap: wrap;
-  }
-
-  .color-scale-swatch {
-    min-width: 15px;
-    height: 35px;
-  }
-}
-
-@media (max-width: 480px) {
-  .major-hues {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  .hue-color {
-    width: 50px;
-    height: 50px;
-  }
-
-  .color-scale-swatch {
-    min-width: 12px;
-    height: 30px;
-  }
-}
diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
index 545cb719c..be9112d80 100644
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -12,7 +12,6 @@ import {
 import localFont from 'next/font/local';
 
 import './globals.css';
-// import '../styles/tokens.css';
 
 import { Toaster } from '@/components/ui/sonner';
 
diff --git a/apps/docs/styles/tokens.css b/apps/docs/styles/tokens.css
deleted file mode 100644
index 7b583ac0c..000000000
--- a/apps/docs/styles/tokens.css
+++ /dev/null
@@ -1,137 +0,0 @@
-/* Design Tokens - Shared CSS Variables for CSS Modules */
-
-:root {
-  /* Fonts */
-  --font-ui: Geist;
-  --font-code: Geist Mono;
-  --global-font-body: var(--font-ui, var(--font-body));
-  --global-font-mono: var(--font-code, var(--font-mono));
-  --global-font-size: var(--font-size-ui, 14px);
-  --global-code-font-size: var(--font-size-code, 12px);
-  --global-color-placeholder: var(--color-fg3);
-  --global-color-border: var(--color-border);
-
-  --font-body:
-    var(--font-ui, var(--font-berkeley-mono)), system-ui, -apple-system,
-    'Segoe UI', Roboto, 'Helvetica Neue', sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
-  --font-mono: var(--font-code, ui-monospace), 'SFMono-Regular', monospace;
-
-  /* Base Colors */
-  --color-bg: #fff;
-  --color-bg0: var(--color-gray020);
-  --color-bg1: var(--color-gray040);
-  --color-bg2: var(--color-gray060);
-  --color-bg3: var(--color-gray080);
-  --color-fg: var(--color-gray980);
-  --color-fg1: var(--color-gray800);
-  --color-fg2: var(--color-gray700);
-  --color-fg3: var(--color-gray500);
-  --color-fg4: var(--color-gray400);
-  --color-border: var(--color-gray100);
-  --color-border5: color-mix(in srgb, var(--color-fg) 5%, transparent);
-  --color-border8: color-mix(in srgb, var(--color-fg) 8%, transparent);
-  --color-border10: color-mix(in srgb, var(--color-fg) 10%, transparent);
-  --color-border15: color-mix(in srgb, var(--color-fg) 15%, transparent);
-
-  /* Border Radius */
-  --radius-1: 4px;
-  --radius-2: 6px;
-  --radius-3: 9px;
-  --radius-4: 12px;
-  --radius-5: 16px;
-
-  /* Shadows */
-  --shadow-xxs: 0 1px 2px 0 #0000000a;
-  --shadow-xs: 0 2px 4px #00000013;
-  --shadow-sm: 0 1px 2px #0000000d;
-  --shadow-md: 0 2px 2px #0000000d, 0 8px 16px -4px #00000013;
-  --shadow-lg: 0 4px 8px -4px #0000000d, 0 16px 24px -8px #0000001a;
-  --shadow-xl: 0 8px 16px -4px #0000000d, 0 24px 32px -8px #00000013;
-
-  /* Focus States */
-  --focus-ring: 2px solid var(--color-blue400);
-  --focus-ring-danger: 2px solid var(--color-red400);
-}
-
-/* Dark mode overrides */
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-bg: var(--color-gray980);
-    --color-bg0: var(--color-gray960);
-    --color-bg1: var(--color-gray940);
-    --color-bg2: var(--color-gray920);
-    --color-bg3: var(--color-gray900);
-    --color-fg: var(--color-gray020);
-    --color-fg1: var(--color-gray200);
-    --color-fg2: var(--color-gray300);
-    --color-fg3: var(--color-gray500);
-    --color-fg4: var(--color-gray600);
-    --color-border: var(--color-gray800);
-  }
-}
-
-/* Color System - All colors from _colors.css */
-:root {
-  --color-black: #000;
-  --color-white: #fff;
-
-  --color-red: oklch(65% 0.24 24);
-  --color-orange: oklch(75% 0.17 55);
-  --color-yellow: oklch(86% 0.18 90);
-  --color-green: oklch(70% 0.2 148);
-  --color-mint: oklch(75% 0.14 180);
-  --color-teal: oklch(74% 0.16 202);
-  --color-cyan: oklch(75% 0.14 224);
-  --color-blue: oklch(63.5% 0.21 250);
-  --color-indigo: oklch(56% 0.25 290);
-  --color-purple: oklch(62% 0.26 320);
-  --color-pink: oklch(65% 0.24 8);
-  --color-brown: oklch(64% 0.08 55);
-  --color-gray: oklch(65% 0.01 286);
-
-  /* Red Scale */
-  --color-red050: color-mix(in oklch, white 90%, var(--color-red));
-  --color-red100: color-mix(in oklch, white 80%, var(--color-red));
-  --color-red200: color-mix(in oklch, white 60%, var(--color-red));
-  --color-red300: color-mix(in oklch, white 40%, var(--color-red));
-  --color-red400: color-mix(in oklch, white 20%, var(--color-red));
-  --color-red500: var(--color-red);
-  --color-red600: color-mix(in oklch, black 15%, var(--color-red));
-  --color-red700: color-mix(in oklch, black 30%, var(--color-red));
-  --color-red800: color-mix(in oklch, black 45%, var(--color-red));
-  --color-red900: color-mix(in oklch, black 60%, var(--color-red));
-  --color-red950: color-mix(in oklch, black 75%, var(--color-red));
-
-  /* Blue Scale */
-  --color-blue050: color-mix(in oklch, white 90%, var(--color-blue));
-  --color-blue100: color-mix(in oklch, white 80%, var(--color-blue));
-  --color-blue200: color-mix(in oklch, white 60%, var(--color-blue));
-  --color-blue300: color-mix(in oklch, white 40%, var(--color-blue));
-  --color-blue400: color-mix(in oklch, white 20%, var(--color-blue));
-  --color-blue500: var(--color-blue);
-  --color-blue600: color-mix(in oklch, black 15%, var(--color-blue));
-  --color-blue700: color-mix(in oklch, black 30%, var(--color-blue));
-  --color-blue800: color-mix(in oklch, black 45%, var(--color-blue));
-  --color-blue900: color-mix(in oklch, black 60%, var(--color-blue));
-  --color-blue950: color-mix(in oklch, black 75%, var(--color-blue));
-
-  /* Gray Scale */
-  --color-gray020: color-mix(in oklch, white 95%, var(--color-gray));
-  --color-gray040: color-mix(in oklch, white 93%, var(--color-gray));
-  --color-gray060: color-mix(in oklch, white 91%, var(--color-gray));
-  --color-gray080: color-mix(in oklch, white 85%, var(--color-gray));
-  --color-gray100: color-mix(in oklch, white 80%, var(--color-gray));
-  --color-gray200: color-mix(in oklch, white 60%, var(--color-gray));
-  --color-gray300: color-mix(in oklch, white 40%, var(--color-gray));
-  --color-gray400: color-mix(in oklch, white 20%, var(--color-gray));
-  --color-gray500: var(--color-gray);
-  --color-gray600: color-mix(in oklch, black 15%, var(--color-gray));
-  --color-gray700: color-mix(in oklch, black 30%, var(--color-gray));
-  --color-gray800: color-mix(in oklch, black 45%, var(--color-gray));
-  --color-gray900: color-mix(in oklch, black 75%, var(--color-gray));
-  --color-gray920: color-mix(in oklch, black 80%, var(--color-gray));
-  --color-gray940: color-mix(in oklch, black 85%, var(--color-gray));
-  --color-gray960: color-mix(in oklch, black 90%, var(--color-gray));
-  --color-gray980: color-mix(in oklch, black 95%, var(--color-gray));
-}
diff --git a/package.json b/package.json
index 99d755276..7f40d7fa1 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,9 @@
     "docs:prod": "(cd apps/docs && bun run prod)",
     "docs:start": "(cd apps/docs && bun run start)",
     "docs:tsc": "(cd apps/docs && bun run tsc)",
+    "storage-elements:tsc": "(cd packages/storage-elements && bun run tsc)",
+    "storage-elements-next:tsc": "(cd packages/storage-elements-next && bun run tsc)",
+    "storage-elements-next:build": "(cd packages/storage-elements-next && bun run build)",
     "clean": "rm -rf {packages,apps}/*/dist && rm -rf {packages,apps}/*/tsconfig.tsbuildinfo && rm -rf {packages,apps}/demo/node_modules/.vite && rm -rf {packages,apps}/demo/node_modules/.vite-temp && rm -rf apps/docs/.next",
     "update-themes": "node update-themes.js",
     "icons:build": "node scripts/build-icons.js && bun run format",
diff --git a/packages/precision-diffs/src/style.css b/packages/precision-diffs/src/style.css
index 2610b2ce3..d3875edb3 100644
--- a/packages/precision-diffs/src/style.css
+++ b/packages/precision-diffs/src/style.css
@@ -234,10 +234,6 @@ code {
   }
 }
 
-[data-column-number] {
-  grid-column: 1 / 2;
-}
-
 [data-column-content] {
   grid-column: 2 / 3;
 }
@@ -503,13 +499,12 @@ code {
     -webkit-user-select: none;
     user-select: none;
   }
-}
 
-[data-indicators='classic'] {
   [data-line-type='change-addition'] [data-column-content]::before {
     content: '+';
     color: var(--pjs-addition-base);
   }
+
   [data-line-type='change-deletion'] [data-column-content]::before {
     content: '-';
     color: var(--pjs-deletion-base);
@@ -529,9 +524,7 @@ code {
     -webkit-user-select: none;
     user-select: none;
   }
-}
 
-[data-indicators='bars'] {
   [data-line-type='change-deletion'] [data-column-number]::before {
     background-image: linear-gradient(
       0deg,
@@ -542,6 +535,7 @@ code {
     background-size: 2px 2px;
     background-size: calc(1lh / round(1lh / 2px)) calc(1lh / round(1lh / 2px));
   }
+
   [data-line-type='change-addition'] [data-column-number]::before {
     background-color: var(--pjs-addition-base);
   }
@@ -559,6 +553,7 @@ code {
 }
 
 [data-column-number] {
+  grid-column: 1 / 2;
   box-sizing: content-box;
   text-align: right;
   position: sticky;
diff --git a/stylelint.config.js b/stylelint.config.js
index b795f945b..029e4e6f4 100644
--- a/stylelint.config.js
+++ b/stylelint.config.js
@@ -1,80 +1,46 @@
 export default {
   extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
   rules: {
-    // Allow CSS custom properties (CSS variables)
-    'custom-property-pattern': null,
-    'custom-property-empty-line-before': null,
-
-    // Allow custom selectors
-    'selector-class-pattern': null,
-    'selector-id-pattern': null,
-
-    // Allow vendor prefixes (sometimes needed for compatibility)
-    'property-no-vendor-prefix': null,
-    'value-no-vendor-prefix': null,
-
-    // Allow unknown at-rules (for things like @tailwind, @layer, etc.)
+    // For Tailwind
     'at-rule-no-unknown': [
       true,
       {
         ignoreAtRules: [
           'tailwind',
           'apply',
+          'layer',
+          'config',
           'variants',
           'responsive',
           'screen',
-          'layer',
           'theme',
           'custom-variant',
         ],
       },
     ],
-
-    // Allow CSS nesting (modern CSS feature)
-    'selector-nested-pattern': null,
-
-    // Disable some overly strict rules
+    'selector-class-pattern': null,
     'no-descending-specificity': null,
-    'no-duplicate-selectors': null,
-    'declaration-block-no-duplicate-properties': null, // Allow duplicates for fallbacks
-    'declaration-block-no-redundant-longhand-properties': null,
-    'shorthand-property-no-redundant-values': null,
-
-    // Allow empty sources (for files that might only have comments)
-    'no-empty-source': null,
 
-    // Allow font names with capitals (Monaco, Consolas, Arial, etc.)
-    'value-keyword-case': null,
+    'property-no-vendor-prefix': null,
+    'value-no-vendor-prefix': null,
+    'declaration-property-value-keyword-no-deprecated': null,
 
-    // Be flexible with import notation
-    'import-notation': null,
+    // Whitespace & Formatting
+    'custom-property-empty-line-before': null,
+    'comment-empty-line-before': null,
+    'rule-empty-line-before': null,
+    'declaration-empty-line-before': null,
 
-    // Be flexible with color notation
+    // Color Notation
     'color-function-notation': null,
     'color-function-alias-notation': null,
     'alpha-value-notation': null,
     'color-hex-length': null,
-    'hue-degree-notation': null,
     'lightness-notation': null,
+    'hue-degree-notation': null,
 
-    // Be flexible with media feature notation
-    'media-feature-range-notation': null,
-
-    // Be flexible with spacing
-    'declaration-empty-line-before': null,
-    'rule-empty-line-before': null,
-    'comment-empty-line-before': null,
-
-    // Allow deprecated keywords (sometimes needed for compatibility)
-    'declaration-property-value-keyword-no-deprecated': null,
+    // Value Formatting
+    'value-keyword-case': null,
+    'import-notation': null,
   },
-  overrides: [
-    {
-      // CSS Modules specific rules
-      files: ['**/*.module.css'],
-      rules: {
-        'selector-class-pattern': null,
-      },
-    },
-  ],
 };