@brika/plugin-weather 0.3.0 → 0.3.1

package/package.json

@@ -2,13 +2,13 @@
   "$schema": "https://schema.brika.dev/plugin.schema.json",
   "name": "@brika/plugin-weather",
   "displayName": "Weather",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Beautiful weather display with current conditions, forecast, and compact widget",
   "author": "BRIKA Team",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/maxscharwath/brika.git",
+    "url": "https://github.com/brikalabs/brika.git",
     "directory": "plugins/weather"
   },
   "icon": "./icon.svg",
@@ -32,7 +32,7 @@
   ],
   "scripts": {
     "link": "bun link",
-    "tsc": "bunx --bun tsc --noEmit",
+    "typecheck": "tsgo --noEmit",
     "prepublishOnly": "brika-verify-plugin"
   },
   "preferences": [
@@ -170,7 +170,11 @@
     }
   ],
   "dependencies": {
-    "@brika/sdk": "0.3.0"
+    "@brika/sdk": "0.3.1"
+  },
+  "devDependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1"
   },
   "files": [
     "src",

package/src/bricks/compact.tsx

@@ -1,60 +1,66 @@
-import { Avatar, Box, Column, defineBrick, Icon, Row, Text, useLocale } from '@brika/sdk/bricks';
-import { useWeather } from '../use-weather';
-import { formatTempWithUnit, getWeatherVisuals } from '../utils';
-import { CITY_UNIT_CONFIG, WeatherError, WeatherLoading } from './shared';
-
-// ─── Brick Definition ──────────────────────────────────────────────────────
-
-export const compactBrick = defineBrick(
-  {
-    id: 'compact',
-    families: ['sm'],
-    minSize: { w: 1, h: 1 },
-    maxSize: { w: 3, h: 3 },
-    config: CITY_UNIT_CONFIG,
-  },
-  () => {
-    const { t } = useLocale();
-    const { weather, unit } = useWeather();
-
-    if (weather.loading && !weather.current) return <WeatherLoading variant="compact" />;
-    if (weather.error && !weather.current) return <WeatherError message={t('ui.noData')} />;
-    if (!weather.current || !weather.location) return <WeatherLoading variant="compact" />;
-
-    const { meta, color, gradient } = getWeatherVisuals(weather.current.weatherCode);
-    const temp = formatTempWithUnit(weather.current.temperature, unit);
-
-    return (
-      <Box background={gradient} rounded="sm" padding="md" grow>
-        <Column gap="sm" justify="center" grow>
-          <Row gap="sm" align="center">
-            <Avatar icon={meta.icon} color={color} size="md" />
-            <Column gap="sm" grow>
-              <Text content={temp} variant="heading" weight="bold" color="#ffffff" maxLines={1} />
-              <Text content={t(meta.labelKey)} variant="caption" color="rgba(255,255,255,0.65)" maxLines={1} />
-            </Column>
-          </Row>
-          <Row gap="sm" align="center">
-            <Icon name="map-pin" size="sm" color="rgba(255,255,255,0.5)" />
-            <Text
-              content={weather.location.name}
-              variant="caption"
-              weight="semibold"
-              color="rgba(255,255,255,0.85)"
-              maxLines={1}
-            />
-          </Row>
-          <Row gap="sm" align="center">
-            <Icon name="thermometer" size="sm" color="rgba(255,255,255,0.5)" />
-            <Text
-              content={t('stats.feelsLikeTemp', { temp: formatTempWithUnit(weather.current.apparentTemperature, unit) })}
-              variant="caption"
-              color="rgba(255,255,255,0.6)"
-              maxLines={1}
-            />
-          </Row>
-        </Column>
-      </Box>
-    );
-  },
-);
+/**
+ * Compact weather brick — client-side rendered.
+ *
+ * This brick runs in the browser as a real React component.
+ * Weather data is pushed from the plugin process via setBrickData().
+ * Imports are resolved by the bridge (globalThis.__brika) at build time.
+ */
+
+import { useBrickConfig, useBrickData } from '@brika/sdk/brick-views';
+import { useLocale } from '@brika/sdk/ui-kit/hooks';
+import { MapPin, Thermometer } from 'lucide-react';
+import { CityError, formatTempWithUnit, LoadingSpinner, resolveCity, resolveUnit } from './shared';
+
+// ─── Types (inlined — can't import from plugin runtime code) ────────────────
+
+interface CompactCityData {
+  temperature: number;
+  apparentTemperature: number;
+  conditionKey: string;
+  city: string;
+  gradient: string;
+}
+
+interface CompactWeatherData {
+  defaultCity: string;
+  unit: string;
+  cities: Record<string, CompactCityData>;
+  cityErrors?: Record<string, string>;
+}
+
+// ─── Component ──────────────────────────────────────────────────────────────
+
+export default function CompactWeather() {
+  const data = useBrickData<CompactWeatherData>();
+  const config = useBrickConfig();
+  const { t } = useLocale();
+
+  if (!data) return <LoadingSpinner />;
+
+  const cityKey = resolveCity(config, data.defaultCity);
+  const cityData = data.cities[cityKey];
+
+  if (!cityData) return <CityError error={data.cityErrors?.[cityKey]} />;
+
+  const unit = resolveUnit(config, data.unit);
+
+  return (
+    <div
+      className="flex h-full flex-col justify-center gap-2 rounded-lg p-3"
+      style={{ background: cityData.gradient }}
+    >
+      <div className="flex items-center gap-2">
+        <span className="text-2xl font-bold text-white">{formatTempWithUnit(cityData.temperature, unit)}</span>
+        <span className="text-sm text-white/70">{t(`conditions.${cityData.conditionKey}`)}</span>
+      </div>
+      <div className="flex items-center gap-1 text-xs text-white/60">
+        <MapPin className="size-3" />
+        <span className="truncate">{cityData.city}</span>
+      </div>
+      <div className="flex items-center gap-1 text-xs text-white/50">
+        <Thermometer className="size-3" />
+        <span>{t('stats.feelsLike')} {formatTempWithUnit(cityData.apparentTemperature, unit)}</span>
+      </div>
+    </div>
+  );
+}

package/src/bricks/current.tsx

@@ -1,15 +1,66 @@
-import { Avatar, Box, Column, Divider, defineBrick, Grid, type I18nRef, Icon, Row, Spacer, Text, useLocale } from '@brika/sdk/bricks';
-import { useWeather } from '../use-weather';
+/**
+ * Current weather brick — client-side rendered.
+ *
+ * Displays live weather conditions with temperature, feels-like,
+ * humidity, wind, pressure, and a gradient background matching the condition.
+ * Data is pushed from the plugin process via setBrickData().
+ */
+
+import { useBrickConfig, useBrickData, useBrickSize } from '@brika/sdk/brick-views';
+import { useLocale } from '@brika/sdk/ui-kit/hooks';
+import {
+  Droplets,
+  Gauge,
+  MapPin,
+  Thermometer,
+  Wind,
+} from 'lucide-react';
+import type { ComponentType } from 'react';
 import {
+  CityError,
   formatTemp,
   formatTempWithUnit,
-  getWeatherVisuals,
+  LoadingSpinner,
+  resolveCity,
+  resolveUnit,
   tempUnit,
-  windDirectionLabel,
-} from '../utils';
-import { CITY_UNIT_CONFIG, WeatherError, WeatherLoading } from './shared';
+  WeatherIcon,
+} from './shared';
+
+// ─── Types (inlined — can't import from plugin runtime code) ────────────────
+
+interface CurrentCityData {
+  temperature: number;
+  apparentTemperature: number;
+  humidity: number;
+  weatherCode: number;
+  windSpeed: number;
+  windDirection: number;
+  pressure: number;
+  conditionKey: string;
+  icon: string;
+  gradient: string;
+  color: string;
+  city: string;
+  lastUpdated: number | null;
+}
+
+interface CurrentWeatherData {
+  defaultCity: string;
+  unit: string;
+  cities: Record<string, CurrentCityData>;
+  cityErrors?: Record<string, string>;
+}
+
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+function windDirectionLabel(degrees: number): string {
+  const dirs = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'] as const;
+  const index = Math.round(degrees / 45) % 8;
+  return dirs[index];
+}
 
