@jskit-ai/users-web 0.1.80 → 0.1.82

package/package.descriptor.mjs

@@ -3,7 +3,7 @@ import { HOME_COG_OUTLET } from "./src/shared/toolsOutletContracts.js";
 export default Object.freeze({
   packageVersion: 1,
   packageId: "@jskit-ai/users-web",
-  version: "0.1.80",
+  version: "0.1.82",
   kind: "runtime",
   description: "Users web module: account/profile UI plus shared users web widgets.",
   dependsOn: [
@@ -50,6 +50,34 @@ export default Object.freeze({
           subpath: "./client/components/AccountSettingsClientElement",
           summary: "Exports the package-owned account settings host that renders placement-backed account sections."
         },
+        {
+          subpath: "./client/components/CrudAddEditScreen",
+          summary: "Exports the package-owned CRUD add/edit screen shell used by generated form pages."
+        },
+        {
+          subpath: "./client/components/CrudListBulkActionSurface",
+          summary: "Exports the adaptive CRUD list bulk-action surface for generated list pages."
+        },
+        {
+          subpath: "./client/components/CrudListFilterSurface",
+          summary: "Exports the adaptive CRUD list filter surface for generated list pages."
+        },
+        {
+          subpath: "./client/components/CrudListScreen",
+          summary: "Exports the package-owned CRUD list screen shell used by generated list pages."
+        },
+        {
+          subpath: "./client/components/CrudViewScreen",
+          summary: "Exports the package-owned CRUD view screen shell used by generated detail pages."
+        },
+        {
+          subpath: "./client/bulkActions",
+          summary: "Exports client-side CRUD list bulk-action definition helpers."
+        },
+        {
+          subpath: "./client/filters",
+          summary: "Exports client-side CRUD list filter definition helpers."
+        },
         {
           subpath: "./client/components/ProfileClientElement",
           summary: "Exports profile settings client element scaffold component."
@@ -78,10 +106,26 @@ export default Object.freeze({
           subpath: "./client/composables/useCrudListFilterLookups",
           summary: "Exports lookup-backed CRUD list filter helper for remote autocomplete filters."
         },
+        {
+          subpath: "./client/composables/useCrudAddEditScreen",
+          summary: "Exports the package-owned add/edit screen runtime for generated form pages."
+        },
+        {
+          subpath: "./client/composables/useCrudListBulkActions",
+          summary: "Exports selected-record state and execution runtime for generated CRUD list bulk actions."
+        },
+        {
+          subpath: "./client/composables/useCrudListScreen",
+          summary: "Exports the package-owned list screen runtime for generated list pages."
+        },
         {
           subpath: "./client/composables/useView",
           summary: "Exports read/view operation composable."
         },
+        {
+          subpath: "./client/composables/useCrudViewScreen",
+          summary: "Exports the package-owned view screen runtime for generated detail pages."
+        },
         {
           subpath: "./client/composables/usePagedCollection",
           summary: "Exports paged collection query composable."
@@ -112,7 +156,6 @@ export default Object.freeze({
         outlets: [
           {
             target: HOME_COG_OUTLET.target,
-            defaultLinkComponentToken: HOME_COG_OUTLET.defaultLinkComponentToken,
             surfaces: ["home"],
             source: "src/client/components/UsersHomeToolsWidget.vue"
           },
@@ -122,19 +165,66 @@ export default Object.freeze({
             source: "src/client/components/AccountSettingsClientElement.vue"
           }
         ],
+        topology: {
+          placements: [
+            {
+              id: "home.tools-menu",
+              description: "Home surface tools menu actions.",
+              surfaces: ["home"],
+              variants: {
+                compact: {
+                  outlet: HOME_COG_OUTLET.target,
+                  renderers: {
+                    link: "local.main.ui.surface-aware-menu-link-item"
+                  }
+                },
+                medium: {
+                  outlet: HOME_COG_OUTLET.target,
+                  renderers: {
+                    link: "local.main.ui.surface-aware-menu-link-item"
+                  }
+                },
+                expanded: {
+                  outlet: HOME_COG_OUTLET.target,
+                  renderers: {
+                    link: "local.main.ui.surface-aware-menu-link-item"
+                  }
+                }
+              }
+            },
+            {
+              id: "settings.sections",
+              owner: "account-settings",
+              description: "Account settings content sections.",
+              surfaces: ["account"],
+              variants: {
+                compact: {
+                  outlet: "account-settings:sections"
+                },
+                medium: {
+                  outlet: "account-settings:sections"
+                },
+                expanded: {
+                  outlet: "account-settings:sections"
+                }
+              }
+            }
+          ]
+        },
         contributions: [
           {
             id: "users.profile.menu.settings",
-            target: "auth-profile-menu:primary-menu",
+            target: "auth.profile-menu",
+            kind: "link",
             surfaces: ["*"],
             order: 500,
-            componentToken: "auth.web.profile.menu.link-item",
             when: "auth.authenticated === true",
             source: "mutations.text#users-web-profile-settings-placement"
           },
           {
             id: "users.home.tools.widget",
-            target: "shell-layout:top-right",
+            target: "shell.status",
+            kind: "component",
             surfaces: ["home"],
             order: 900,
             componentToken: "users.web.home.tools.widget",
@@ -143,16 +233,18 @@ export default Object.freeze({
           },
           {
             id: "users.home.menu.settings",
-            target: "home-cog:primary-menu",
+            target: "home.tools-menu",
+            kind: "link",
             surfaces: ["home"],
             order: 100,
-            componentToken: "local.main.ui.surface-aware-menu-link-item",
             when: "auth.authenticated === true",
             source: "mutations.text#users-web-home-tools-placement"
           },
           {
             id: "users.account.settings.profile",
-            target: "account-settings:sections",
+            target: "settings.sections",
+            owner: "account-settings",
+            kind: "component",
             surfaces: ["account"],
             order: 100,
             componentToken: "local.main.account-settings.section.profile",
@@ -160,7 +252,9 @@ export default Object.freeze({
           },
           {
             id: "users.account.settings.preferences",
-            target: "account-settings:sections",
+            target: "settings.sections",
+            owner: "account-settings",
+            kind: "component",
             surfaces: ["account"],
             order: 200,
             componentToken: "local.main.account-settings.section.preferences",
@@ -168,7 +262,9 @@ export default Object.freeze({
           },
           {
             id: "users.account.settings.notifications",
-            target: "account-settings:sections",
+            target: "settings.sections",
+            owner: "account-settings",
+            kind: "component",
             surfaces: ["account"],
             order: 300,
             componentToken: "local.main.account-settings.section.notifications",
@@ -181,15 +277,13 @@ export default Object.freeze({
   mutations: {
     dependencies: {
       runtime: {
-        "@tanstack/vue-query": "5.92.12",
         "@mdi/js": "^7.4.47",
-        "@jskit-ai/http-runtime": "0.1.64",
-        "@jskit-ai/realtime": "0.1.64",
-        "@jskit-ai/kernel": "0.1.65",
-        "@jskit-ai/shell-web": "0.1.64",
-        "@jskit-ai/uploads-image-web": "0.1.43",
-        "@jskit-ai/users-core": "0.1.75",
-        vuetify: "^4.0.0"
+        "@jskit-ai/http-runtime": "0.1.66",
+        "@jskit-ai/realtime": "0.1.66",
+        "@jskit-ai/kernel": "0.1.67",
+        "@jskit-ai/shell-web": "0.1.66",
+        "@jskit-ai/uploads-image-web": "0.1.45",
+        "@jskit-ai/users-core": "0.1.77"
       },
       dev: {}
     },
@@ -249,7 +343,7 @@ export default Object.freeze({
         position: "bottom",
         skipIfContains: "id: \"users.profile.menu.settings\"",
         value:
-          "\naddPlacement({\n  id: \"users.profile.menu.settings\",\n  target: \"auth-profile-menu:primary-menu\",\n  surfaces: [\"*\"],\n  order: 500,\n  componentToken: \"auth.web.profile.menu.link-item\",\n  props: {\n    label: \"Settings\",\n    to: \"/account\"\n  },\n  when: ({ auth }) => auth?.authenticated === true\n});\n",
+          "\naddPlacement({\n  id: \"users.profile.menu.settings\",\n  target: \"auth.profile-menu\",\n  kind: \"link\",\n  surfaces: [\"*\"],\n  order: 500,\n  props: {\n    label: \"Settings\",\n    to: \"/account\"\n  },\n  when: ({ auth }) => auth?.authenticated === true\n});\n",
         reason: "Append users-web profile settings menu placement into app-owned placement registry.",
         category: "users-web",
         id: "users-web-profile-settings-placement"
@@ -260,22 +354,44 @@ export default Object.freeze({
         position: "bottom",
         skipIfContains: "id: \"users.home.tools.widget\"",
         value:
-          "\naddPlacement({\n  id: \"users.home.tools.widget\",\n  target: \"shell-layout:top-right\",\n  surfaces: [\"home\"],\n  order: 900,\n  componentToken: \"users.web.home.tools.widget\",\n  when: ({ auth }) => auth?.authenticated === true\n});\n\naddPlacement({\n  id: \"users.home.menu.settings\",\n  target: \"home-cog:primary-menu\",\n  surfaces: [\"home\"],\n  order: 100,\n  componentToken: \"local.main.ui.surface-aware-menu-link-item\",\n  props: {\n    label: \"Settings\",\n    surface: \"home\",\n    scopedSuffix: \"/settings\",\n    unscopedSuffix: \"/settings\"\n  },\n  when: ({ auth }) => auth?.authenticated === true\n});\n",
+          "\naddPlacement({\n  id: \"users.home.tools.widget\",\n  target: \"shell.status\",\n  kind: \"component\",\n  surfaces: [\"home\"],\n  order: 900,\n  componentToken: \"users.web.home.tools.widget\",\n  when: ({ auth }) => auth?.authenticated === true\n});\n\naddPlacement({\n  id: \"users.home.menu.settings\",\n  target: \"home.tools-menu\",\n  kind: \"link\",\n  surfaces: [\"home\"],\n  order: 100,\n  props: {\n    label: \"Settings\",\n    surface: \"home\",\n    scopedSuffix: \"/settings\",\n    unscopedSuffix: \"/settings\"\n  },\n  when: ({ auth }) => auth?.authenticated === true\n});\n",
         reason: "Append users-web home tools widget and settings menu placements into app-owned placement registry.",
         category: "users-web",
         id: "users-web-home-tools-placement"
       },
+      {
+        op: "append-text",
+        file: "src/placementTopology.js",
+        position: "bottom",
+        skipIfContains: "id: \"home.tools-menu\"",
+        value:
+          "\naddPlacementTopology({\n  id: \"home.tools-menu\",\n  description: \"Home surface tools menu actions.\",\n  surfaces: [\"home\"],\n  variants: {\n    compact: {\n      outlet: \"home-cog:primary-menu\",\n      renderers: {\n        link: \"local.main.ui.surface-aware-menu-link-item\"\n      }\n    },\n    medium: {\n      outlet: \"home-cog:primary-menu\",\n      renderers: {\n        link: \"local.main.ui.surface-aware-menu-link-item\"\n      }\n    },\n    expanded: {\n      outlet: \"home-cog:primary-menu\",\n      renderers: {\n        link: \"local.main.ui.surface-aware-menu-link-item\"\n      }\n    }\n  }\n});\n",
+        reason: "Append users-web home tools semantic topology into app-owned placement topology.",
+        category: "users-web",
+        id: "users-web-home-tools-topology"
+      },
       {
         op: "append-text",
         file: "src/placement.js",
         position: "bottom",
         skipIfContains: "id: \"users.account.settings.profile\"",
         value:
-          "\naddPlacement({\n  id: \"users.account.settings.profile\",\n  target: \"account-settings:sections\",\n  surfaces: [\"account\"],\n  order: 100,\n  componentToken: \"local.main.account-settings.section.profile\",\n  props: {\n    title: \"Profile\",\n    value: \"profile\",\n    usesSharedRuntime: true\n  }\n});\n\naddPlacement({\n  id: \"users.account.settings.preferences\",\n  target: \"account-settings:sections\",\n  surfaces: [\"account\"],\n  order: 200,\n  componentToken: \"local.main.account-settings.section.preferences\",\n  props: {\n    title: \"Preferences\",\n    value: \"preferences\",\n    usesSharedRuntime: true\n  }\n});\n\naddPlacement({\n  id: \"users.account.settings.notifications\",\n  target: \"account-settings:sections\",\n  surfaces: [\"account\"],\n  order: 300,\n  componentToken: \"local.main.account-settings.section.notifications\",\n  props: {\n    title: \"Notifications\",\n    value: \"notifications\",\n    usesSharedRuntime: true\n  }\n});\n",
+          "\naddPlacement({\n  id: \"users.account.settings.profile\",\n  target: \"settings.sections\",\n  owner: \"account-settings\",\n  kind: \"component\",\n  surfaces: [\"account\"],\n  order: 100,\n  componentToken: \"local.main.account-settings.section.profile\",\n  props: {\n    title: \"Profile\",\n    value: \"profile\",\n    usesSharedRuntime: true\n  }\n});\n\naddPlacement({\n  id: \"users.account.settings.preferences\",\n  target: \"settings.sections\",\n  owner: \"account-settings\",\n  kind: \"component\",\n  surfaces: [\"account\"],\n  order: 200,\n  componentToken: \"local.main.account-settings.section.preferences\",\n  props: {\n    title: \"Preferences\",\n    value: \"preferences\",\n    usesSharedRuntime: true\n  }\n});\n\naddPlacement({\n  id: \"users.account.settings.notifications\",\n  target: \"settings.sections\",\n  owner: \"account-settings\",\n  kind: \"component\",\n  surfaces: [\"account\"],\n  order: 300,\n  componentToken: \"local.main.account-settings.section.notifications\",\n  props: {\n    title: \"Notifications\",\n    value: \"notifications\",\n    usesSharedRuntime: true\n  }\n});\n",
         reason: "Append users-web account settings section placements into the app-owned placement registry.",
         category: "users-web",
         id: "users-web-account-settings-sections-placement"
       },
+      {
+        op: "append-text",
+        file: "src/placementTopology.js",
+        position: "bottom",
+        skipIfContains: "id: \"settings.sections\"",
+        value:
+          "\naddPlacementTopology({\n  id: \"settings.sections\",\n  owner: \"account-settings\",\n  description: \"Account settings content sections.\",\n  surfaces: [\"account\"],\n  variants: {\n    compact: {\n      outlet: \"account-settings:sections\"\n    },\n    medium: {\n      outlet: \"account-settings:sections\"\n    },\n    expanded: {\n      outlet: \"account-settings:sections\"\n    }\n  }\n});\n",
+        reason: "Append users-web account settings semantic topology into app-owned placement topology.",
+        category: "users-web",
+        id: "users-web-account-settings-topology"
+      },
       {
         op: "append-text",
         file: "packages/main/src/client/providers/MainClientProvider.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/users-web",
-  "version": "0.1.80",
+  "version": "0.1.82",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -8,22 +8,33 @@
   "exports": {
     "./client": "./src/client/index.js",
     "./client/components/AccountSettingsClientElement": "./src/client/components/AccountSettingsClientElement.vue",
+    "./client/components/CrudAddEditScreen": "./src/client/components/CrudAddEditScreen.vue",
+    "./client/components/CrudListBulkActionSurface": "./src/client/components/CrudListBulkActionSurface.vue",
+    "./client/components/CrudListFilterSurface": "./src/client/components/CrudListFilterSurface.vue",
+    "./client/components/CrudListScreen": "./src/client/components/CrudListScreen.vue",
+    "./client/components/CrudViewScreen": "./src/client/components/CrudViewScreen.vue",
     "./client/account-settings/sections": "./src/client/account-settings/sections.js",
+    "./client/bulkActions": "./src/client/bulkActions.js",
+    "./client/filters": "./src/client/filters.js",
     "./client/composables/useAddEdit": "./src/client/composables/records/useAddEdit.js",
     "./client/composables/useAccess": "./src/client/composables/useAccess.js",
     "./client/composables/useCommand": "./src/client/composables/useCommand.js",
     "./client/composables/useCrudAddEdit": "./src/client/composables/records/useCrudAddEdit.js",
+    "./client/composables/useCrudAddEditScreen": "./src/client/composables/useCrudAddEditScreen.js",
+    "./client/composables/useCrudListBulkActions": "./src/client/composables/useCrudListBulkActions.js",
     "./client/composables/crudLookupFieldRuntime": "./src/client/composables/crud/crudLookupFieldRuntime.js",
     "./client/composables/useCrudListFilterLookups": "./src/client/composables/useCrudListFilterLookups.js",
     "./client/composables/useCrudListFilters": "./src/client/composables/useCrudListFilters.js",
     "./client/composables/useEndpointResource": "./src/client/composables/runtime/useEndpointResource.js",
     "./client/composables/useList": "./src/client/composables/records/useList.js",
     "./client/composables/useCrudList": "./src/client/composables/records/useCrudList.js",
+    "./client/composables/useCrudListScreen": "./src/client/composables/useCrudListScreen.js",
     "./client/composables/useCrudListParentTitle": "./src/client/composables/useCrudListParentTitle.js",
     "./client/composables/useRealtimeQueryInvalidation": "./src/client/composables/useRealtimeQueryInvalidation.js",
     "./client/composables/useSurfaceRouteContext": "./src/client/composables/useSurfaceRouteContext.js",
     "./client/composables/useView": "./src/client/composables/records/useView.js",
     "./client/composables/useCrudView": "./src/client/composables/records/useCrudView.js",
+    "./client/composables/useCrudViewScreen": "./src/client/composables/useCrudViewScreen.js",
     "./client/composables/usePagedCollection": "./src/client/composables/usePagedCollection.js",
     "./client/composables/usePaths": "./src/client/composables/usePaths.js",
     "./client/composables/runtime/useUiFeedback": "./src/client/composables/runtime/useUiFeedback.js",
@@ -32,18 +43,18 @@
     "./client/support/contractGuards": "./src/client/support/contractGuards.js"
   },
   "dependencies": {
-    "@tanstack/vue-query": "5.92.12",
     "@mdi/js": "^7.4.47",
-    "@jskit-ai/http-runtime": "0.1.64",
-    "@jskit-ai/kernel": "0.1.65",
-    "@jskit-ai/realtime": "0.1.64",
-    "@jskit-ai/shell-web": "0.1.64",
-    "@jskit-ai/uploads-image-web": "0.1.43",
-    "@jskit-ai/users-core": "0.1.75",
-    "vuetify": "^4.0.0"
+    "@jskit-ai/http-runtime": "0.1.66",
+    "@jskit-ai/kernel": "0.1.67",
+    "@jskit-ai/realtime": "0.1.66",
+    "@jskit-ai/shell-web": "0.1.66",
+    "@jskit-ai/uploads-image-web": "0.1.45",
+    "@jskit-ai/users-core": "0.1.77"
   },
   "peerDependencies": {
+    "@tanstack/vue-query": "^5.90.5",
     "vue": "^3.5.13",
-    "vue-router": "^5.0.4"
+    "vue-router": "^5.0.4",
+    "vuetify": "^4.0.0"
   }
 }

package/src/client/bulkActions.js

@@ -0,0 +1,47 @@
+import { normalizeText } from "@jskit-ai/kernel/shared/support/normalize";
+
+function normalizeCrudListBulkAction(rawAction = {}, index = 0) {
+  if (!rawAction || typeof rawAction !== "object" || Array.isArray(rawAction)) {
+    return null;
+  }
+
+  const key = normalizeText(rawAction.key || rawAction.id || `action-${index + 1}`);
+  const label = normalizeText(rawAction.label || rawAction.title);
+  if (!key || !label) {
+    return null;
+  }
+
+  return Object.freeze({
+    key,
+    label,
+    icon: normalizeText(rawAction.icon),
+    color: normalizeText(rawAction.color, { fallback: "primary" }),
+    variant: normalizeText(rawAction.variant, { fallback: "tonal" }),
+    confirmLabel: normalizeText(rawAction.confirmLabel),
+    run: typeof rawAction.run === "function" ? rawAction.run : null,
+    disabled: rawAction.disabled
+  });
+}
+
+function defineCrudListBulkActions(actions = []) {
+  if (!Array.isArray(actions)) {
+    throw new TypeError("defineCrudListBulkActions requires an array.");
+  }
+
+  const normalizedActions = [];
+  const seenKeys = new Set();
+
+  actions.forEach((rawAction, index) => {
+    const action = normalizeCrudListBulkAction(rawAction, index);
+    if (!action || seenKeys.has(action.key)) {
+      return;
+    }
+
+    seenKeys.add(action.key);
+    normalizedActions.push(action);
+  });
+
+  return Object.freeze(normalizedActions);
+}
+
+export { defineCrudListBulkActions };

package/src/client/components/AccountSettingsClientElement.vue

@@ -56,28 +56,41 @@ const activeTab = computed({
 
 <template>
   <section class="settings-view py-2 py-md-4">
-    <v-card class="panel-card" rounded="lg" elevation="1" border>
-      <v-card-item>
-        <v-card-title class="panel-title">Account settings</v-card-title>
-        <v-card-subtitle>Global profile, preferences, notifications, and account controls.</v-card-subtitle>
-        <template #append>
-          <v-btn
-            variant="text"
-            color="secondary"
-            :to="runtime.backNavigationTarget.value.sameOrigin ? runtime.backNavigationTarget.value.href : undefined"
-            :href="runtime.backNavigationTarget.value.sameOrigin ? undefined : runtime.backNavigationTarget.value.href"
-          >
-            Back
-          </v-btn>
-        </template>
-      </v-card-item>
-      <v-divider />
+    <v-sheet class="settings-panel" rounded="lg" border>
+      <header class="settings-panel__header">
+        <div>
+          <h1 class="settings-panel__title">Account settings</h1>
+          <p class="text-body-2 text-medium-emphasis mb-0">
+            Global profile, preferences, notifications, and account controls.
+          </p>
+        </div>
+        <v-btn
+          variant="text"
+          color="secondary"
+          :to="runtime.backNavigationTarget.value.sameOrigin ? runtime.backNavigationTarget.value.href : undefined"
+          :href="runtime.backNavigationTarget.value.sameOrigin ? undefined : runtime.backNavigationTarget.value.href"
+        >
+          Back
+        </v-btn>
+      </header>
 
-      <v-card-text class="pt-4">
+      <div class="settings-panel__body">
         <template v-if="runtime.loadingSettings.value">
           <v-skeleton-loader type="text@2, list-item-two-line@4" class="mb-4" />
           <v-skeleton-loader type="text@2, paragraph, button" />
         </template>
+        <div v-else-if="runtime.settingsLoadError.value" class="settings-panel__state">
+          <h2 class="text-h6 mb-2">Unable to load account settings</h2>
+          <p class="text-body-2 text-medium-emphasis mb-4">{{ runtime.settingsLoadError.value }}</p>
+          <v-btn
+            color="primary"
+            variant="tonal"
+            :loading="runtime.refreshingSettings.value"
+            @click="runtime.refreshSettings"
+          >
+            Retry
+          </v-btn>
+        </div>
         <template v-else-if="sections.length < 1">
           <p class="text-body-2 text-medium-emphasis mb-0">No account settings sections are registered.</p>
         </template>
@@ -109,20 +122,42 @@ const activeTab = computed({
             </v-col>
           </v-row>
         </template>
-      </v-card-text>
-    </v-card>
+      </div>
+    </v-sheet>
   </section>
 </template>
 
 <style scoped>
-.panel-card {
+.settings-panel {
   background-color: rgb(var(--v-theme-surface));
+  overflow: hidden;
+}
+
+.settings-panel__header {
+  align-items: flex-start;
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  padding: 1rem 1rem 0;
 }
 
-.panel-title {
-  font-size: 1rem;
-  font-weight: 600;
-  letter-spacing: 0.01em;
+.settings-panel__title {
+  font-size: clamp(1.35rem, 2vw, 1.85rem);
+  font-weight: 650;
+  letter-spacing: -0.02em;
+  line-height: 1.15;
+  margin: 0 0 0.35rem;
+}
+
+.settings-panel__body {
+  padding: 1rem;
+}
+
+.settings-panel__state {
+  margin-inline: auto;
+  max-width: 30rem;
+  padding: 2rem 1rem;
+  text-align: center;
 }
 
 .settings-section-list {
@@ -139,4 +174,14 @@ const activeTab = computed({
 :deep(.settings-sections-window .v-window-x-reverse-transition-leave-active) {
   transition: none !important;
 }
+
+@media (max-width: 960px) {
+  .settings-panel__header {
+    flex-direction: column;
+  }
+
+  .settings-panel__header :deep(.v-btn) {
+    min-height: 48px;
+  }
+}
 </style>