fix(ui): Organization Panel rough in updates

packages/swingset/src/components/DocsViewer.tsx

@@ -10,6 +10,37 @@ import { ViewSource } from './ViewSource';
 // MDX docs keyed by `group` slug → `component` slug. Group-aware so identically-named
 // entries (the headless `Dialog` primitive vs. the styled `Dialog` component) stay distinct.
 const docModules: Record<string, Record<string, React.ComponentType>> = {
+  'organization-profile': {
+    'organization-page': dynamic(() => import('../stories/organization-page.mdx')),
+    'organization-profile-api-keys-panel': dynamic(() => import('../stories/organization-profile-api-keys-panel.mdx')),
+    'organization-profile-general-panel': dynamic(() => import('../stories/organization-profile-general-panel.mdx')),
+    'organization-profile-billing-panel': dynamic(() => import('../stories/organization-profile-billing-panel.mdx')),
+    'organization-profile-members-panel': dynamic(() => import('../stories/organization-profile-members-panel.mdx')),
+    'organization-profile-security-panel': dynamic(() => import('../stories/organization-profile-security-panel.mdx')),
+    'organization-profile-details-section': dynamic(
+      () => import('../stories/organization-profile-details-section.mdx'),
+    ),
+    'organization-profile-danger-section': dynamic(() => import('../stories/organization-profile-danger-section.mdx')),
+    'organization-profile-api-keys-section': dynamic(
+      () => import('../stories/organization-profile-api-keys-section.mdx'),
+    ),
+    'organization-profile-members-section': dynamic(
+      () => import('../stories/organization-profile-members-section.mdx'),
+    ),
+    'organization-profile-invoices-section': dynamic(
+      () => import('../stories/organization-profile-invoices-section.mdx'),
+    ),
+    'organization-profile-payment-methods-section': dynamic(
+      () => import('../stories/organization-profile-payment-methods-section.mdx'),
+    ),
+    'organization-profile-sso-section': dynamic(() => import('../stories/organization-profile-sso-section.mdx')),
+    'organization-profile-subscription-section': dynamic(
+      () => import('../stories/organization-profile-subscription-section.mdx'),
+    ),
+    'organization-profile-verified-domains-section': dynamic(
+      () => import('../stories/organization-profile-verified-domains-section.mdx'),
+    ),
+  },
   'user-button': {
     'user-button': dynamic(() => import('../stories/user-button.mdx')),
   },

packages/swingset/src/lib/registry.ts

@@ -61,6 +61,69 @@ import {
 } from '../stories/item.stories';
 import { Default as MenuComponentDefault, meta as menuComponentMeta } from '../stories/menu.component.stories';
 import { meta as menuMeta } from '../stories/menu.stories';
+import { Default as OrganizationPageDefault, meta as organizationPageMeta } from '../stories/organization-page.stories';
+import {
+  Default as OrganizationProfileApiKeysPanelDefault,
+  meta as organizationProfileApiKeysPanelMeta,
+} from '../stories/organization-profile-api-keys-panel.stories';
+import {
+  Default as OrganizationProfileApiKeysSectionDefault,
+  Empty as OrganizationProfileApiKeysSectionEmpty,
+  meta as organizationProfileApiKeysSectionMeta,
+} from '../stories/organization-profile-api-keys-section.stories';
+import {
+  Default as OrganizationProfileBillingPanelDefault,
+  meta as organizationProfileBillingPanelMeta,
+} from '../stories/organization-profile-billing-panel.stories';
+import {
+  Default as OrganizationProfileDangerSectionDefault,
+  meta as organizationProfileDangerSectionMeta,
+} from '../stories/organization-profile-danger-section.stories';
+import {
+  Default as OrganizationProfileDetailsSectionDefault,
+  meta as organizationProfileDetailsSectionMeta,
+} from '../stories/organization-profile-details-section.stories';
+import {
+  Default as OrganizationProfileGeneralPanelDefault,
+  meta as organizationProfileGeneralPanelMeta,
+} from '../stories/organization-profile-general-panel.stories';
+import {
+  Default as OrganizationProfileInvoicesSectionDefault,
+  Empty as OrganizationProfileInvoicesSectionEmpty,
+  meta as organizationProfileInvoicesSectionMeta,
+} from '../stories/organization-profile-invoices-section.stories';
+import {
+  Default as OrganizationProfileMembersPanelDefault,
+  meta as organizationProfileMembersPanelMeta,
+} from '../stories/organization-profile-members-panel.stories';
+import {
+  Default as OrganizationProfileMembersSectionDefault,
+  Empty as OrganizationProfileMembersSectionEmpty,
+  meta as organizationProfileMembersSectionMeta,
+} from '../stories/organization-profile-members-section.stories';
+import {
+  Default as OrganizationProfilePaymentMethodsSectionDefault,
+  Empty as OrganizationProfilePaymentMethodsSectionEmpty,
+  meta as organizationProfilePaymentMethodsSectionMeta,
+} from '../stories/organization-profile-payment-methods-section.stories';
+import {
+  Default as OrganizationProfileSecurityPanelDefault,
+  meta as organizationProfileSecurityPanelMeta,
+} from '../stories/organization-profile-security-panel.stories';
+import {
+  Default as OrganizationProfileSsoSectionDefault,
+  Empty as OrganizationProfileSsoSectionEmpty,
+  meta as organizationProfileSsoSectionMeta,
+} from '../stories/organization-profile-sso-section.stories';
+import {
+  Default as OrganizationProfileSubscriptionSectionDefault,
+  meta as organizationProfileSubscriptionSectionMeta,
+} from '../stories/organization-profile-subscription-section.stories';
+import {
+  Default as OrganizationProfileVerifiedDomainsSectionDefault,
+  Empty as OrganizationProfileVerifiedDomainsSectionEmpty,
+  meta as organizationProfileVerifiedDomainsSectionMeta,
+} from '../stories/organization-profile-verified-domains-section.stories';
 import { meta as otpMeta } from '../stories/otp.stories';
 import {
   Alignment as PopoverComponentAlignment,
@@ -282,6 +345,73 @@ const scrollAreaModule: StoryModule = {
 
 const useDataTableModule: StoryModule = { meta: useDataTableMeta };
 
+const organizationPageModule: StoryModule = {
+  meta: organizationPageMeta,
+  Default: OrganizationPageDefault,
+};
+const organizationProfileGeneralPanelModule: StoryModule = {
+  meta: organizationProfileGeneralPanelMeta,
+  Default: OrganizationProfileGeneralPanelDefault,
+};
+const organizationProfileApiKeysPanelModule: StoryModule = {
+  meta: organizationProfileApiKeysPanelMeta,
+  Default: OrganizationProfileApiKeysPanelDefault,
+};
+const organizationProfileBillingPanelModule: StoryModule = {
+  meta: organizationProfileBillingPanelMeta,
+  Default: OrganizationProfileBillingPanelDefault,
+};
+const organizationProfileMembersPanelModule: StoryModule = {
+  meta: organizationProfileMembersPanelMeta,
+  Default: OrganizationProfileMembersPanelDefault,
+};
+const organizationProfileSecurityPanelModule: StoryModule = {
+  meta: organizationProfileSecurityPanelMeta,
+  Default: OrganizationProfileSecurityPanelDefault,
+};
+const organizationProfileDetailsSectionModule: StoryModule = {
+  meta: organizationProfileDetailsSectionMeta,
+  Default: OrganizationProfileDetailsSectionDefault,
+};
+const organizationProfileDangerSectionModule: StoryModule = {
+  meta: organizationProfileDangerSectionMeta,
+  Default: OrganizationProfileDangerSectionDefault,
+};
+const organizationProfileMembersSectionModule: StoryModule = {
+  meta: organizationProfileMembersSectionMeta,
+  Default: OrganizationProfileMembersSectionDefault,
+  Empty: OrganizationProfileMembersSectionEmpty,
+};
+const organizationProfileApiKeysSectionModule: StoryModule = {
+  meta: organizationProfileApiKeysSectionMeta,
+  Default: OrganizationProfileApiKeysSectionDefault,
+  Empty: OrganizationProfileApiKeysSectionEmpty,
+};
+const organizationProfileInvoicesSectionModule: StoryModule = {
+  meta: organizationProfileInvoicesSectionMeta,
+  Default: OrganizationProfileInvoicesSectionDefault,
+  Empty: OrganizationProfileInvoicesSectionEmpty,
+};
+const organizationProfilePaymentMethodsSectionModule: StoryModule = {
+  meta: organizationProfilePaymentMethodsSectionMeta,
+  Default: OrganizationProfilePaymentMethodsSectionDefault,
+  Empty: OrganizationProfilePaymentMethodsSectionEmpty,
+};
+const organizationProfileSsoSectionModule: StoryModule = {
+  meta: organizationProfileSsoSectionMeta,
+  Default: OrganizationProfileSsoSectionDefault,
+  Empty: OrganizationProfileSsoSectionEmpty,
+};
+const organizationProfileSubscriptionSectionModule: StoryModule = {
+  meta: organizationProfileSubscriptionSectionMeta,
+  Default: OrganizationProfileSubscriptionSectionDefault,
+};
+const organizationProfileVerifiedDomainsSectionModule: StoryModule = {
+  meta: organizationProfileVerifiedDomainsSectionMeta,
+  Default: OrganizationProfileVerifiedDomainsSectionDefault,
+  Empty: OrganizationProfileVerifiedDomainsSectionEmpty,
+};
+
 const userProfileApiKeysPanelModule: StoryModule = {
   meta: userProfileApiKeysPanelMeta,
   Default: UserProfileApiKeysPanelDefault,
@@ -357,6 +487,24 @@ const userProfileDeleteSectionModule: StoryModule = {
 export const registry: StoryModule[] = [
   // User Button
   userButtonModule,
+  // Organization Profile
+  organizationPageModule,
+  // Organization Profile · Panels
+  organizationProfileGeneralPanelModule,
+  organizationProfileMembersPanelModule,
+  organizationProfileSecurityPanelModule,
+  organizationProfileBillingPanelModule,
+  organizationProfileApiKeysPanelModule,
+  // Organization Profile · Sections
+  organizationProfileApiKeysSectionModule,
+  organizationProfileDetailsSectionModule,
+  organizationProfileDangerSectionModule,
+  organizationProfileInvoicesSectionModule,
+  organizationProfileMembersSectionModule,
+  organizationProfilePaymentMethodsSectionModule,
+  organizationProfileSsoSectionModule,
+  organizationProfileSubscriptionSectionModule,
+  organizationProfileVerifiedDomainsSectionModule,
   // User Profile
   userPageModule,
   // User Profile · Panels

packages/swingset/src/stories/organization-page.mdx

@@ -0,0 +1,37 @@
+import * as Stories from './organization-page.stories';
+
+# OrganizationPage
+
+The Organization profile shell. It owns the organization navigation and composes independent panels.
+
+<Story
+  name='Default'
+  storyModule={Stories}
+  composition={[
+    {
+      name: 'General panel',
+      href: '/organization-profile/organization-profile-general-panel',
+      layer: 'Organization Profile',
+    },
+    {
+      name: 'Members panel',
+      href: '/organization-profile/organization-profile-members-panel',
+      layer: 'Organization Profile',
+    },
+    {
+      name: 'Security panel',
+      href: '/organization-profile/organization-profile-security-panel',
+      layer: 'Organization Profile',
+    },
+    {
+      name: 'Billing panel',
+      href: '/organization-profile/organization-profile-billing-panel',
+      layer: 'Organization Profile',
+    },
+    {
+      name: 'API Keys panel',
+      href: '/organization-profile/organization-profile-api-keys-panel',
+      layer: 'Organization Profile',
+    },
+  ]}
+/>