@kaikybrofc/omnizap-system 2.1.8

package/public/js/github-panel/components/CommitList.js

@@ -0,0 +1,34 @@
+import { React, memo } from '../vendor/react.js';
+
+const h = React.createElement;
+
+function CommitListComponent({ items, formatDate }) {
+  if (!Array.isArray(items) || items.length === 0) {
+    return h('div', { className: 'ghp-empty' }, 'Nenhum commit recente encontrado.');
+  }
+
+  return h(
+    'ul',
+    { className: 'ghp-list', 'aria-label': 'Lista de commits recentes' },
+    ...items.map((commit, index) =>
+      h(
+        'li',
+        { key: (commit.sha || 'commit') + String(index), className: 'ghp-list-item' },
+        h(
+          'a',
+          {
+            href: commit.html_url || '#',
+            target: '_blank',
+            rel: 'noreferrer noopener',
+            className: 'ghp-list-link',
+            'aria-label': `Abrir commit ${commit.sha || ''} no GitHub`,
+          },
+          `${commit.sha || '---'} - ${commit.message || 'Sem mensagem'}`,
+        ),
+        h('p', { className: 'ghp-list-meta' }, `${commit.author || 'autor desconhecido'} · ${formatDate(commit.date)}`),
+      ),
+    ),
+  );
+}
+
+export const CommitList = memo(CommitListComponent);

package/public/js/github-panel/components/ErrorState.js

@@ -0,0 +1,16 @@
+import { React, memo } from '../vendor/react.js';
+
+const h = React.createElement;
+
+function ErrorStateComponent({ message, onRetry, isRateLimited }) {
+  return h(
+    'section',
+    { className: 'ghp-error', role: 'alert' },
+    h('h3', null, 'Não foi possível carregar os dados do GitHub'),
+    h('p', null, message || 'Tente novamente em alguns instantes.'),
+    isRateLimited ? h('p', { className: 'ghp-rate-limit' }, 'Limite de requisições do GitHub atingido. Tente novamente em breve.') : null,
+    h('button', { type: 'button', className: 'ghp-retry', onClick: onRetry }, 'Tentar novamente'),
+  );
+}
+
+export const ErrorState = memo(ErrorStateComponent);

package/public/js/github-panel/components/GithubProjectPanel.js

