omnieye-theme-studio 1.0.0

package/.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "react-dev",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 5173
+    }
+  ]
+}

package/.github/workflows/ci.yml

@@ -0,0 +1,88 @@
+name: CI
+
+env:
+  IMAGE_NAME: theme-studio
+  HELM_REPO: Digital-Twin-Operations/helm-charts
+  HELM_CHART: theme-studio
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+      - stage
+  workflow_dispatch:
+
+jobs:
+  # checks:
+  #   uses: Digital-Twin-Operations/.github/.github/workflows/node-checks.yml@main
+  #   with:
+  #     run_lint: false
+  #     run_format_check: false
+  #     run_type_check: false
+  #     build_command: npm run build
+
+  build-and-push:
+    # needs: checks
+    if: github.event_name != 'pull_request'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Derive short image tag
+        run: echo "IMAGE_TAG=$(echo ${GITHUB_SHA} | cut -c1-7)" >> $GITHUB_ENV
+
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ secrets.DOCKERHUB_USERNAME }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=raw,value=latest,enable={{is_default_branch}}
+            type=sha,prefix=
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Checkout helm repository
+        if: github.ref == 'refs/heads/stage'
+        uses: actions/checkout@v4
+        with:
+          repository: ${{ env.HELM_REPO }}
+          ssh-key: ${{ secrets.HELM_DEPLOY_KEY }}
+          path: helm-repo
+          ref: main
+
+      - name: Auto-update stage Helm values and commit
+        if: github.ref == 'refs/heads/stage'
+        working-directory: helm-repo
+        env:
+          IMAGE_TAG: ${{ env.IMAGE_TAG }}
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          YQ_VERSION=v4.30.8
+          curl -sL https://github.com/mikefarah/yq/releases/download/${YQ_VERSION}/yq_linux_amd64 -o /usr/local/bin/yq
+          chmod +x /usr/local/bin/yq
+          yq eval ".image.tag = strenv(IMAGE_TAG)" -i ${{ env.HELM_CHART }}/values-stage.yaml
+          git add ${{ env.HELM_CHART }}/values-stage.yaml
+          git commit -m "ci(${{ env.IMAGE_NAME }}): update stage image tag to $IMAGE_TAG" || echo "no changes to commit"
+          git push origin main || echo "push failed or no changes"

package/.github/workflows/promote.yml

@@ -0,0 +1,48 @@
+name: Promote to Production
+
+env:
+  IMAGE_NAME: theme-studio
+  HELM_REPO: Digital-Twin-Operations/helm-charts
+  HELM_CHART: theme-studio
+
+on:
+  workflow_dispatch:
+    inputs:
+      image_tag:
+        description: Image tag to promote to production
+        required: true
+        default: latest
+
+jobs:
+  promote:
+    runs-on: ubuntu-latest
+    environment: production
+
+    steps:
+      - name: Checkout helm repository
+        uses: actions/checkout@v4
+        with:
+          repository: ${{ env.HELM_REPO }}
+          ssh-key: ${{ secrets.HELM_DEPLOY_KEY }}
+          ref: main
+
+      - name: Install yq
+        run: |
+          YQ_VERSION=v4.30.8
+          curl -sL https://github.com/mikefarah/yq/releases/download/${YQ_VERSION}/yq_linux_amd64 -o /usr/local/bin/yq
+          chmod +x /usr/local/bin/yq
+          yq --version
+
+      - name: Configure git
+        run: |
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+
+      - name: Update production Helm values
+        env:
+          IMAGE_TAG: ${{ inputs.image_tag }}
+        run: |
+          yq eval ".image.tag = strenv(IMAGE_TAG)" -i ${{ env.HELM_CHART }}/values-prod.yaml
+          git add ${{ env.HELM_CHART }}/values-prod.yaml
+          git commit -m "chore(${{ env.IMAGE_NAME }}): promote image $IMAGE_TAG to production" || echo "no changes to commit"
+          git push origin HEAD:main

package/Dockerfile

