codeapp-js 0.2.2 → 1.0.0

package/examples/outlook Demo/dist/styles.css

@@ -1,84 +1,408 @@
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-body {
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-  padding: 20px;
-  background: #f5f5f5;
-  color: #333;
-}
-
-h1 {
-  margin-bottom: 16px;
-}
-
-#loading {
-  font-size: 14px;
-  color: #666;
-}
-
-#error {
-  color: #d32f2f;
-  font-size: 14px;
-  margin-top: 12px;
-}
-
-table {
-  width: 100%;
-  border-collapse: collapse;
-  background: #fff;
-  border-radius: 4px;
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
-}
-
-th, td {
-  text-align: left;
-  padding: 10px 14px;
-  border-bottom: 1px solid #eee;
-}
-
-th {
-  background: #0078d4;
-  color: #fff;
-  font-weight: 600;
-}
-
-tr:last-child td {
-  border-bottom: none;
-}
-
-tr:hover td {
-  background: #f0f6ff;
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    background: #1e1e1e;
-    color: #e0e0e0;
-  }
-
-  table {
-    background: #2d2d2d;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-  }
-
-  th {
-    background: #0063b1;
-  }
-
-  td {
-    border-bottom-color: #444;
-  }
-
-  tr:hover td {
-    background: #383838;
-  }
-
-  #loading {
-    color: #aaa;
-  }
-}
+:root {
+  --page: #f3efe7;
+  --ink: #1f2430;
+  --muted: #6f6a63;
+  --panel: rgba(255, 251, 245, 0.82);
+  --panel-strong: #fffdf8;
+  --line: rgba(45, 44, 40, 0.12);
+  --accent: #b54d2f;
+  --accent-deep: #7d2811;
+  --accent-soft: rgba(181, 77, 47, 0.12);
+  --shadow: 0 24px 80px rgba(67, 47, 25, 0.12);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-height: 100%;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at top left, rgba(181, 77, 47, 0.16), transparent 28%),
+    radial-gradient(circle at right 20%, rgba(23, 87, 122, 0.12), transparent 30%),
+    linear-gradient(180deg, #f7f1e7 0%, var(--page) 45%, #efe7db 100%);
+  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
+}
+
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(0, 0, 0, 0.025) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(0, 0, 0, 0.025) 1px, transparent 1px);
+  background-size: 24px 24px;
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+.app-shell {
+  position: relative;
+  z-index: 1;
+  padding: 28px;
+  display: grid;
+  gap: 20px;
+}
+
+.hero-panel,
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  backdrop-filter: blur(18px);
+  box-shadow: var(--shadow);
+}
+
+.hero-panel {
+  border-radius: 28px;
+  padding: 28px;
+  overflow: hidden;
+}
+
+.hero-panel::after {
+  content: '';
+  position: absolute;
+  inset: auto -8% -38% auto;
+  width: 280px;
+  height: 280px;
+  background: radial-gradient(circle, rgba(181, 77, 47, 0.22), transparent 66%);
+  pointer-events: none;
+}
+
+.eyebrow,
+.panel-kicker,
+.metric-label {
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--accent-deep);
+}
+
+.hero-copy,
+.panel-header {
+  display: flex;
+  gap: 18px;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.hero-copy {
+  margin-top: 12px;
+}
+
+.hero-copy h1,
+.panel-header h2 {
+  margin: 0;
+  font-family: 'Baskerville', 'Palatino Linotype', Georgia, serif;
+  font-weight: 700;
+}
+
+.hero-copy h1 {
+  font-size: clamp(40px, 8vw, 76px);
+  line-height: 0.96;
+  max-width: 7ch;
+}
+
+.hero-text,
+.status-line,
+.metric-note,
+.field span,
+.toggle-field span,
+.compact-field span,
+.mail-meta,
+.event-meta,
+.contact-meta {
+  color: var(--muted);
+}
+
+.hero-text {
+  margin: 14px 0 0;
+  max-width: 56ch;
+  font-size: 15px;
+  line-height: 1.6;
+}
+
+.hero-actions {
+  display: grid;
+  gap: 10px;
+  justify-items: end;
+}
+
+.status-line {
+  margin: 0;
+  font-size: 13px;
+}
+
+.hero-metrics {
+  margin-top: 24px;
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.metric-card {
+  padding: 16px;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.55);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  display: grid;
+  gap: 8px;
+}
+
+.metric-card strong {
+  font-family: 'Baskerville', 'Palatino Linotype', Georgia, serif;
+  font-size: 34px;
+  line-height: 1;
+}
+
+.workspace-grid {
+  display: grid;
+  grid-template-columns: minmax(290px, 0.95fr) minmax(320px, 1.1fr) minmax(300px, 0.9fr);
+  gap: 20px;
+  align-items: start;
+}
+
+.panel,
+.side-column {
+  min-height: 0;
+}
+
+.panel {
+  border-radius: 24px;
+  padding: 18px;
+  display: grid;
+  gap: 16px;
+}
+
+.side-column {
+  display: grid;
+  gap: 20px;
+}
+
+.button {
+  appearance: none;
+  border: 1px solid rgba(31, 36, 48, 0.12);
+  background: rgba(255, 255, 255, 0.72);
+  color: var(--ink);
+  border-radius: 999px;
+  padding: 10px 14px;
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+  transition: transform 140ms ease, background-color 140ms ease, border-color 140ms ease;
+}
+
+.button:hover {
+  transform: translateY(-1px);
+  background: rgba(255, 255, 255, 0.92);
+  border-color: rgba(31, 36, 48, 0.22);
+}
+
+.button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  transform: none;
+}
+
+.button-primary {
+  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
+  border-color: transparent;
+  color: #fff8f4;
+}
+
+.control-stack,
+.field,
+.compact-field {
+  display: grid;
+  gap: 8px;
+}
+
+.field input,
+.compact-field select,
+.diagnostic-select {
+  width: 100%;
+  border-radius: 14px;
+  border: 1px solid rgba(31, 36, 48, 0.12);
+  background: rgba(255, 255, 255, 0.7);
+  color: var(--ink);
+  padding: 11px 12px;
+  font: inherit;
+}
+
+.toggle-field {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+}
+
+.mail-list,
+.event-list,
+.contact-list,
+.category-list {
+  display: grid;
+  gap: 10px;
+}
+
+.mail-item,
+.event-item,
+.contact-item,
+.category-pill {
+  border-radius: 18px;
+  border: 1px solid rgba(31, 36, 48, 0.08);
+  background: rgba(255, 255, 255, 0.7);
+}
+
+.mail-item {
+  padding: 14px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.mail-item.is-active {
+  border-color: rgba(181, 77, 47, 0.34);
+  background: linear-gradient(135deg, rgba(181, 77, 47, 0.16), rgba(255, 255, 255, 0.86));
+}
+
+.mail-item-title,
+.event-title,
+.contact-name {
+  font-weight: 700;
+  line-height: 1.35;
+}
+
+.mail-item-subject {
+  margin: 6px 0 10px;
+  font-family: 'Baskerville', 'Palatino Linotype', Georgia, serif;
+  font-size: 20px;
+}
+
+.mail-meta,
+.event-meta,
+.contact-meta {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.mail-detail {
+  min-height: 280px;
+  padding: 18px;
+  border-radius: 22px;
+  background: var(--panel-strong);
+  border: 1px solid rgba(31, 36, 48, 0.08);
+  overflow: hidden;
+}
+
+.mail-detail h3 {
+  margin: 0;
+  font-family: 'Baskerville', 'Palatino Linotype', Georgia, serif;
+  font-size: 32px;
+  line-height: 1.1;
+}
+
+.mail-detail-grid {
+  display: grid;
+  gap: 14px;
+}
+
+.mail-detail-body {
+  margin: 0;
+  white-space: pre-wrap;
+  line-height: 1.6;
+}
+
+.detail-chip-row,
+.category-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.detail-chip,
+.category-pill {
+  padding: 8px 12px;
+  font-size: 12px;
+  border-radius: 999px;
+  background: var(--accent-soft);
+}
+
+.event-item,
+.contact-item {
+  padding: 12px 14px;
+}
+
+.diagnostic-output {
+  min-height: 180px;
+  max-height: 280px;
+  overflow: auto;
+  margin: 0;
+  padding: 14px;
+  border-radius: 18px;
+  background: #261f1a;
+  color: #f8eadf;
+  font-size: 12px;
+  line-height: 1.45;
+}
+
+.error-banner {
+  border-radius: 16px;
+  padding: 12px 14px;
+  background: rgba(166, 36, 24, 0.12);
+  border: 1px solid rgba(166, 36, 24, 0.18);
+  color: #7c1c10;
+  font-size: 13px;
+}
+
+.empty-state {
+  display: grid;
+  place-items: center;
+  text-align: center;
+  color: var(--muted);
+}
+
+.is-hidden {
+  display: none;
+}
+
+@media (max-width: 1100px) {
+  .hero-metrics,
+  .workspace-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .panel-detail,
+  .side-column {
+    grid-column: span 2;
+  }
+}
+
+@media (max-width: 760px) {
+  .app-shell {
+    padding: 18px;
+  }
+
+  .hero-copy,
+  .panel-header,
+  .hero-metrics,
+  .workspace-grid {
+    grid-template-columns: 1fr;
+    flex-direction: column;
+  }
+
+  .hero-actions {
+    justify-items: start;
+  }
+
+  .panel-detail,
+  .side-column {
+    grid-column: auto;
+  }
+}

package/examples/outlook Demo/power.config.json

@@ -1,24 +1,25 @@
-{
-  "appDisplayName": "Outlook Inbox",
-  "description": "Displays the logged-in user's first 10 inbox emails using the Office 365 Outlook connector.",
-  "environmentId": "<ENVIRONMENT ID>",
-  "buildPath": "./dist",
-  "buildEntryPoint": "index.html",
-  "logoPath": "office-240.png",
-  "localAppUrl": "http://localhost:3000",
-  "region": "prod",
-  "connectionReferences": {
-    "office365outlook": {
-      "id": "/providers/Microsoft.PowerApps/apis/shared_office365",
-      "displayName": "Office 365 Outlook",
-      "dataSources": [
-        "office365"
-      ],
-      "authenticationType": null,
-      "sharedConnectionId": null,
-      "dataSets": {}
-    }
-  },
-  "databaseReferences": {},
-  "version": "1.0"
+{
+  "appId":"2977d2cf-e162-4df7-b609-306b4e6b9086",
+  "appDisplayName": "Outlook Inbox",
+  "description": "Displays the logged-in user's first 10 inbox emails using the Office 365 Outlook connector.",
+  "environmentId": "<ENVIRONMENT_ID>",
+  "buildPath": "./dist",
+  "buildEntryPoint": "index.html",
+  "logoPath": "office-240.png",
+  "localAppUrl": "http://localhost:3000",
+  "region": "prod",
+  "connectionReferences": {
+    "office365outlook": {
+      "id": "/providers/Microsoft.PowerApps/apis/shared_office365",
+      "displayName": "Office 365 Outlook",
+      "dataSources": [
+        "office365"
+      ],
+      "authenticationType": null,
+      "sharedConnectionId": null,
+      "dataSets": {}
+    }
+  },
+  "databaseReferences": {},
+  "version": "1.0"
 }