@@ -0,0 +1,106 @@
+import { React, useMemo, useCallback } from '../vendor/react.js';
+import { useGithubRepoData } from '../useGithubRepoData.js';
+import { StatCard } from './StatCard.js';
+import { CommitList } from './CommitList.js';
+import { ReleaseList } from './ReleaseList.js';
+import { SkeletonPanel } from './SkeletonPanel.js';
+import { ErrorState } from './ErrorState.js';
+
+const h = React.createElement;
+
+const fmtDate = (value) => {
+  const time = Date.parse(String(value || ''));
+  if (!Number.isFinite(time)) return 'n/d';
+  return new Intl.DateTimeFormat('pt-BR', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(new Date(time));
+};
+
+const toInt = (value) => {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? Math.round(parsed) : 0;
+};
+
+export function GithubProjectPanel({ owner, repo, endpoint }) {
+  const { data, loading, error, lastUpdatedAt, refresh } = useGithubRepoData({ owner, repo, endpoint });
+
+  const statCards = useMemo(() => {
+    if (!data) return [];
+
+    const languages = Array.isArray(data.languages) ? data.languages.map((entry) => entry.name).join(', ') : '';
+
+    return [
+      { label: 'Repositório', value: data.repository || `${owner}/${repo}`, detail: data.description || 'Sem descrição.', iconClass: 'fa-brands fa-github' },
+      { label: 'Stars', value: String(toInt(data.stars)), detail: 'Popularidade do projeto', iconClass: 'fa-solid fa-star' },
+      { label: 'Forks', value: String(toInt(data.forks)), detail: 'Repositórios derivados', iconClass: 'fa-solid fa-code-fork' },
+      { label: 'Issues abertas', value: String(toInt(data.open_issues)), detail: 'Demandas em aberto', iconClass: 'fa-solid fa-circle-exclamation' },
+      { label: 'PRs abertos', value: String(toInt(data.open_prs)), detail: 'Mudanças em revisão', iconClass: 'fa-solid fa-code-pull-request' },
+      { label: 'Linguagem principal', value: data.language || 'n/d', detail: languages || 'Sem linguagens mapeadas', iconClass: 'fa-solid fa-code' },
+      { label: 'Licença', value: data.license || 'n/d', detail: 'Modelo de uso do projeto', iconClass: 'fa-solid fa-scale-balanced' },
+      { label: 'Branch padrão', value: data.default_branch || 'n/d', detail: 'Base principal de desenvolvimento', iconClass: 'fa-solid fa-code-branch' },
+      { label: 'Último push', value: fmtDate(data.pushed_at), detail: 'Atualização mais recente no repositório', iconClass: 'fa-solid fa-upload' },
+      {
+        label: 'Última release',
+        value: data.latest_release?.tag || data.latest_release?.name || 'Sem release',
+        detail: data.latest_release?.published_at ? fmtDate(data.latest_release.published_at) : 'Sem data de publicação',
+        iconClass: 'fa-solid fa-tag',
+      },
+    ];
+  }, [data, owner, repo]);
+
+  const handleRetry = useCallback(() => {
+    refresh();
+  }, [refresh]);
+
+  if (loading && !data) {
+    return h(SkeletonPanel);
+  }
+
+  if (error && !data) {
+    return h(ErrorState, {
+      message: error.message,
+      isRateLimited: Boolean(error.rateLimited),
+      onRetry: handleRetry,
+    });
+  }
+
+  return h(
+    'section',
+    { className: 'ghp-panel' },
+    h(
+      'header',
+      { className: 'ghp-header' },
+      h('h3', { className: 'ghp-title' }, 'Projeto no GitHub'),
+      h(
+        'div',
+        { className: 'ghp-header-actions' },
+        h('span', { className: 'ghp-updated' }, `Atualizado: ${fmtDate(lastUpdatedAt)}`),
+        h(
+          'a',
+          {
+            href: data?.html_url || `https://github.com/${owner}/${repo}`,
+            target: '_blank',
+            rel: 'noreferrer noopener',
+            className: 'ghp-repo-link',
+            'aria-label': 'Abrir repositório no GitHub',
+          },
+          'Abrir repositório',
+        ),
+      ),
+    ),
+    error
+      ? h('p', { className: 'ghp-inline-warning', role: 'status' }, error.rateLimited ? 'Limite da API do GitHub atingido; exibindo cache local.' : 'Exibindo último snapshot disponível.')
+      : null,
+    h('div', { className: 'ghp-stat-grid' }, ...statCards.map((card) => h(StatCard, { key: card.label, ...card }))),
+    h(
+      'div',
+      { className: 'ghp-list-grid' },
+      h('section', { className: 'ghp-list-card' }, h('h4', { className: 'ghp-list-title' }, 'Últimos Commits'), h(CommitList, { items: data?.latest_commits || [], formatDate: fmtDate })),
+      h('section', { className: 'ghp-list-card' }, h('h4', { className: 'ghp-list-title' }, 'Últimas Releases'), h(ReleaseList, { items: data?.latest_releases || [], formatDate: fmtDate })),
+    ),
+  );
+}

package/public/js/github-panel/components/ReleaseList.js

@@ -0,0 +1,38 @@
+import { React, memo } from '../vendor/react.js';
+
+const h = React.createElement;
+
+function ReleaseListComponent({ items, formatDate }) {
+  if (!Array.isArray(items) || items.length === 0) {
+    return h('div', { className: 'ghp-empty' }, 'Nenhuma release publicada ainda.');
+  }
+
+  return h(
+    'ul',
+    { className: 'ghp-list', 'aria-label': 'Lista de releases recentes' },
+    ...items.map((release, index) => {
+      const flags = [release.prerelease ? 'pre-release' : '', release.draft ? 'draft' : ''].filter(Boolean).join(', ');
+      const releaseName = release.tag || release.name || 'release';
+      const label = flags ? `${releaseName} (${flags})` : releaseName;
+
+      return h(
+        'li',
+        { key: label + String(index), className: 'ghp-list-item' },
+        h(
+          'a',
+          {
+            href: release.html_url || '#',
+            target: '_blank',
+            rel: 'noreferrer noopener',
+            className: 'ghp-list-link',
+            'aria-label': `Abrir release ${releaseName} no GitHub`,
+          },
+          label,
+        ),
+        h('p', { className: 'ghp-list-meta' }, formatDate(release.published_at)),
+      );
+    }),
+  );
+}
+
+export const ReleaseList = memo(ReleaseListComponent);

package/public/js/github-panel/components/SkeletonPanel.js

@@ -0,0 +1,22 @@
+import { React, memo } from '../vendor/react.js';
+
+const h = React.createElement;
+
+function SkeletonPanelComponent() {
+  const statNodes = Array.from({ length: 10 }).map((_, index) => h('div', { key: `s-${index}`, className: 'ghp-skeleton-card' }));
+  const listNodes = Array.from({ length: 4 }).map((_, index) => h('li', { key: `l-${index}`, className: 'ghp-skeleton-line' }));
+
+  return h(
+    'section',
+    { className: 'ghp-panel', 'aria-busy': 'true', 'aria-live': 'polite' },
+    h('div', { className: 'ghp-stat-grid' }, ...statNodes),
+    h(
+      'div',
+      { className: 'ghp-list-grid' },
+      h('div', { className: 'ghp-list-card' }, h('div', { className: 'ghp-skeleton-title' }), h('ul', { className: 'ghp-list' }, ...listNodes)),
+      h('div', { className: 'ghp-list-card' }, h('div', { className: 'ghp-skeleton-title' }), h('ul', { className: 'ghp-list' }, ...listNodes)),
+    ),
+  );
+}
+
+export const SkeletonPanel = memo(SkeletonPanelComponent);

package/public/js/github-panel/components/StatCard.js

@@ -0,0 +1,15 @@
+import { React, memo } from '../vendor/react.js';
+
+const h = React.createElement;
+
+function StatCardComponent({ label, value, detail, iconClass }) {
+  return h(
+    'article',
+    { className: 'ghp-stat-card' },
+    h('header', { className: 'ghp-stat-head' }, h('span', { className: 'ghp-stat-label' }, label), iconClass ? h('i', { className: iconClass, 'aria-hidden': 'true' }) : null),
+    h('p', { className: 'ghp-stat-value' }, value),
+    h('p', { className: 'ghp-stat-detail', title: detail || '' }, detail || ' '),
+  );
+}
+
+export const StatCard = memo(StatCardComponent);

package/public/js/github-panel/index.js

@@ -0,0 +1,15 @@
+import { React, createRoot } from './vendor/react.js';
+import { GithubProjectPanel } from './components/GithubProjectPanel.js';
+
+const h = React.createElement;
+
+const rootEl = document.getElementById('github-project-panel-root');
+
+if (rootEl) {
+  const owner = rootEl.dataset.owner || 'kaikybrofc';
+  const repo = rootEl.dataset.repo || 'omnizap-system';
+  const endpoint = rootEl.dataset.endpoint || '/api/sticker-packs/project-summary';
+
+  const root = createRoot(rootEl);
+  root.render(h(GithubProjectPanel, { owner, repo, endpoint }));
+}

package/public/js/github-panel/useGithubRepoData.js

@@ -0,0 +1,154 @@
+import { useCallback, useEffect, useRef, useState } from './vendor/react.js';
+
+const CACHE_PREFIX = 'omnizap:github-summary:';
+const DEFAULT_TTL_MS = 5 * 60 * 1000;
+const RETRY_DELAY_MS = 900;
+
+const sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const toErrorObject = (error, statusCode = null, rateLimited = false) => ({
+  message: error?.message || 'Falha ao carregar dados do projeto.',
+  statusCode,
+  rateLimited,
+});
+
+export function useGithubRepoData({ owner, repo, endpoint = '/api/sticker-packs/project-summary', ttlMs = DEFAULT_TTL_MS }) {
+  const cacheKey = CACHE_PREFIX + String(owner || '') + '/' + String(repo || '');
+  const abortRef = useRef(null);
+
+  const [state, setState] = useState({
+    data: null,
+    loading: true,
+    error: null,
+    lastUpdatedAt: null,
+  });
+
+  const readCache = useCallback(() => {
+    try {
+      const raw = sessionStorage.getItem(cacheKey);
+      if (!raw) return null;
+      const parsed = JSON.parse(raw);
+      if (!parsed?.data || !parsed?.storedAt) return null;
+      return parsed;
+    } catch {
+      return null;
+    }
+  }, [cacheKey]);
+
+  const writeCache = useCallback(
+    (data) => {
+      try {
+        sessionStorage.setItem(
+          cacheKey,
+          JSON.stringify({
+            data,
+            storedAt: Date.now(),
+          }),
+        );
+      } catch {
+        // noop
+      }
+    },
+    [cacheKey],
+  );
+
+  const fetchWithRetry = useCallback(async () => {
+    const doFetch = async () => {
+      if (abortRef.current) {
+        abortRef.current.abort();
+      }
+
+      const controller = new AbortController();
+      abortRef.current = controller;
+
+      const response = await fetch(endpoint, { signal: controller.signal });
+      const payload = await response.json().catch(() => ({}));
+
+      if (!response.ok) {
+        const error = new Error(payload?.error || 'Falha ao carregar dados do projeto.');
+        error.statusCode = response.status;
+        error.rateLimited = response.status === 429;
+        throw error;
+      }
+
+      return payload?.data || null;
+    };
+
+    try {
+      return await doFetch();
+    } catch (error) {
+      if (error?.name === 'AbortError') throw error;
+      const status = Number(error?.statusCode) || 0;
+      const retryable = status === 429 || status >= 500 || status === 0;
+      if (!retryable) throw error;
+      await sleep(RETRY_DELAY_MS);
+      return doFetch();
+    }
+  }, [endpoint]);
+
+  const refresh = useCallback(
+    async ({ silent = false } = {}) => {
+      if (!silent) {
+        setState((prev) => ({ ...prev, loading: true, error: null }));
+      }
+
+      try {
+        const data = await fetchWithRetry();
+        if (!data) {
+          throw new Error('Resposta vazia da API.');
+        }
+
+        writeCache(data);
+        setState({
+          data,
+          loading: false,
+          error: null,
+          lastUpdatedAt: Date.now(),
+        });
+      } catch (error) {
+        if (error?.name === 'AbortError') return;
+        setState((prev) => ({
+          ...prev,
+          loading: false,
+          error: toErrorObject(error, error?.statusCode || null, Boolean(error?.rateLimited)),
+        }));
+      }
+    },
+    [fetchWithRetry, writeCache],
+  );
+
+  useEffect(() => {
+    const cached = readCache();
+    const now = Date.now();
+
+    if (cached?.data) {
+      setState({
+        data: cached.data,
+        loading: false,
+        error: null,
+        lastUpdatedAt: Number(cached.storedAt) || now,
+      });
+
+      const isExpired = now - Number(cached.storedAt || 0) > ttlMs;
+      if (isExpired) {
+        refresh({ silent: true });
+      }
+    } else {
+      refresh();
+    }
+
+    return () => {
+      if (abortRef.current) {
+        abortRef.current.abort();
+      }
+    };
+  }, [readCache, refresh, ttlMs]);
+
+  return {
+    data: state.data,
+    loading: state.loading,
+    error: state.error,
+    lastUpdatedAt: state.lastUpdatedAt,
+    refresh,
+  };
+}

package/public/js/github-panel/vendor/react.js

@@ -0,0 +1,11 @@
+export {
+  default as React,
+  memo,
+  useMemo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'https://esm.sh/react@18.3.1';
+
+export { createRoot } from 'https://esm.sh/react-dom@18.3.1/client';

package/public/js/runtime/react-runtime.js

@@ -0,0 +1,19 @@
+import { setup } from 'https://esm.sh/twind@0.16.19';
+import { observe } from 'https://esm.sh/twind@0.16.19/observe';
+
+if (typeof document !== 'undefined' && !window.__omnizapTwindReady) {
+  setup({ preflight: false });
+  observe(document.documentElement);
+  window.__omnizapTwindReady = true;
+}
+
+export {
+  default as React,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  memo,
+} from 'https://esm.sh/react@18.3.1';
+
+export { createRoot } from 'https://esm.sh/react-dom@18.3.1/client';

package/public/licenca/index.html

@@ -0,0 +1,106 @@
+<!doctype html>
+<html lang="pt-BR">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Licença | OmniZap System</title>
+  <meta name="description" content="Informações de licença do OmniZap System (MIT License)." />
+  <meta name="robots" content="index, follow" />
+  <link rel="canonical" href="https://omnizap.shop/licenca/" />
+  <link rel="icon" type="image/jpeg" href="https://iili.io/FC3FABe.jpg" />
+  <link rel="apple-touch-icon" href="https://iili.io/FC3FABe.jpg" />
+  <style>
+    :root {
+      --bg: #0b1020;
+      --bg-2: #121a2f;
+      --line: #2a3b60;
+      --text: #e6edf7;
+      --muted: #9fb0cc;
+      --card: #141e36cc;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: "Manrope", system-ui, -apple-system, sans-serif;
+      color: var(--text);
+      background:
+        radial-gradient(58rem 24rem at -8% -12%, #22c55e26, transparent 60%),
+        radial-gradient(58rem 24rem at 112% -10%, #38bdf822, transparent 58%),
+        linear-gradient(165deg, var(--bg), var(--bg-2));
+    }
+    .wrap { width: min(960px, 92vw); margin: 0 auto; padding: 24px 0 42px; }
+    .top {
+      display: flex;
+      gap: 10px;
+      flex-wrap: wrap;
+      margin-bottom: 16px;
+    }
+    .top a {
+      color: var(--text);
+      text-decoration: none;
+      border: 1px solid var(--line);
+      border-radius: 10px;
+      padding: 8px 12px;
+      background: #111a2d;
+    }
+    .card {
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      background: var(--card);
+      padding: 18px;
+      margin-bottom: 12px;
+    }
+    h1, h2 { margin: 0 0 10px; }
+    h1 { font-size: clamp(28px, 4.2vw, 38px); }
+    p { color: var(--muted); line-height: 1.6; margin: 0 0 10px; }
+    pre {
+      margin: 0;
+      white-space: pre-wrap;
+      line-height: 1.5;
+      color: #d6e4fa;
+      border: 1px solid #314669;
+      border-radius: 12px;
+      background: #0f1729;
+      padding: 14px;
+      overflow: auto;
+    }
+  </style>
+</head>
+<body>
+  <main class="wrap">
+    <nav class="top" aria-label="Navegação">
+      <a href="/">Início</a>
+      <a href="/stickers/">Stickers</a>
+      <a href="/api-docs/">API</a>
+      <a href="/termos-de-uso/">Termos de Uso</a>
+    </nav>
+
+    <section class="card">
+      <h1>Licença</h1>
+      <p>Este projeto é distribuído sob a licença MIT. Abaixo está o texto da licença usada no repositório.</p>
+      <p>Copyright (c) 2025 Kaiky Brito</p>
+    </section>
+
+    <section class="card">
+      <h2>MIT License (texto original)</h2>
+      <pre>Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.</pre>
+    </section>
+  </main>
+</body>
+</html>

package/public/stickers/admin/index.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="pt-BR">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>OmniZap | Painel Admin</title>
+  <meta name="robots" content="noindex, nofollow" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="/css/stickers-admin.css?v=20260226-admin-saas-redesign-v1" />
+</head>
+<body>
+  <div
+    id="stickers-admin-root"
+    data-api-base-path="/api/sticker-packs"
+    data-web-path="/stickers"
+    data-admin-web-path="/stickers/admin"
+  ></div>
+
+  <script type="module" src="/js/apps/stickersAdminApp.js?v=20260226-admin-moderators-v1"></script>
+</body>
+</html>

package/public/stickers/create/index.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="pt-BR">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>OmniZap | Criar novo Pack</title>
+  <meta name="description" content="Crie um novo pack com fluxo visual passo a passo. Adicione stickers, escolha capa e publique no catálogo OmniZap." />
+  <meta name="robots" content="noindex, nofollow" />
+  <link rel="icon" type="image/jpeg" href="https://iili.io/FC3FABe.jpg" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap" rel="stylesheet" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: {
+            sans: ['Manrope', 'ui-sans-serif', 'system-ui'],
+            display: ['Sora', 'ui-sans-serif', 'system-ui']
+          },
+          colors: {
+            base: '#090d14',
+            panel: '#111722',
+            panelSoft: '#151f2d',
+            line: '#243042',
+            accent: '#2dd4bf',
+            accent2: '#34d399',
+          },
+          boxShadow: {
+            panel: '0 20px 40px rgba(0,0,0,.35)'
+          }
+        }
+      }
+    };
+  </script>
+</head>
+<body class="bg-base text-slate-100 min-h-screen">
+  <div
+    id="create-pack-react-root"
+    data-api-base-path="/api/sticker-packs"
+    data-web-path="/stickers"
+  ></div>
+
+  <script type="module" src="/js/apps/createPackApp.js?v=20260226-create-pack-cta-open-created-pack1"></script>
+</body>
+</html>