@@ -0,0 +1,20 @@
+# Build stage
+FROM node:20-alpine AS build
+
+WORKDIR /app
+
+COPY package.json package-lock.json ./
+RUN npm ci
+
+COPY . .
+RUN npm run build
+
+# Production stage
+FROM nginx:alpine AS production
+
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

package/README.md

@@ -0,0 +1,52 @@
+# OmniEye Theme Studio — React + TypeScript + MUI
+
+A 1:1-in-progress port of `Theme Manager.dc.html` to **React 19 + TypeScript + MUI v7**, driven entirely by **theme tokens**: every control mutates a flat settings store, `buildMuiTheme()` compiles it into a MUI `createTheme()`, and one `<ThemeProvider>` themes both the studio chrome and the live preview.
+
+## Run it locally
+
+
+```bash
+cd react
+npm install
+npm run dev          # opens http://localhost:5173
+```
+
+Build for production:
+
+```bash
+npm run build        # tsc -b + vite build  ->  dist/
+npm run preview
+```
+
+Requires Node 18+.
+
+## How it's wired (single source of truth)
+
+```
+src/theme/color.ts        Ported colour math (hexToHSL/hslToHex/palette/contrast/rgbaOf) — verbatim.
+src/theme/settings.ts     Flat ThemeSettings type + DEFAULT_SETTINGS (the app's state).
+src/theme/presets.ts      Colour presets.
+src/theme/buildMuiTheme.ts  Token compiler: ThemeSettings -> createTheme(). Nothing else hardcodes colour/size.
+src/store/useThemeStore.ts  Zustand (persisted): settings, savedThemes, dirty-baseline, presets, import.
+src/store/useStudioUi.ts    Transient UI: open section, active preview screen.
+src/App.tsx               Chrome: TopBar + StudioSubHeader + IconRail + StudioRail + PreviewPane + Footer.
+src/studio/StudioRail.tsx   The 8 collapsible studio sections.
+src/panels/*              Theme / Colour / Typography / Cards / Tables / Surface / Notifications / Login.
+src/preview/*             The 9 live preview screens, themed by the tokens above.
+src/shared/*              Reused control primitives (TabStrip, StudioSlider, ChipGroup, SwatchPicker…).
+```
+
+Change a control → store updates → `buildMuiTheme` recompiles → `<ThemeProvider>` repaints chrome **and** preview.
+
+## Status / parity
+Full 1:1 port of `Theme Manager.dc.html`:
+- **Token engine** (`theme/tokens.ts`) — the ~200-token compiler (surface tint, contrast levels, nested/header treatments, shadows, type scale, chart palettes, notif accents, table tokens, login gradients) ported from the original `renderVals`. Single source of visual truth.
+- **9 preview screens** — Dashboard, Orders, Reports, Cameras, Operations, Form, Components, Settings, Login (split + centered) — all token-driven.
+- **9 studio panels** — Theme (presets / My Themes / mode + JSON import-export-download), Colour (brand/text/status/buttons + per-heading swatches), Brand & Logo, Typography (font/heading/head-text/body-text + custom-font upload), Cards (style/header/nested/tint), Tables (rows/cols/cells/styling), Surface & Shape, Notifications, Login.
+- **Shell behaviors** — resizable studio drawer (300–520px), close/reopen, save/discard-exit confirm (discard restores the baseline snapshot), image **crop modal** (drag + zoom, canvas export), and the two rail behaviors below.
+
+### Rail behaviors (match the original exactly)
+- **Section → screen auto-switch:** opening a rail section jumps the preview to its mapped screen (theme/cards/brand/surface→Dashboard, colour/typography→Components, tables→Orders, notifications→Operations, login→Login), guarded so reopening the same section won't override a manual screen change.
+- **“Change preview screen” popover:** the monitor icon on any section header toggles a shared “Previewing Screen” grid (all 8 screens); picking one sets it and closes; auto-hides when any section is opened/closed.
+
+State persists to `localStorage` (`omnieye-theme-studio`).