@saasicat/ui-vue 0.7.0 → 0.9.0

package/src/pages-standard/plan-versions/PlanVersionsAudit.vue

@@ -1,326 +0,0 @@
-<template>
-    <div class="sa-pv-audit">
-        <div class="sa-pv-audit__card">
-            <header class="sa-pv-audit__head">
-                <q-icon name="history" size="18px" class="sa-pv-audit__head-icon" />
-                <h3>{{ msg.audit.title }}</h3>
-                <span class="sa-pv-audit__count">{{ eventCountLabel }}</span>
-                <q-space />
-                <button v-if="!loading" type="button" class="sa-pv-audit__refresh" @click="reload">
-                    <q-icon name="refresh" size="14px" /> {{ common.reload }}
-                </button>
-            </header>
-            <div v-if="loading" class="sa-pv-audit__loading">
-                <q-spinner size="20px" /> {{ msg.audit.loading }}
-            </div>
-            <div v-else-if="events.length === 0" class="sa-pv-audit__empty">
-                {{ msg.audit.empty }}
-            </div>
-            <div v-else class="sa-pv-audit__list">
-                <div
-                    v-for="(e, i) in events"
-                    :key="e.id"
-                    class="sa-pv-audit__item"
-                    :class="{ 'sa-pv-audit__item--last': i === events.length - 1 }"
-                >
-                    <div
-                        class="sa-pv-audit__icon"
-                        :style="{ background: `${meta(e.action).color}14` }"
-                    >
-                        <q-icon
-                            :name="meta(e.action).icon"
-                            size="17px"
-                            :style="{ color: meta(e.action).color }"
-                        />
-                    </div>
-                    <div class="sa-pv-audit__body">
-                        <div class="sa-pv-audit__title-row">
-                            <span class="sa-pv-audit__title">{{ meta(e.action).label }}</span>
-                            <span class="sa-pv-audit__entity">{{ entityLabel(e) }}</span>
-                        </div>
-                        <div class="sa-pv-audit__detail">{{ detail(e) }}</div>
-                        <div class="sa-pv-audit__meta">
-                            <span
-                                ><q-icon name="schedule" size="12px" />
-                                {{ formatTimestamp(e.createdAt, locale) }}</span
-                            >
-                            <span v-if="actorEmail(e)">
-                                <q-icon name="person" size="12px" /> {{ actorEmail(e) }}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
-import type { CatalogSnapshot } from '../../client/plan-versions-catalog.js';
-import { formatMessage } from '../../client/i18n/format.js';
-import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
-import { formatTimestamp } from './format.js';
-
-// PlanVersionsAudit — data-agnostic. Consumers pass in a `loadAudit` loader
-// that supplies events; the component filters them to match the current
-// snapshot (drafts/active = everything ≤ 50, historical = ≤ asOf).
-//
-// The action meta map can be extended per app so that additional actions
-// (e.g. app-specific audit keys) get their own icons and labels.
-
-interface AuditRow {
-    id: string;
-    createdAt: string;
-    action: string;
-    entity: string;
-    entityId: string;
-    changes: Record<string, unknown> | null;
-    /** Legacy style: nested user object with email. */
-    user?: { email: string; firstName?: string; lastName?: string } | null;
-    /** Platform style: flat userEmail field. */
-    userEmail?: string | null;
-}
-
-interface ActionMeta {
-    icon: string;
-    color: string;
-    label: string;
-}
-
-const props = withDefaults(
-    defineProps<{
-        snapshot: CatalogSnapshot;
-        loadAudit: () => Promise<AuditRow[]>;
-        actionMeta?: Record<string, ActionMeta>;
-    }>(),
-    {
-        actionMeta: () => ({}),
-    },
-);
-
-const loading = ref(false);
-const events = ref<AuditRow[]>([]);
-
-const msg = useSaMessages('planVersions');
-const common = useSaMessages('common');
-const { locale } = useSuperAdminI18n();
-
-const eventCountLabel = computed(() =>
-    formatMessage(msg.value.audit.eventCount, { count: events.value.length }),
-);
-
-const ACTION_ICONS: Record<string, { icon: string; color: string }> = {
-    PLAN_VERSION_PUBLISH: { icon: 'rocket_launch', color: '#047857' },
-    PLAN_VERSION_DRAFT_CREATE: { icon: 'edit_note', color: '#b45309' },
-    PLAN_VERSION_DRAFT_UPDATE: { icon: 'edit', color: '#3f6bff' },
-    PLAN_VERSION_DRAFT_DELETE: { icon: 'delete', color: '#dc2626' },
-    PLAN_CATALOG_UPDATE: { icon: 'rocket_launch', color: '#047857' },
-};
-
-const defaultActionMeta = computed<Record<string, ActionMeta>>(() => ({
-    PLAN_VERSION_PUBLISH: {
-        ...ACTION_ICONS.PLAN_VERSION_PUBLISH,
-        label: msg.value.audit.actionPlanPublished,
-    },
-    PLAN_VERSION_DRAFT_CREATE: {
-        ...ACTION_ICONS.PLAN_VERSION_DRAFT_CREATE,
-        label: msg.value.audit.actionPlanDraftCreated,
-    },
-    PLAN_VERSION_DRAFT_UPDATE: {
-        ...ACTION_ICONS.PLAN_VERSION_DRAFT_UPDATE,
-        label: msg.value.audit.actionPlanDraftUpdated,
-    },
-    PLAN_VERSION_DRAFT_DELETE: {
-        ...ACTION_ICONS.PLAN_VERSION_DRAFT_DELETE,
-        label: msg.value.audit.actionPlanDraftDeleted,
-    },
-    PLAN_CATALOG_UPDATE: {
-        ...ACTION_ICONS.PLAN_CATALOG_UPDATE,
-        label: msg.value.audit.actionCatalogPublished,
-    },
-}));
-
-function meta(action: string): ActionMeta {
-    return (
-        props.actionMeta[action] ??
-        defaultActionMeta.value[action] ?? {
-            icon: 'circle',
-            color: '#64748b',
-            label: action,
-        }
-    );
-}
-
-function entityLabel(e: AuditRow): string {
-    const c = (e.changes ?? {}) as {
-        planId?: string;
-        key?: string;
-        featureKey?: string;
-        version?: number;
-    };
-    const versionPart = c.version != null ? ` v${c.version}` : '';
-    if (c.planId) return `${c.planId}${versionPart}`;
-    if (c.key) return `${c.key}${versionPart}`;
-    if (c.featureKey) return `${c.featureKey}${versionPart}`;
-    return e.entity;
-}
-
-function detail(e: AuditRow): string {
-    const c = (e.changes ?? {}) as {
-        changeNote?: string;
-        nonRegressive?: boolean;
-        changes?: unknown;
-    };
-    if (c.changeNote) return c.changeNote;
-    if (c.nonRegressive === false) return msg.value.audit.detailRegression;
-    if (Array.isArray(c.changes)) {
-        return formatMessage(msg.value.audit.detailFieldsChanged, { count: c.changes.length });
-    }
-    return e.action;
-}
-
-function actorEmail(e: AuditRow): string | null {
-    return e.user?.email ?? e.userEmail ?? null;
-}
-
-onMounted(reload);
-watch(() => props.snapshot.id, reload);
-
-async function reload(): Promise<void> {
-    loading.value = true;
-    try {
-        const merged = await props.loadAudit();
-        events.value = filterForSnapshot(merged);
-    } finally {
-        loading.value = false;
-    }
-}
-
-function filterForSnapshot(rows: AuditRow[]): AuditRow[] {
-    if (props.snapshot.kind !== 'historical' || !props.snapshot.asOf) return rows.slice(0, 50);
-    const asOfMs = Date.parse(props.snapshot.asOf);
-    return rows.filter((r) => Date.parse(r.createdAt) <= asOfMs).slice(0, 50);
-}
-</script>
-
-<style scoped>
-.sa-pv-audit {
-    padding: 20px 28px;
-}
-.sa-pv-audit__card {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 12px;
-    overflow: hidden;
-}
-.sa-pv-audit__head {
-    padding: 14px 18px;
-    border-bottom: 1px solid var(--sa-border, #e2e8f0);
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-.sa-pv-audit__head h3 {
-    margin: 0;
-    font-family: var(--sa-font-head, system-ui, sans-serif);
-    font-size: 15px;
-    font-weight: 700;
-    color: var(--sa-heading, #0f172a);
-}
-.sa-pv-audit__head-icon {
-    color: var(--sa-primary, #3f6bff);
-}
-.sa-pv-audit__count {
-    font-size: 12px;
-    color: var(--sa-muted, #64748b);
-}
-.sa-pv-audit__refresh {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 6px;
-    padding: 4px 10px;
-    font-size: 11.5px;
-    font-weight: 600;
-    color: var(--sa-body, #1e293b);
-    cursor: pointer;
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-}
-
-.sa-pv-audit__loading,
-.sa-pv-audit__empty {
-    padding: 24px;
-    color: var(--sa-muted, #64748b);
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.sa-pv-audit__list {
-    padding: 8px 0;
-}
-.sa-pv-audit__item {
-    display: flex;
-    align-items: flex-start;
-    gap: 14px;
-    padding: 12px 18px;
-    border-bottom: 1px solid var(--sa-border-soft, #f1f5f9);
-}
-.sa-pv-audit__item--last {
-    border-bottom: none;
-}
-
-.sa-pv-audit__icon {
-    width: 32px;
-    height: 32px;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-}
-
-.sa-pv-audit__body {
-    flex: 1;
-    min-width: 0;
-}
-.sa-pv-audit__title-row {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-.sa-pv-audit__title {
-    font-size: 13px;
-    font-weight: 600;
-    color: var(--sa-heading, #0f172a);
-}
-.sa-pv-audit__entity {
-    font-family: var(--sa-font-mono, ui-monospace, monospace);
-    font-size: 10.5px;
-    font-weight: 600;
-    color: var(--sa-muted, #64748b);
-    background: #f1f5f9;
-    padding: 1px 6px;
-    border-radius: 4px;
-}
-.sa-pv-audit__detail {
-    font-size: 12.5px;
-    color: var(--sa-body, #1e293b);
-    margin-top: 3px;
-    line-height: 1.4;
-}
-.sa-pv-audit__meta {
-    font-size: 11px;
-    color: var(--sa-muted, #64748b);
-    margin-top: 4px;
-    display: flex;
-    gap: 10px;
-}
-.sa-pv-audit__meta span {
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-}
-</style>

package/src/pages-standard/plan-versions/PlanVersionsKpi.vue

@@ -1,65 +0,0 @@
-<template>
-    <div class="sa-pv-kpi">
-        <div class="sa-pv-kpi__icon"><q-icon :name="icon" size="18px" /></div>
-        <div>
-            <div class="sa-pv-kpi__label">{{ label }}</div>
-            <div class="sa-pv-kpi__value">
-                {{ value }}
-                <span v-if="sub" class="sa-pv-kpi__sub">{{ sub }}</span>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-defineProps<{
-    label: string;
-    value: number | string;
-    icon: string;
-    sub?: string;
-}>();
-</script>
-
-<style scoped>
-.sa-pv-kpi {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 10px;
-    padding: 12px 14px;
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-.sa-pv-kpi__icon {
-    width: 36px;
-    height: 36px;
-    border-radius: 9px;
-    background: var(--sa-primary-soft, rgba(63, 107, 255, 0.08));
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-.sa-pv-kpi__icon :deep(.q-icon) {
-    color: var(--sa-primary, #3f6bff);
-}
-.sa-pv-kpi__label {
-    font-size: 10.5px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    color: var(--sa-muted, #64748b);
-    text-transform: uppercase;
-}
-.sa-pv-kpi__value {
-    font-family: var(--sa-font-head, system-ui, sans-serif);
-    font-weight: 700;
-    font-size: 20px;
-    color: var(--sa-heading, #0f172a);
-    line-height: 1.1;
-    margin-top: 2px;
-}
-.sa-pv-kpi__sub {
-    font-size: 12px;
-    font-weight: 500;
-    color: var(--sa-muted, #64748b);
-}
-</style>

package/src/pages-standard/plan-versions/PlanVersionsList.vue

@@ -1,315 +0,0 @@
-<template>
-    <div class="sa-pv-list">
-        <div class="sa-pv-list__kpis">
-            <PlanVersionsKpi
-                :label="msg.list.kpiPlans"
-                :value="snapshot.plans.length"
-                icon="inventory_2"
-            />
-            <PlanVersionsKpi
-                :label="msg.list.kpiSelfService"
-                :value="marketedCount"
-                icon="storefront"
-                :sub="totalPlansLabel"
-            />
-            <PlanVersionsKpi
-                :label="msg.list.kpiFeaturesTotal"
-                :value="totalFeatures"
-                icon="extension"
-            />
-        </div>
-
-        <div v-if="missingPlans.length > 0" class="sa-pv-list__missing">
-            <q-icon name="info" size="16px" />
-            <div>
-                <strong>{{ msg.list.missingPlansLabel }}</strong> {{ missingPlans.join(', ') }}
-                {{ msg.list.missingPlansHint }}
-                <template v-if="canEdit">
-                    <button
-                        v-for="planId in missingPlans"
-                        :key="`new-${planId}`"
-                        type="button"
-                        class="sa-pv-list__missing-btn"
-                        @click="emit('createPlanDraft', planId)"
-                    >
-                        {{ createDraftLabel(planId) }}
-                    </button>
-                </template>
-            </div>
-        </div>
-
-        <div class="sa-pv-list__table">
-            <slot name="table-head">
-                <div
-                    class="sa-pv-list__head sa-pv-list__row sa-pv-list__row--default"
-                    :style="rowGridStyle"
-                >
-                    <div>{{ msg.list.colPlan }}</div>
-                    <div class="sa-pv-list__th--num">{{ msg.list.colPriceNet }}</div>
-                    <div
-                        v-for="col in quotaColumns"
-                        :key="`hd-${col.key}`"
-                        class="sa-pv-list__th--num"
-                    >
-                        {{ col.label }}
-                    </div>
-                    <div class="sa-pv-list__th--num">{{ msg.list.colFeatures }}</div>
-                </div>
-            </slot>
-
-            <template v-for="(plan, i) in snapshot.plans" :key="plan.planId">
-                <slot
-                    name="row"
-                    :plan="plan"
-                    :is-open="openId === plan.planId"
-                    :is-last="i === snapshot.plans.length - 1"
-                    :can-edit="canEdit"
-                    :toggle="() => onToggle(plan.planId)"
-                >
-                    <div
-                        class="sa-pv-list__default-row sa-pv-list__row sa-pv-list__row--default"
-                        :style="rowGridStyle"
-                    >
-                        <div class="sa-pv-list__default-name">
-                            <strong>{{ plan.planId }}</strong>
-                            <span class="sa-pv-list__default-version">v{{ plan.version }}</span>
-                            <span v-if="plan.isDraft" class="sa-pv-list__default-chip">{{
-                                msg.status.draft
-                            }}</span>
-                        </div>
-                        <div class="sa-pv-list__th--num">
-                            {{ formatEuro(plan.monthlyNet) }}
-                        </div>
-                        <div
-                            v-for="col in quotaColumns"
-                            :key="`val-${plan.planId}-${col.key}`"
-                            class="sa-pv-list__th--num"
-                        >
-                            {{ formatQuotaValue(plan.quotas[col.key], col) }}
-                        </div>
-                        <div class="sa-pv-list__th--num">{{ plan.features.length }}</div>
-                    </div>
-                </slot>
-            </template>
-        </div>
-
-        <div v-if="snapshot.kind === 'drafts'" class="sa-pv-list__draft-hint">
-            <q-icon name="info" size="18px" />
-            <div>
-                <strong>{{ msg.list.draftHintLabel }}</strong> {{ msg.list.draftHintBefore }}
-                <em>{{ msg.list.draftHintEditButton }}</em> {{ msg.list.draftHintMiddle }}
-                <strong>{{ msg.list.draftHintPublishFlow }}</strong>
-                {{ msg.list.draftHintAfter }}
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import type { CatalogSnapshot } from '../../client/plan-versions-catalog.js';
-import { formatMessage } from '../../client/i18n/format.js';
-import { useSaMessages, useSuperAdminI18n } from '../../vue/use-super-admin-i18n.js';
-import PlanVersionsKpi from './PlanVersionsKpi.vue';
-import { fmtEuro } from './format.js';
-
-/**
- * Configuration of a quota column (e.g. `users` → "Benutzer"). Optional
- * `fractional: true` → 1 decimal place (storage GB). Optional `unit` →
- * suffix like "GB" after the value. `-1` is rendered as ∞.
- */
-export interface QuotaColumnConfig {
-    key: string;
-    label: string;
-    fractional?: boolean;
-    unit?: string;
-}
-
-const props = defineProps<{
-    snapshot: CatalogSnapshot;
-    /**
-     * Optional: all expected plan IDs. When set, the list shows a
-     * warning with "create draft" buttons for missing plans.
-     */
-    expectedPlanIds?: readonly string[];
-    /**
-     * Optional: additional quota columns between "Preis" and "Features".
-     * Example: `[{ key: 'users', label: 'Benutzer' },
-     * { key: 'members', label: 'Mitglieder' }, { key: 'storageGb',
-     * label: 'Speicher (GB)', fractional: true }, { key: 'resources',
-     * label: 'Plätze' }]`. Default: no additional columns
-     * (backwards-compatible).
-     */
-    quotaColumns?: ReadonlyArray<QuotaColumnConfig>;
-}>();
-
-const emit = defineEmits<{
-    (e: 'editPlanDraft', draftId: string): void;
-    (e: 'createPlanDraft', planId: string): void;
-}>();
-
-const msg = useSaMessages('planVersions');
-const { locale } = useSuperAdminI18n();
-
-const openId = ref<string | null>(null);
-const canEdit = computed(() => props.snapshot.kind === 'drafts');
-
-const totalPlansLabel = computed(() =>
-    formatMessage(msg.value.list.kpiOfTotal, { count: props.snapshot.plans.length }),
-);
-
-const marketedCount = computed(() => props.snapshot.plans.filter((p) => p.marketed).length);
-const totalFeatures = computed(() => new Set(props.snapshot.plans.flatMap((p) => p.features)).size);
-
-const missingPlans = computed<string[]>(() => {
-    if (!props.expectedPlanIds) return [];
-    const present = new Set(props.snapshot.plans.map((p) => p.planId));
-    return props.expectedPlanIds.filter((id) => !present.has(id));
-});
-
-const quotaColumns = computed<ReadonlyArray<QuotaColumnConfig>>(() => props.quotaColumns ?? []);
-
-const rowGridStyle = computed(() => {
-    if (quotaColumns.value.length === 0) {
-        return { gridTemplateColumns: '1.6fr 1fr 0.6fr' };
-    }
-    // Name (1.6fr), price (1fr), N×quota (0.7fr), features (0.5fr)
-    const quotaCols = Array(quotaColumns.value.length).fill('0.7fr').join(' ');
-    return { gridTemplateColumns: `1.6fr 1fr ${quotaCols} 0.5fr` };
-});
-
-function onToggle(id: string): void {
-    openId.value = openId.value === id ? null : id;
-}
-
-function createDraftLabel(planId: string): string {
-    return formatMessage(msg.value.list.createDraftFor, { planId });
-}
-
-function formatEuro(n: number): string {
-    return fmtEuro(n, locale.value);
-}
-
-function formatQuotaValue(value: number | undefined, col: QuotaColumnConfig): string {
-    if (value === undefined) return '–';
-    if (value === -1) return '∞';
-    const formatted = col.fractional ? value.toFixed(1) : Math.round(value).toString();
-    return col.unit ? `${formatted} ${col.unit}` : formatted;
-}
-</script>
-
-<style scoped>
-.sa-pv-list {
-    padding: 20px 28px;
-}
-.sa-pv-list__kpis {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 12px;
-    margin-bottom: 18px;
-}
-.sa-pv-list__missing {
-    display: flex;
-    align-items: flex-start;
-    gap: 10px;
-    background: var(--sa-warning-soft, rgba(245, 158, 11, 0.1));
-    border: 1px solid var(--sa-amber-border, rgba(245, 158, 11, 0.3));
-    border-radius: 10px;
-    padding: 12px 16px;
-    margin-bottom: 14px;
-    font-size: 12.5px;
-    color: #7c2d12;
-}
-.sa-pv-list__missing :deep(.q-icon) {
-    color: var(--sa-warning, #b45309);
-}
-.sa-pv-list__missing-btn {
-    background: #fff;
-    border: 1px solid var(--sa-amber-border, rgba(245, 158, 11, 0.3));
-    color: var(--sa-warning, #b45309);
-    border-radius: 6px;
-    padding: 3px 8px;
-    font-size: 11.5px;
-    font-weight: 600;
-    cursor: pointer;
-    margin-left: 6px;
-}
-
-.sa-pv-list__table {
-    background: #fff;
-    border: 1px solid var(--sa-border, #e2e8f0);
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
-}
-.sa-pv-list__row {
-    display: grid;
-    align-items: center;
-    gap: 12px;
-}
-.sa-pv-list__row--default {
-    grid-template-columns: 1.6fr 1fr 0.6fr;
-    padding: 10px 14px;
-}
-.sa-pv-list__head {
-    background: #fafbfc;
-    border-bottom: 1px solid var(--sa-border, #e2e8f0);
-    font-size: 10.5px;
-    font-weight: 700;
-    letter-spacing: 0.08em;
-    color: var(--sa-muted, #64748b);
-    text-transform: uppercase;
-}
-.sa-pv-list__th--num {
-    text-align: right;
-    font-family: var(--sa-font-mono, ui-monospace, monospace);
-    font-size: 13px;
-}
-
-.sa-pv-list__default-row {
-    border-bottom: 1px solid var(--sa-border-soft, #f1f5f9);
-}
-.sa-pv-list__default-row:last-child {
-    border-bottom: none;
-}
-.sa-pv-list__default-name {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-}
-.sa-pv-list__default-version {
-    font-family: var(--sa-font-mono, ui-monospace, monospace);
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--sa-muted, #64748b);
-    background: #f1f5f9;
-    padding: 2px 6px;
-    border-radius: 4px;
-}
-.sa-pv-list__default-chip {
-    font-size: 9.5px;
-    font-weight: 700;
-    letter-spacing: 0.06em;
-    padding: 2px 6px;
-    border-radius: 4px;
-    background: var(--sa-warning-soft, rgba(245, 158, 11, 0.1));
-    color: var(--sa-warning, #b45309);
-}
-
-.sa-pv-list__draft-hint {
-    margin-top: 14px;
-    background: var(--sa-warning-soft, rgba(245, 158, 11, 0.1));
-    border: 1px solid var(--sa-amber-border, rgba(245, 158, 11, 0.3));
-    border-radius: 10px;
-    padding: 12px 16px;
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    font-size: 12.5px;
-    color: #7c2d12;
-    line-height: 1.5;
-}
-.sa-pv-list__draft-hint :deep(.q-icon) {
-    color: var(--sa-warning, #b45309);
-}
-</style>