package/public/stickers/index.html

@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="pt-BR">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>OmniZap Sticker Catalog</title>
+  <meta name="description" content="Catálogo de stickers e packs OmniZap em estilo app." />
+  <meta name="robots" content="index, follow" />
+  <link rel="canonical" href="https://omnizap.shop/stickers/" />
+  <link rel="icon" type="image/jpeg" href="https://iili.io/FC3FABe.jpg" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          fontFamily: {
+            sans: ['Inter', 'ui-sans-serif', 'system-ui', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji']
+          },
+          colors: {
+            slateApp: '#0f172a',
+            slateCard: '#111827',
+            borderApp: '#22304a',
+            accent: '#22c55e'
+          },
+          boxShadow: {
+            soft: '0 8px 24px rgba(2, 6, 23, 0.22)'
+          }
+        }
+      }
+    };
+  </script>
+</head>
+<body class="bg-slateApp text-slate-100 font-sans min-h-screen">
+  <div id="stickers-react-root"
+    data-web-path="/stickers"
+    data-api-base-path="/api/sticker-packs"
+    data-orphan-api-path="/api/sticker-packs/orphan-stickers"
+    data-default-limit="24"
+    data-default-orphan-limit="24"
+    data-initial-pack-key=""
+  ></div>
+
+  <script type="module" src="/js/apps/stickersApp.js?v=20260227-ui-hotfix-v5"></script>
+</body>
+</html>