-// ─── Inline stat (icon + label + value + suffix) ────────────────────────────
+// ─── Stat row ────────────────────────────────────────────────────────────────
 
 function WeatherStat({
   icon,
@@ -17,117 +68,134 @@ function WeatherStat({
   value,
   suffix,
 }: Readonly<{
-  icon: string;
-  label: string | I18nRef;
+  icon: ComponentType<{ className?: string }>;
+  label: string;
   value: string;
   suffix?: string;
 }>) {
+  const StatIcon = icon;
   return (
-    <Column gap="sm" grow>
-      <Row gap="sm" align="center">
-        <Icon name={icon} size="sm" color="rgba(255,255,255,0.5)" />
-        <Text content={label} variant="caption" size="xs" color="rgba(255,255,255,0.6)" maxLines={1} />
-      </Row>
-      <Row gap="sm" align="end">
-        <Text content={value} variant="heading" weight="bold" color="#ffffff" maxLines={1} />
-        {suffix ? (
-          <Text content={suffix} variant="caption" size="xs" color="rgba(255,255,255,0.5)" maxLines={1} />
-        ) : null}
-      </Row>
-    </Column>
+    <div className="flex flex-1 flex-col gap-1">
+      <div className="flex items-center gap-1.5">
+        <StatIcon className="size-3 shrink-0 text-white/50" />
+        <span className="truncate text-[10px] text-white/60">{label}</span>
+      </div>
+      <div className="flex items-baseline gap-1">
+        <span className="font-bold text-white">{value}</span>
+        {suffix ? <span className="text-[10px] text-white/50">{suffix}</span> : null}
+      </div>
+    </div>
   );
 }
 
-// ─── Brick Definition ──────────────────────────────────────────────────────
+// ─── Component ──────────────────────────────────────────────────────────────
+
+export default function CurrentWeather() {
+  const data = useBrickData<CurrentWeatherData>();
+  const config = useBrickConfig();
+  const { width, height } = useBrickSize();
+  const { t } = useLocale();
 
-export const currentBrick = defineBrick(
-  {
-    id: 'current',
-    families: ['sm', 'md', 'lg'],
-    minSize: { w: 1, h: 1 },
-    maxSize: { w: 12, h: 8 },
-    config: CITY_UNIT_CONFIG,
-  },
-  () => {
-    const { t } = useLocale();
-    const { weather, unit } = useWeather();
+  if (!data) return <LoadingSpinner />;
 
-    if (weather.loading && !weather.current) return <WeatherLoading />;
-    if (weather.error && !weather.current) return <WeatherError message={weather.error} />;
-    if (!weather.current || !weather.location) return <WeatherLoading />;
+  const cityKey = resolveCity(config, data.defaultCity);
+  const d = data.cities[cityKey];
 
-    const { meta, color, gradient } = getWeatherVisuals(weather.current.weatherCode);
+  if (!d) return <CityError error={data.cityErrors?.[cityKey]} />;
 
+  const unit = resolveUnit(config, data.unit);
+  const isCompact = width <= 2 && height <= 1;
+
+  // ─── Compact layout ─────────────────────────────────────────────
+
+  if (isCompact) {
     return (
-      <Box background={gradient} rounded="sm" padding="lg" grow>
-        <Column gap="md" grow justify="between">
-          {/* Header: location + condition label */}
-          <Row gap="sm" align="center">
-            <Icon name="map-pin" size="sm" color="rgba(255,255,255,0.5)" />
-            <Text content={weather.location.name} variant="body" weight="bold" color="#ffffff" maxLines={1} />
-            <Spacer />
-            <Text content={t(meta.labelKey)} variant="caption" color="rgba(255,255,255,0.6)" maxLines={1} />
-          </Row>
-
-          {/* Main: avatar + temp + feels like */}
-          <Row gap="md" align="center">
-            <Avatar icon={meta.icon} color={color} size="lg" />
-            <Column gap="sm" grow>
-              <Text
-                content={formatTempWithUnit(weather.current.temperature, unit)}
-                variant="heading"
-                size="xl"
-                weight="bold"
-                color="#ffffff"
-                maxLines={1}
-              />
-              <Text
-                content={t('stats.feelsLikeTemp', { temp: formatTempWithUnit(weather.current.apparentTemperature, unit) })}
-                variant="caption"
-                color="rgba(255,255,255,0.6)"
-                maxLines={1}
-              />
-            </Column>
-          </Row>
-
-          {/* Stats: auto-fit grid wraps to available width */}
-          <Divider color="rgba(255,255,255,0.12)" />
-          <Grid autoFit minColumnWidth={90} gap="md">
-            <WeatherStat
-              icon="thermometer"
-              label={t('stats.feelsLike')}
-              value={formatTemp(weather.current.apparentTemperature, unit)}
-              suffix={tempUnit(unit)}
-            />
-            <WeatherStat
-              icon="droplets"
-              label={t('stats.humidity')}
-              value={`${weather.current.humidity}`}
-              suffix="%"
-            />
-            <WeatherStat
-              icon="wind"
-              label={t('stats.wind')}
-              value={`${Math.round(weather.current.windSpeed)}`}
-              suffix={`km/h ${windDirectionLabel(weather.current.windDirection)}`}
-            />
-            <WeatherStat
-              icon="gauge"
-              label={t('stats.pressure')}
-              value={`${Math.round(weather.current.pressure)}`}
-              suffix="hPa"
-            />
-          </Grid>
-
-          {/* Updated timestamp */}
-          <Text
-            content={t('ui.updated', { time: weather.lastUpdated === null ? '' : new Date(weather.lastUpdated).toLocaleTimeString() })}
-            variant="caption"
-            color="rgba(255,255,255,0.35)"
-            maxLines={1}
-          />
-        </Column>
-      </Box>
+      <div
+        className="flex h-full flex-col justify-center gap-1.5 rounded-lg p-3"
+        style={{ background: d.gradient }}
+      >
+        <div className="flex items-center gap-2">
+          <WeatherIcon name={d.icon} className="size-5 text-white/80" />
+          <span className="text-xl font-bold text-white">
+            {formatTempWithUnit(d.temperature, unit)}
+          </span>
+        </div>
+        <div className="flex items-center gap-1 text-xs text-white/60">
+          <MapPin className="size-3 shrink-0" />
+          <span className="truncate">{d.city}</span>
+        </div>
+      </div>
     );
-  },
-);
+  }
+
+  // ─── Default layout ─────────────────────────────────────────────
+
+  return (
+    <div
+      className="flex h-full flex-col gap-3 rounded-lg p-4"
+      style={{ background: d.gradient }}
+    >
+      {/* Header: location + condition label */}
+      <div className="flex items-center gap-1.5">
+        <MapPin className="size-3.5 shrink-0 text-white/50" />
+        <span className="truncate font-bold text-white">{d.city}</span>
+        <span className="ml-auto shrink-0 text-xs text-white/60">{t(`conditions.${d.conditionKey}`)}</span>
+      </div>
+
+      {/* Main: icon + temp + feels like */}
+      <div className="flex flex-1 items-center gap-3">
+        <div className="flex size-12 items-center justify-center rounded-full" style={{ backgroundColor: `${d.color}33` }}>
+          <WeatherIcon name={d.icon} className="size-7" color={d.color} />
+        </div>
+        <div className="flex flex-col gap-0.5">
+          <span className="text-3xl font-bold leading-none text-white">
+            {formatTempWithUnit(d.temperature, unit)}
+          </span>
+          <span className="text-xs text-white/60">
+            {t('stats.feelsLike')} {formatTempWithUnit(d.apparentTemperature, unit)}
+          </span>
+        </div>
+      </div>
+
+      {/* Divider */}
+      <div className="h-px bg-white/12" />
+
+      {/* Stats grid */}
+      <div className="grid auto-cols-fr grid-flow-col gap-3">
+        <WeatherStat
+          icon={Thermometer}
+          label={t('stats.feelsLike')}
+          value={formatTemp(d.apparentTemperature, unit)}
+          suffix={tempUnit(unit)}
+        />
+        <WeatherStat
+          icon={Droplets}
+          label={t('stats.humidity')}
+          value={`${d.humidity}`}
+          suffix="%"
+        />
+        <WeatherStat
+          icon={Wind}
+          label={t('stats.wind')}
+          value={`${Math.round(d.windSpeed)}`}
+          suffix={`km/h ${windDirectionLabel(d.windDirection)}`}
+        />
+        {width >= 3 ? (
+          <WeatherStat
+            icon={Gauge}
+            label={t('stats.pressure')}
+            value={`${Math.round(d.pressure)}`}
+            suffix="hPa"
+          />
+        ) : null}
+      </div>
+
+      {/* Updated timestamp */}
+      {d.lastUpdated ? (
+        <span className="text-[10px] text-white/35">
+          {t('ui.updated', { time: new Date(d.lastUpdated).toLocaleTimeString() })}
+        </span>
+      ) : null}
+    </div>
+  );
+}

package/src/bricks/forecast.tsx

@@ -1,136 +1,161 @@
-import { Avatar, Box, Column, Divider, defineBrick, Grid, type I18nRef, Icon, Row, Spacer, Text, useBrickSize, useLocale, usePreference } from '@brika/sdk/bricks';
-import { useWeather } from '../use-weather';
-import { dayName, formatTempWithUnit, getWeatherVisuals } from '../utils';
-import { CITY_UNIT_CONFIG, WeatherError, WeatherLoading } from './shared';
-
-// ─── Day props shared by both layouts ───────────────────────────────────────
-
-interface DayProps {
-  dayLabel: I18nRef;
-  code: number;
-  high: number;
-  low: number;
+/**
+ * Forecast weather brick — client-side rendered.
+ *
+ * Displays a multi-day weather forecast with highs, lows, and condition icons.
+ * Responsive: grid layout when wide, list layout when narrow.
+ * Data is pushed from the plugin process via setBrickData().
+ */
+
+import { useBrickConfig, useBrickData, useBrickSize } from '@brika/sdk/brick-views';
+import { useLocale } from '@brika/sdk/ui-kit/hooks';
+import { MapPin } from 'lucide-react';
+import {
+  CityError,
+  formatTempWithUnit,
+  LoadingSpinner,
+  resolveCity,
+  resolveUnit,
+  WeatherIcon,
+} from './shared';
+
+// ─── Types (inlined — can't import from plugin runtime code) ────────────────
+
+interface ForecastDay {
+  date: string;
+  weatherCode: number;
+  tempMax: number;
+  tempMin: number;
+  icon: string;
+  color: string;
+}
+
+interface ForecastCityData {
+  days: ForecastDay[];
+  gradient: string;
+  city: string;
+}
+
+interface ForecastWeatherData {
+  defaultCity: string;
   unit: string;
+  cities: Record<string, ForecastCityData>;
+  cityErrors?: Record<string, string>;
 }
 
-// ─── List row (narrow) — single-line per day, maximally scannable ───────────
+// ─── Helpers ────────────────────────────────────────────────────────────────
+
+const WEEKDAY_KEYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'] as const;
+
+function dayLabel(dateStr: string, t: (key: string) => string): string {
+  const date = new Date(dateStr + 'T00:00:00');
+  const today = new Date();
+  today.setHours(0, 0, 0, 0);
 
-function DayRow({ dayLabel, code, high, low, unit }: Readonly<DayProps>) {
-  const { meta, color } = getWeatherVisuals(code);
+  const tomorrow = new Date(today);
+  tomorrow.setDate(tomorrow.getDate() + 1);
 
+  if (date.getTime() === today.getTime()) return t('days.today');
+  if (date.getTime() === tomorrow.getTime()) return t('days.tomorrow');
+  return t(`days.${WEEKDAY_KEYS[date.getDay()]}`);
+}
+
+// ─── Day row (narrow list layout) ───────────────────────────────────────────
+
+function DayRow({ day, unit }: Readonly<{ day: ForecastDay; unit: string }>) {
+  const { t } = useLocale();
   return (
-    <Row gap="sm" align="center">
-      <Avatar icon={meta.icon} color={color} size="sm" />
-      <Column grow>
-        <Text content={dayLabel} variant="body" weight="medium" color="#ffffff" maxLines={1} />
-      </Column>
-      <Text content={formatTempWithUnit(high, unit)} variant="body" weight="bold" color="#ffffff" />
-      <Text content={formatTempWithUnit(low, unit)} variant="body" color="rgba(255,255,255,0.35)" />
-    </Row>
+    <div className="flex items-center gap-2">
+      <div className="flex size-7 items-center justify-center rounded-full" style={{ backgroundColor: `${day.color}33` }}>
+        <WeatherIcon name={day.icon} color={day.color} className="size-4" />
+      </div>
+      <span className="flex-1 truncate text-sm font-medium text-white">{dayLabel(day.date, t)}</span>
+      <span className="font-bold text-white">{formatTempWithUnit(day.tempMax, unit)}</span>
+      <span className="text-sm text-white/35">{formatTempWithUnit(day.tempMin, unit)}</span>
+    </div>
   );
 }
 
-// ─── Grid cell (wide) — compact vertical card ──────────────────────────────
-
-function DayCell({ dayLabel, code, high, low, unit }: Readonly<DayProps>) {
-  const { meta, color } = getWeatherVisuals(code);
+// ─── Day cell (wide grid layout) ────────────────────────────────────────────
 
+function DayCell({ day, unit }: Readonly<{ day: ForecastDay; unit: string }>) {
+  const { t } = useLocale();
   return (
-    <Column gap="sm" align="center">
-      <Text content={dayLabel} variant="caption" weight="semibold" color="rgba(255,255,255,0.7)" maxLines={1} />
-      <Avatar icon={meta.icon} color={color} size="sm" />
-      <Row gap="sm" align="end">
-        <Text content={formatTempWithUnit(high, unit)} variant="body" weight="bold" color="#ffffff" />
-        <Text content={formatTempWithUnit(low, unit)} variant="caption" color="rgba(255,255,255,0.35)" />
-      </Row>
-    </Column>
+    <div className="flex flex-col items-center gap-1.5">
+      <span className="text-[11px] font-semibold text-white/70">{dayLabel(day.date, t)}</span>
+      <div className="flex size-8 items-center justify-center rounded-full" style={{ backgroundColor: `${day.color}33` }}>
+        <WeatherIcon name={day.icon} color={day.color} className="size-5" />
+      </div>
+      <div className="flex items-baseline gap-1">
+        <span className="text-sm font-bold text-white">{formatTempWithUnit(day.tempMax, unit)}</span>
+        <span className="text-[11px] text-white/35">{formatTempWithUnit(day.tempMin, unit)}</span>
+      </div>
+    </div>
   );
 }
 
-// ─── Brick Definition ────────────────────────────────────────────────────────
-
-export const forecastBrick = defineBrick(
-  {
-    id: 'forecast',
-    families: ['md', 'lg'],
-    minSize: { w: 2, h: 1 },
-    maxSize: { w: 12, h: 6 },
-    config: [
-      ...CITY_UNIT_CONFIG,
-      { type: 'number', name: 'days', default: 7, min: 1, max: 7, step: 1 },
-    ],
-  },
-  () => {
-    const { t } = useLocale();
-    const { weather, unit } = useWeather();
-    const [days] = usePreference<number>('days', 7);
-    const { width, height } = useBrickSize();
-
-    if (weather.loading && weather.daily.length === 0) return <WeatherLoading variant="forecast" />;
-    if (weather.error && weather.daily.length === 0) return <WeatherError message={weather.error} />;
-    if (weather.daily.length === 0) return <WeatherLoading variant="forecast" />;
-
-    const code = weather.current?.weatherCode ?? 3;
-    const { gradient } = getWeatherVisuals(code);
-    const locationName = weather.location?.name ?? '';
-
-    const useGrid = width >= 4;
-
-    // Grid: one row only — cap days by width. List: cap by height.
-    let maxVisible = width;
-    if (!useGrid) {
-      if (height >= 3) maxVisible = 7;
-      else if (height >= 2) maxVisible = 5;
-      else maxVisible = 3;
-    }
-    const visibleDays = weather.daily.slice(0, Math.min(days, maxVisible));
-
-    return (
-      <Box background={gradient} rounded="sm" padding="lg" grow>
-        <Column gap="sm" grow>
-          {/* Header — location left, day count right */}
-          <Row gap="sm" align="center">
-            <Icon name="map-pin" size="sm" color="rgba(255,255,255,0.5)" />
-            <Text content={locationName} variant="body" weight="semibold" color="#ffffff" maxLines={1} />
-            <Spacer />
-            <Text
-              content={t('ui.dayForecast', { count: visibleDays.length })}
-              variant="caption"
-              color="rgba(255,255,255,0.45)"
-            />
-          </Row>
-          <Divider color="rgba(255,255,255,0.1)" />
-
-          {/* Forecast — grid when wide, list when narrow */}
-          {useGrid
-            ? (
-              <Grid columns={visibleDays.length} gap="md">
-                {visibleDays.map((day) => (
-                  <DayCell
-                    dayLabel={dayName(day.date, t)}
-                    code={day.weatherCode}
-                    high={day.tempMax}
-                    low={day.tempMin}
-                    unit={unit}
-                  />
-                ))}
-              </Grid>
-            )
-            : (
-              <Column gap="sm" grow justify="between">
-                {visibleDays.map((day) => (
-                  <DayRow
-                    dayLabel={dayName(day.date, t)}
-                    code={day.weatherCode}
-                    high={day.tempMax}
-                    low={day.tempMin}
-                    unit={unit}
-                  />
-                ))}
-              </Column>
-            )}
-        </Column>
-      </Box>
-    );
-  },
-);
+// ─── Component ──────────────────────────────────────────────────────────────
+
+export default function WeatherForecast() {
+  const data = useBrickData<ForecastWeatherData>();
+  const config = useBrickConfig();
+  const { width, height } = useBrickSize();
+  const { t } = useLocale();
+
+  if (!data) return <LoadingSpinner />;
+
+  const cityKey = resolveCity(config, data.defaultCity);
+  const cityData = data.cities[cityKey];
+
+  if (!cityData) return <CityError error={data.cityErrors?.[cityKey]} />;
+
+  const unit = resolveUnit(config, data.unit);
+  const configDays = typeof config.days === 'number' ? config.days : 7;
+  const useGrid = width >= 4;
+
+  // Grid: cap days by width. List: cap by height.
+  let maxVisible = width;
+  if (!useGrid) {
+    if (height >= 3) maxVisible = 7;
+    else if (height >= 2) maxVisible = 5;
+    else maxVisible = 3;
+  }
+
+  const visibleDays = cityData.days.slice(0, Math.min(configDays, maxVisible));
+
+  return (
+    <div
+      className="flex h-full flex-col gap-2 rounded-lg p-4"
+      style={{ background: cityData.gradient }}
+    >
+      {/* Header — location left, day count right */}
+      <div className="flex items-center gap-1.5">
+        <MapPin className="size-3.5 shrink-0 text-white/50" />
+        <span className="truncate font-semibold text-white">{cityData.city}</span>
+        <span className="ml-auto shrink-0 text-xs text-white/45">
+          {t('ui.dayForecast', { count: visibleDays.length })}
+        </span>
+      </div>
+
+      {/* Divider */}
+      <div className="h-px bg-white/10" />
+
+      {/* Forecast — grid when wide, list when narrow */}
+      {useGrid ? (
+        <div
+          className="flex flex-1 items-center justify-around"
+          style={{ display: 'grid', gridTemplateColumns: `repeat(${visibleDays.length}, 1fr)`, gap: '0.75rem' }}
+        >
+          {visibleDays.map((day) => (
+            <DayCell key={day.date} day={day} unit={unit} />
+          ))}
+        </div>
+      ) : (
+        <div className="flex flex-1 flex-col justify-between gap-1.5">
+          {visibleDays.map((day) => (
+            <DayRow key={day.date} day={day} unit={unit} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/bricks/shared.tsx

@@ -1,49 +1,90 @@
-import { type BrickTypeSpec, Column, Icon, Skeleton, Text, type TextContent } from '@brika/sdk/bricks';
-
-// ─── Shared brick config (city + unit dropdown) ─────────────────────────────
-
-export const CITY_UNIT_CONFIG: NonNullable<BrickTypeSpec['config']> = [
-  { type: 'text', name: 'city' },
-  {
-    type: 'dropdown',
-    name: 'unit',
-    options: [{ value: 'default' }, { value: 'celsius' }, { value: 'fahrenheit' }],
-    default: 'default',
-  },
-];
-
-// ─── Shared Loading / Error states ──────────────────────────────────────────
-
-export function WeatherLoading({ variant = 'default' }: Readonly<{ variant?: 'compact' | 'default' | 'forecast' }>) {
-  if (variant === 'compact') {
-    return (
-      <Column gap="sm" align="center" justify="center" grow>
-        <Skeleton variant="circle" width="32px" height="32px" />
-        <Skeleton variant="text" width="60%" />
-      </Column>
-    );
-  }
-  if (variant === 'forecast') {
-    return (
-      <Column gap="md" align="center" justify="center" grow>
-        <Skeleton variant="text" width="40%" />
-        <Skeleton variant="rect" width="100%" height="80px" />
-      </Column>
-    );
-  }
+/**
+ * Shared weather brick utilities — temperature formatting, icon map,
+ * city resolution, and loading/error states.
+ */
+
+import {
+  Cloud,
+  CloudDrizzle,
+  CloudFog,
+  CloudLightning,
+  CloudRain,
+  CloudRainWind,
+  CloudSun,
+  Loader2,
+  MapPin,
+  Snowflake,
+  Sun,
+} from 'lucide-react';
+import type { ComponentType } from 'react';
+
+// ─── Temperature helpers ──────────────────────────────────────────────────────
+
+export function formatTemp(celsius: number, unit: string): string {
+  if (unit === 'fahrenheit') return `${Math.round(celsius * 9 / 5 + 32)}`;
+  return `${Math.round(celsius)}`;
+}
+
+export function tempUnit(unit: string): string {
+  return unit === 'fahrenheit' ? '\u00b0F' : '\u00b0C';
+}
+
+export function formatTempWithUnit(celsius: number, unit: string): string {
+  return `${formatTemp(celsius, unit)}${tempUnit(unit)}`;
+}
+
+// ─── Icon map ─────────────────────────────────────────────────────────────────
+
+export const ICON_MAP: Record<string, ComponentType<{ className?: string; style?: React.CSSProperties }>> = {
+  'sun': Sun,
+  'cloud-sun': CloudSun,
+  'cloud': Cloud,
+  'cloud-fog': CloudFog,
+  'cloud-drizzle': CloudDrizzle,
+  'cloud-rain': CloudRain,
+  'snowflake': Snowflake,
+  'cloud-rain-wind': CloudRainWind,
+  'cloud-lightning': CloudLightning,
+};
+
+export function WeatherIcon({ name, className, color }: Readonly<{ name: string; className?: string; color?: string }>) {
+  const IconComponent = ICON_MAP[name] ?? Cloud;
+  return <IconComponent className={className} style={color ? { color } : undefined} />;
+}
+
+// ─── City + unit resolution ───────────────────────────────────────────────────
+
+export function resolveCity(config: Record<string, unknown>, defaultCity: string): string {
+  const raw = typeof config.city === 'string' ? config.city.trim() : '';
+  return raw || defaultCity;
+}
+
+export function resolveUnit(config: Record<string, unknown>, dataUnit: string): string {
+  const raw = typeof config.unit === 'string' ? config.unit : '';
+  return raw && raw !== 'default' ? raw : dataUnit;
+}
+
+// ─── Loading / error states ──────────────────────────────────────────────────
+
+export function LoadingSpinner() {
   return (
-    <Column gap="md" align="center" justify="center" grow>
-      <Skeleton variant="circle" width="48px" height="48px" />
-      <Skeleton variant="text" width="60%" lines={2} />
-    </Column>
+    <div className="flex h-full items-center justify-center">
+      <Loader2 className="size-5 animate-spin text-white/50" />
+    </div>
   );
 }
 
-export function WeatherError({ message }: Readonly<{ message: TextContent }>) {
+export function CityError({ error }: Readonly<{ error?: string }>) {
   return (
-    <Column gap="sm" align="center" justify="center" grow>
-      <Icon name="cloud-off" size="lg" color="muted" />
-      <Text content={message} variant="caption" color="muted" align="center" />
-    </Column>
+    <div className="flex h-full flex-col items-center justify-center gap-2 p-4 text-center">
+      {error ? (
+        <>
+          <MapPin className="size-5 text-white/40" />
+          <span className="text-sm text-white/60">{error}</span>
+        </>
+      ) : (
+        <Loader2 className="size-5 animate-spin text-white/50" />
+      )}
+    </div>
   );
 }

package/src/index.tsx

@@ -1,12 +1,212 @@
-import { log, onStop } from '@brika/sdk/lifecycle';
+import { getDeviceLocation, getPreferences, setBrickData } from '@brika/sdk';
+import {
+  log,
+  onBrickConfigChange,
+  onInit,
+  onPreferencesChange,
+  onStop,
+} from '@brika/sdk/lifecycle';
+import { getConditionColor, getGradient, getWeatherMeta } from './utils';
+import { acquirePolling, useWeatherMap } from './weather-store';
 
-export { compactBrick } from './bricks/compact';
-// Bricks (board UI)
-export { currentBrick } from './bricks/current';
-export { forecastBrick } from './bricks/forecast';
+// All bricks are client-rendered — no server-side brick exports.
+
+// ─── Preferences ────────────────────────────────────────────────────────────
+
+interface WeatherPrefs {
+  city?: string;
+  unit?: string;
+}
+
+function getUnit(prefs?: WeatherPrefs): string {
+  return (prefs ?? getPreferences<WeatherPrefs>()).unit ?? 'celsius';
+}
+
+const FALLBACK_CITY = 'Zurich';
+
+let defaultCity = FALLBACK_CITY;
+let currentUnit = getUnit();
+
+// ─── Multi-city polling ─────────────────────────────────────────────────────
+
+const cityReleases = new Map<string, () => void>();
+
+function ensurePolling(city: string): void {
+  if (!city || cityReleases.has(city)) return;
+  cityReleases.set(city, acquirePolling(city));
+}
+
+function stopPolling(city: string): void {
+  const release = cityReleases.get(city);
+  if (release) {
+    release();
+    cityReleases.delete(city);
+  }
+}
+
+function setDefaultCity(city: string): void {
+  if (!city || city === defaultCity) return;
+  stopPolling(defaultCity);
+  defaultCity = city;
+  ensurePolling(defaultCity);
+  pushBrickData();
+}
+
+// ─── Push brick data to client-side bricks ──────────────────────────────────
+
+function pushBrickData() {
+  const weatherMap = useWeatherMap.get();
+
+  // Build per-city formatted data for each brick type
+  const compactCities: Record<string, unknown> = {};
+  const currentCities: Record<string, unknown> = {};
+  const forecastCities: Record<string, unknown> = {};
+  const cityErrors: Record<string, string> = {};
+
+  for (const [city, weather] of Object.entries(weatherMap)) {
+    // Surface error states so the client can show feedback instead of a
+    // permanent loader when a city name is invalid or the API is down.
+    if (weather?.error) {
+      cityErrors[city] = weather.error;
+    }
+
+    if (!weather?.current || !weather.location) continue;
+
+    const code = weather.current.weatherCode;
+    const meta = getWeatherMeta(code);
+    const gradient = getGradient(code);
+    const color = getConditionColor(code);
+    const conditionKey = meta.labelKey.replace('conditions.', '');
+
+    compactCities[city] = {
+      temperature: weather.current.temperature,
+      apparentTemperature: weather.current.apparentTemperature,
+      conditionKey,
+      city: weather.location.name,
+      gradient,
+    };
+
+    currentCities[city] = {
+      temperature: weather.current.temperature,
+      apparentTemperature: weather.current.apparentTemperature,
+      humidity: weather.current.humidity,
+      weatherCode: code,
+      windSpeed: weather.current.windSpeed,
+      windDirection: weather.current.windDirection,
+      pressure: weather.current.pressure,
+      conditionKey,
+      icon: meta.icon,
+      gradient,
+      color,
+      city: weather.location.name,
+      lastUpdated: weather.lastUpdated,
+    };
+
+    forecastCities[city] = {
+      days: weather.daily.map((day) => {
+        const dayMeta = getWeatherMeta(day.weatherCode);
+        return {
+          date: day.date,
+          weatherCode: day.weatherCode,
+          tempMax: day.tempMax,
+          tempMin: day.tempMin,
+          icon: dayMeta.icon,
+          color: getConditionColor(day.weatherCode),
+        };
+      }),
+      gradient,
+      city: weather.location.name,
+    };
+  }
+
+  const shared = { defaultCity, unit: currentUnit, cityErrors };
+  setBrickData('compact', { ...shared, cities: compactCities });
+  setBrickData('current', { ...shared, cities: currentCities });
+  setBrickData('forecast', { ...shared, cities: forecastCities });
+}
+
+// Subscribe to weather store changes and push data to all client bricks
+useWeatherMap.subscribe(() => {
+  pushBrickData();
+});
+
+// ─── Start polling immediately with fallback city ───────────────────────────
+
+ensurePolling(defaultCity);
+
+// ─── Brick config changes (per-instance city) ──────────────────────────────
+
+/** Tracks which city each brick instance is currently polling. */
+const instanceCities = new Map<string, string>();
+
+onBrickConfigChange((instanceId, config) => {
+  const city = typeof config.city === 'string' ? config.city.trim() : '';
+  const previousCity = instanceCities.get(instanceId);
+
+  if (city === previousCity) return;
+
+  // Release the old city polling if no other instance uses it
+  if (previousCity) {
+    instanceCities.delete(instanceId);
+    if (previousCity !== defaultCity && ![...instanceCities.values()].includes(previousCity)) {
+      stopPolling(previousCity);
+    }
+  }
+
+  if (city) {
+    instanceCities.set(instanceId, city);
+    ensurePolling(city);
+  }
+});
+
+// ─── On init: refine default city from real preferences + hub location ──────
+
+onInit(async () => {
+  const prefs = getPreferences<WeatherPrefs>();
+  const prefCity = prefs.city?.trim();
+  currentUnit = getUnit(prefs);
+
+  if (prefCity) {
+    setDefaultCity(prefCity);
+    return;
+  }
+
+  // No preference city — try hub location
+  try {
+    const location = await getDeviceLocation();
+    if (location?.city) {
+      log.info(`Auto-detected city from hub location: ${location.city}`);
+      setDefaultCity(location.city);
+    }
+  } catch {
+    // Location permission denied or unavailable — keep fallback
+  }
+});
+
+// ─── Subsequent preference changes ──────────────────────────────────────────
+
+onPreferencesChange<WeatherPrefs>((prefs) => {
+  const newUnit = getUnit(prefs);
+  const newCity = prefs.city?.trim() || '';
+
+  if (newUnit !== currentUnit) {
+    currentUnit = newUnit;
+    pushBrickData();
+  }
+
+  if (newCity) {
+    setDefaultCity(newCity);
+  }
+});
+
+// ─── Lifecycle ──────────────────────────────────────────────────────────────
 
-// Lifecycle
 onStop(() => {
+  for (const release of cityReleases.values()) {
+    release();
+  }
+  cityReleases.clear();
+  instanceCities.clear();
   log.info('Weather plugin stopping');
 });
 

package/src/utils.ts

@@ -140,7 +140,7 @@ export function windDirectionLabel(degrees: number): string {
 
 // ─── Day Name Formatting ───────────────────────────────────────────────────
 
-import type { I18nRef } from '@brika/sdk/bricks';
+import type { I18nRef } from '@brika/sdk/ui-kit';
 
 export type TranslateFn = (key: string, params?: Record<string, string | number>) => I18nRef;
 

package/src/weather-store.ts

@@ -12,8 +12,7 @@
  * ```
  */
 
-import { log } from '@brika/sdk';
-import { defineSharedStore } from '@brika/sdk/bricks';
+import { defineSharedStore, log } from '@brika/sdk';
 import { fetchWeather, geocodeCity } from './api';
 import type { GeoLocation, WeatherState } from './types';
 

package/src/use-weather.ts

@@ -1,75 +0,0 @@
-/**
- * useWeather — unified hook for weather brick instances.
- *
- * Handles city resolution (per-instance → plugin-level → auto-detect),
- * unit resolution (per-instance → plugin-level → celsius), polling
- * lifecycle, and store subscription. All in one call.
- *
- * @example
- * ```tsx
- * const { weather, city, unit } = useWeather();
- * // weather.current?.temperature, weather.loading, weather.error
- * ```
- */
-
-import { getDeviceLocation } from '@brika/sdk';
-import {
-  useEffect,
-  usePluginPreference,
-  usePreference,
-  useState,
-} from '@brika/sdk/bricks';
-import type { WeatherState } from './types';
-import { acquirePolling, DEFAULT_WEATHER, useWeatherMap } from './weather-store';
-
-interface UseWeatherResult {
-  /** Weather data for the resolved city. */
-  weather: WeatherState;
-  /** The resolved city name being displayed. */
-  city: string;
-  /** The resolved temperature unit ('celsius' | 'fahrenheit'). */
-  unit: string;
-}
-
-/**
- * Unified weather hook.
- *
- * Resolution order for **city**: brick config → plugin preference → auto-detect → "Zurich"
- * Resolution order for **unit**: brick config → plugin preference → "celsius"
- */
-export function useWeather(): UseWeatherResult {
-  // ─── City resolution ──────────────────────────────────────────────
-  const [brickCity] = usePreference<string>('city', '');
-  const pluginCity = usePluginPreference<string>('city', '');
-  const [autoCity, setAutoCity] = useState('');
-
-  const configuredCity = brickCity || pluginCity;
-
-  // Auto-detect location when no city is configured
-  useEffect(() => {
-    if (configuredCity) return;
-    getDeviceLocation()
-      .then((loc) => {
-        if (loc?.city) setAutoCity(loc.city);
-      })
-      .catch(() => {
-        // Permission denied or location not configured — fall back to default city
-      });
-  }, [configuredCity]);
-
-  const resolvedCity = configuredCity || autoCity || 'Zurich';
-
-  // ─── Unit resolution ──────────────────────────────────────────────
-  const [brickUnit] = usePreference<string>('unit', 'default');
-  const pluginUnit = usePluginPreference<string>('unit', 'celsius');
-  const unit = brickUnit && brickUnit !== 'default' ? brickUnit : pluginUnit;
-
-  // ─── Polling lifecycle ────────────────────────────────────────────
-  useEffect(() => acquirePolling(resolvedCity), [resolvedCity]);
-
-  // ─── Store subscription ───────────────────────────────────────────
-  const weatherMap = useWeatherMap();
-  const weather = weatherMap[resolvedCity] ?? DEFAULT_WEATHER;
-
-  return { weather, city: resolvedCity, unit };
-}