@shellui/core 0.0.4

package/src/features/settings/components/Appearance.tsx

@@ -0,0 +1,306 @@
+import { useTranslation } from 'react-i18next';
+import { useSettings } from '../hooks/useSettings';
+import { useConfig } from '@/features/config/useConfig';
+import { Button } from '@/components/ui/button';
+import { ButtonGroup } from '@/components/ui/button-group';
+import { cn } from '@/lib/utils';
+import { useEffect, useState } from 'react';
+import { getAllThemes, registerTheme, type ThemeDefinition } from '@/features/theme/themes';
+
+const SunIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="4"
+    />
+    <path d="M12 2v2" />
+    <path d="M12 20v2" />
+    <path d="m4.93 4.93 1.41 1.41" />
+    <path d="m17.66 17.66 1.41 1.41" />
+    <path d="M2 12h2" />
+    <path d="M20 12h2" />
+    <path d="m6.34 17.66-1.41 1.41" />
+    <path d="m19.07 4.93-1.41 1.41" />
+  </svg>
+);
+
+const MoonIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" />
+  </svg>
+);
+
+const MonitorIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <rect
+      width="20"
+      height="14"
+      x="2"
+      y="3"
+      rx="2"
+    />
+    <line
+      x1="8"
+      x2="16"
+      y1="21"
+      y2="21"
+    />
+    <line
+      x1="12"
+      x2="12"
+      y1="17"
+      y2="21"
+    />
+  </svg>
+);
+
+// Theme color preview component
+const ThemePreview = ({
+  theme,
+  isSelected,
+  isDark,
+}: {
+  theme: ThemeDefinition;
+  isSelected: boolean;
+  isDark: boolean;
+}) => {
+  const colors = isDark ? theme.colors.dark : theme.colors.light;
+
+  return (
+    <div
+      className={cn(
+        'relative overflow-hidden rounded-lg border-2 transition-all',
+        isSelected ? 'border-primary shadow-lg' : 'border-border',
+      )}
+      style={{ backgroundColor: colors.background }}
+    >
+      <div className="p-3 space-y-2">
+        {/* Primary color */}
+        <div
+          className="h-8 rounded-md"
+          style={{ backgroundColor: colors.primary }}
+        />
+        {/* Secondary colors */}
+        <div className="flex gap-1">
+          <div
+            className="h-6 flex-1 rounded"
+            style={{ backgroundColor: colors.background }}
+          />
+          <div
+            className="h-6 flex-1 rounded"
+            style={{ backgroundColor: colors.secondary }}
+          />
+          <div
+            className="h-6 flex-1 rounded"
+            style={{ backgroundColor: colors.accent }}
+          />
+        </div>
+        {/* Accent colors */}
+        <div className="flex gap-1">
+          <div
+            className="h-4 flex-1 rounded"
+            style={{ backgroundColor: colors.muted }}
+          />
+          <div
+            className="h-4 flex-1 rounded"
+            style={{ backgroundColor: colors.border }}
+          />
+        </div>
+      </div>
+      {/* Theme name overlay */}
+      <div
+        className="absolute bottom-0 left-0 right-0 bg-background/90 backdrop-blur-sm px-2 py-1"
+        style={{ backgroundColor: colors.background }}
+      >
+        <p
+          className="text-xs font-medium text-center"
+          style={
+            theme.fontFamily
+              ? {
+                  fontFamily: theme.fontFamily,
+                  letterSpacing: theme.letterSpacing || 'normal',
+                  textShadow: theme.textShadow || 'none',
+                }
+              : {}
+          }
+        >
+          {theme.displayName}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export const Appearance = () => {
+  const { t } = useTranslation('settings');
+  const { settings, updateSetting } = useSettings();
+  const { config } = useConfig();
+  const currentTheme = settings.appearance?.theme || 'system';
+  const currentThemeName = settings.appearance?.themeName || 'default';
+
+  const [availableThemes, setAvailableThemes] = useState<ThemeDefinition[]>([]);
+
+  // Register custom themes from config and get all themes
+  useEffect(() => {
+    if (config?.themes) {
+      config.themes.forEach((themeDef: ThemeDefinition) => {
+        registerTheme(themeDef);
+      });
+    }
+    setAvailableThemes(getAllThemes());
+  }, [config]);
+
+  // Determine if we're in dark mode for preview
+  const [isDarkForPreview, setIsDarkForPreview] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return (
+      currentTheme === 'dark' ||
+      (currentTheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+    );
+  });
+
+  // Update preview mode when theme changes
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    const updatePreview = () => {
+      setIsDarkForPreview(
+        currentTheme === 'dark' ||
+          (currentTheme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches),
+      );
+    };
+
+    updatePreview();
+
+    if (currentTheme === 'system') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      const handleChange = () => updatePreview();
+
+      if (mediaQuery.addEventListener) {
+        mediaQuery.addEventListener('change', handleChange);
+        return () => mediaQuery.removeEventListener('change', handleChange);
+      } else if (mediaQuery.addListener) {
+        mediaQuery.addListener(handleChange);
+        return () => mediaQuery.removeListener(handleChange);
+      }
+    }
+  }, [currentTheme]);
+
+  const modeThemes = [
+    { value: 'light' as const, label: t('appearance.themes.light'), icon: SunIcon },
+    { value: 'dark' as const, label: t('appearance.themes.dark'), icon: MoonIcon },
+    { value: 'system' as const, label: t('appearance.themes.system'), icon: MonitorIcon },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Theme Mode Selection (Light/Dark/System) */}
+      <div className="space-y-2">
+        <div className="space-y-0.5">
+          <label
+            className="text-sm font-medium leading-none"
+            style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+          >
+            {t('appearance.mode')}
+          </label>
+          <p className="text-sm text-muted-foreground">{t('appearance.modeDescription')}</p>
+        </div>
+        <div className="mt-2">
+          <ButtonGroup>
+            {modeThemes.map((theme) => {
+              const Icon = theme.icon;
+              const isSelected = currentTheme === theme.value;
+              return (
+                <Button
+                  key={theme.value}
+                  variant={isSelected ? 'default' : 'outline'}
+                  onClick={() => {
+                    updateSetting('appearance', { theme: theme.value });
+                  }}
+                  className={cn(
+                    'h-10 px-4 transition-all flex items-center gap-2 cursor-pointer',
+                    isSelected && ['font-semibold'],
+                    !isSelected && ['bg-background hover:bg-accent/50', 'text-muted-foreground'],
+                  )}
+                  aria-label={theme.label}
+                  title={theme.label}
+                >
+                  <Icon />
+                  <span className="text-sm font-medium">{theme.label}</span>
+                </Button>
+              );
+            })}
+          </ButtonGroup>
+        </div>
+      </div>
+
+      {/* Theme Selection (Color Scheme) */}
+      <div className="space-y-2">
+        <div className="space-y-0.5">
+          <label
+            className="text-sm font-medium leading-none"
+            style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+          >
+            {t('appearance.colorTheme')}
+          </label>
+          <p className="text-sm text-muted-foreground">{t('appearance.colorThemeDescription')}</p>
+        </div>
+        <div className="mt-2 grid grid-cols-2 md:grid-cols-3 gap-4">
+          {availableThemes.map((theme) => {
+            const isSelected = currentThemeName === theme.name;
+            return (
+              <button
+                key={theme.name}
+                onClick={() => {
+                  updateSetting('appearance', { themeName: theme.name });
+                }}
+                className={cn(
+                  'text-left transition-all cursor-pointer',
+                  isSelected && 'ring-2 ring-primary ring-offset-2 rounded-lg',
+                )}
+                aria-label={theme.displayName}
+              >
+                <ThemePreview
+                  theme={theme}
+                  isSelected={isSelected}
+                  isDark={isDarkForPreview}
+                />
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/features/settings/components/DataPrivacy.tsx

@@ -0,0 +1,142 @@
+import { useTranslation } from 'react-i18next';
+import { useSettings } from '../hooks/useSettings';
+import { useConfig } from '@/features/config/useConfig';
+import { Button } from '@/components/ui/button';
+import { shellui } from '@shellui/sdk';
+import urls from '@/constants/urls';
+import { cn } from '@/lib/utils';
+
+export const DataPrivacy = () => {
+  const { t } = useTranslation('settings');
+  const { config } = useConfig();
+  const { settings, updateSetting } = useSettings();
+
+  const cookies = config?.cookieConsent?.cookies ?? [];
+  const hasCookieConsent = cookies.length > 0;
+  const hasConsented = Boolean(settings?.cookieConsent?.consentedCookieHosts?.length);
+
+  // Determine consent status
+  const acceptedHosts = settings?.cookieConsent?.acceptedHosts ?? [];
+  const allHosts = cookies.map((c) => c.host);
+  const strictNecessaryHosts = cookies
+    .filter((c) => c.category === 'strict_necessary')
+    .map((c) => c.host);
+
+  const acceptedAll =
+    hasConsented &&
+    acceptedHosts.length === allHosts.length &&
+    allHosts.every((h) => acceptedHosts.includes(h));
+  // "Rejected all" means only strictly necessary cookies are accepted
+  const rejectedAll =
+    hasConsented &&
+    acceptedHosts.length === strictNecessaryHosts.length &&
+    strictNecessaryHosts.every((h) => acceptedHosts.includes(h)) &&
+    !acceptedHosts.some((h) => !strictNecessaryHosts.includes(h));
+  const isCustom = hasConsented && !acceptedAll && !rejectedAll;
+
+  const handleResetCookieConsent = () => {
+    updateSetting('cookieConsent', {
+      acceptedHosts: [],
+      consentedCookieHosts: [],
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      {!hasCookieConsent ? (
+        <div className="rounded-lg border bg-card p-4 space-y-3">
+          <div className="space-y-1">
+            <h3
+              className="text-sm font-medium leading-none"
+              style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+            >
+              {t('dataPrivacy.noCookiesConfigured.title')}
+            </h3>
+            <p className="text-sm text-muted-foreground">
+              {t('dataPrivacy.noCookiesConfigured.description')}
+            </p>
+          </div>
+          <div className="flex items-start gap-2 text-sm">
+            <span className="text-green-600 dark:text-green-400 mt-0.5">✓</span>
+            <span className="text-muted-foreground">
+              {t('dataPrivacy.noCookiesConfigured.info')}
+            </span>
+          </div>
+        </div>
+      ) : (
+        <div className="space-y-2">
+          <label
+            className="text-sm font-medium leading-none"
+            style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+          >
+            {t('dataPrivacy.cookieConsent.title')}
+          </label>
+          <div className="mt-2 space-y-3">
+            <p className="text-sm text-muted-foreground">
+              {!hasConsented
+                ? t('dataPrivacy.cookieConsent.descriptionNotConsented')
+                : acceptedAll
+                  ? t('dataPrivacy.cookieConsent.statusAcceptedAll')
+                  : rejectedAll
+                    ? t('dataPrivacy.cookieConsent.statusRejectedAll')
+                    : t('dataPrivacy.cookieConsent.statusCustom')}
+            </p>
+            {hasConsented && (
+              <div className="flex items-center gap-2 text-sm mt-2">
+                <span
+                  className={cn(
+                    'px-2 py-1 rounded-md text-xs font-medium transition-colors',
+                    acceptedAll
+                      ? 'bg-primary/10 text-primary border border-primary/20'
+                      : 'text-muted-foreground',
+                  )}
+                >
+                  {t('dataPrivacy.cookieConsent.labelAcceptedAll')}
+                </span>
+                <span className="text-muted-foreground/30">|</span>
+                <span
+                  className={cn(
+                    'px-2 py-1 rounded-md text-xs font-medium transition-colors',
+                    isCustom
+                      ? 'bg-muted text-muted-foreground border border-border'
+                      : 'text-muted-foreground',
+                  )}
+                >
+                  {t('dataPrivacy.cookieConsent.labelCustom')}
+                </span>
+                <span className="text-muted-foreground/30">|</span>
+                <span
+                  className={cn(
+                    'px-2 py-1 rounded-md text-xs font-medium transition-colors',
+                    rejectedAll
+                      ? 'bg-muted text-muted-foreground border border-border'
+                      : 'text-muted-foreground',
+                  )}
+                >
+                  {t('dataPrivacy.cookieConsent.labelRejectedAll')}
+                </span>
+              </div>
+            )}
+            <div className="flex flex-wrap gap-2">
+              <Button
+                variant="outline"
+                onClick={() => shellui.openDrawer({ url: urls.cookiePreferences, size: '420px' })}
+                className="w-full sm:w-auto"
+              >
+                {t('dataPrivacy.cookieConsent.manageButton')}
+              </Button>
+              <Button
+                variant="ghost"
+                onClick={handleResetCookieConsent}
+                disabled={!hasConsented}
+                className="w-full sm:w-auto"
+              >
+                {t('dataPrivacy.cookieConsent.button')}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

package/src/features/settings/components/Develop.tsx

@@ -0,0 +1,174 @@
+import { useTranslation } from 'react-i18next';
+import { shellui } from '@shellui/sdk';
+import { useSettings } from '../hooks/useSettings';
+import { useConfig } from '../../config/useConfig';
+import { flattenNavigationItems, resolveLocalizedString } from '../../layouts/utils';
+import { Switch } from '@/components/ui/switch';
+import { Select } from '@/components/ui/select';
+import { Button } from '@/components/ui/button';
+import { ToastTestButtons } from './develop/ToastTestButtons';
+import { DialogTestButtons } from './develop/DialogTestButtons';
+import { ModalTestButtons } from './develop/ModalTestButtons';
+import { DrawerTestButtons } from './develop/DrawerTestButtons';
+import type { LayoutType } from '../../config/types';
+
+export const Develop = () => {
+  const { t } = useTranslation('settings');
+  const { settings, updateSetting } = useSettings();
+  const { config } = useConfig();
+  const currentLanguage = settings.language?.code || 'en';
+  const effectiveLayout: LayoutType = settings.layout ?? config?.layout ?? 'sidebar';
+  const navItems = config?.navigation?.length
+    ? flattenNavigationItems(config?.navigation ?? []).filter(
+        (item, index, self) => index === self.findIndex((i) => i.path === item.path),
+      )
+    : [];
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3
+          className="text-lg font-semibold mb-2"
+          style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+        >
+          {t('develop.logging.title')}
+        </h3>
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <label
+                htmlFor="log-shellsdk"
+                className="text-sm font-medium leading-none"
+                style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+              >
+                {t('develop.logging.shellsdk.label')}
+              </label>
+              <p className="text-sm text-muted-foreground">
+                {t('develop.logging.shellsdk.description')}
+              </p>
+            </div>
+            <Switch
+              id="log-shellsdk"
+              checked={settings.logging?.namespaces?.shellsdk || false}
+              onCheckedChange={(checked) =>
+                updateSetting('logging', {
+                  namespaces: {
+                    ...settings.logging?.namespaces,
+                    shellsdk: checked,
+                  },
+                })
+              }
+            />
+          </div>
+
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <label
+                htmlFor="log-shellcore"
+                className="text-sm font-medium leading-none"
+                style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+              >
+                {t('develop.logging.shellcore.label')}
+              </label>
+              <p className="text-sm text-muted-foreground">
+                {t('develop.logging.shellcore.description')}
+              </p>
+            </div>
+            <Switch
+              id="log-shellcore"
+              checked={settings.logging?.namespaces?.shellcore || false}
+              onCheckedChange={(checked) =>
+                updateSetting('logging', {
+                  namespaces: {
+                    ...settings.logging?.namespaces,
+                    shellcore: checked,
+                  },
+                })
+              }
+            />
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <h3
+          className="text-lg font-semibold mb-2"
+          style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+        >
+          {t('develop.navigation.title')}
+        </h3>
+        {navItems.length ? (
+          <div className="space-y-2">
+            <label
+              htmlFor="develop-nav-select"
+              className="text-sm font-medium leading-none"
+              style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+            >
+              {t('develop.navigation.selectLabel')}
+            </label>
+            <div className="mt-2">
+              <Select
+                id="develop-nav-select"
+                defaultValue=""
+                onChange={(e) => {
+                  const path = e.target.value;
+                  if (path) {
+                    shellui.navigate(path.startsWith('/') ? path : `/${path}`);
+                  }
+                }}
+              >
+                <option value="">{t('develop.navigation.placeholder')}</option>
+                {navItems.map((item) => (
+                  <option
+                    key={item.path}
+                    value={`/${item.path}`}
+                  >
+                    {resolveLocalizedString(item.label, currentLanguage) || item.path}
+                  </option>
+                ))}
+              </Select>
+            </div>
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground">{t('develop.navigation.empty')}</p>
+        )}
+      </div>
+
+      <div>
+        <h3
+          className="text-lg font-semibold mb-2"
+          style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+        >
+          {t('develop.layout.title')}
+        </h3>
+        <div className="flex flex-wrap gap-2">
+          {(['sidebar', 'windows'] as const).map((layoutMode) => (
+            <Button
+              key={layoutMode}
+              variant={effectiveLayout === layoutMode ? 'default' : 'outline'}
+              size="sm"
+              onClick={() => updateSetting('layout', layoutMode as LayoutType)}
+            >
+              {t(`develop.layout.${layoutMode}`)}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      <div>
+        <h3
+          className="text-lg font-semibold mb-2"
+          style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+        >
+          {t('develop.testing.title')}
+        </h3>
+        <div className="space-y-4">
+          <ToastTestButtons />
+          <DialogTestButtons />
+          <ModalTestButtons />
+          <DrawerTestButtons />
+        </div>
+      </div>
+    </div>
+  );
+};